@wix/editor-react-components 1.2775.0 → 1.2777.0

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

@@ -1,48 +1,18 @@
-import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
-import { c as DisplayNames, d as defaultValues, e as DesignStates, s as selectors } from "../chunks/constants2.js";
+import { b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-EVX7ZUBD.js";
+import { b as DisplayNames, c as Descriptions, d as TEXT_PROP_STATIC_VALUE_MAX_LENGTH, P as PREVIEW_ERROR_MESSAGE, s as selectors, D as DesignStates } from "../chunks/constants2.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, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
-import { m as manifestValidation } from "../chunks/manifest2.js";
-const cssProperties = {
-  font: {},
-  color: {},
-  textAlign: {}
-};
-const designState = (s) => withSpec({
-  spec: IS_SUPPORT_DESIGN_STATE_SPEC,
-  displayName: s.displayName,
-  className: s.className
-});
-const cssCustomProperties = {
-  "label-spacing": {
-    cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
-    displayName: DisplayNames.root.cssCustomProperties.labelSpacing,
-    defaultValue: "6px"
-  }
-};
-const fieldBorder = "1px solid var(--wst-system-line-1-color, #dfe5eb)";
-const timeInputCssProperties = {
-  background: { defaultValue: "var(--wst-primary-background-color, #ffffff)" },
-  boxShadow: { defaultValue: "none" },
-  borderTop: { defaultValue: fieldBorder },
-  borderBottom: { defaultValue: fieldBorder },
-  borderInlineStart: { defaultValue: fieldBorder },
-  borderInlineEnd: { defaultValue: fieldBorder },
-  borderStartStartRadius: { defaultValue: "6px" },
-  borderStartEndRadius: { defaultValue: "6px" },
-  borderEndStartRadius: { defaultValue: "6px" },
-  borderEndEndRadius: { defaultValue: "6px" },
-  paddingTop: { defaultValue: "8px" },
-  paddingBottom: { defaultValue: "8px" },
-  paddingInlineStart: { defaultValue: "12px" },
-  paddingInlineEnd: { defaultValue: "12px" }
-};
+const basePresetName = "baseTimePicker";
+const designState = (state) => withSpec({ spec: IS_SUPPORT_DESIGN_STATE_SPEC, ...state });
 const manifest = {
-  id: "1b7d0433-671f-4068-b3ba-d6e7a6443833",
-  type: "wixEditorElements.TimePicker__DEV__v3",
-  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.",
+  id: "41156bbe-2741-4a01-a715-7eba6e294f0b",
+  type: "wixEditorElements.TimePicker__DEV__v7",
+  description: Descriptions.component,
   installation: {
+    presets: {
+      small: basePresetName,
+      large: basePresetName
+    },
     initialSize: {
       width: {
         sizingType: LAYOUT.SIZING_TYPE.content
@@ -56,12 +26,121 @@ const manifest = {
     selector: getSelector(selectors.root),
     displayName: DisplayNames.root.elementDisplayName,
     archetype: Archetype.TextInput,
+    presets: {
+      [basePresetName]: {
+        presetCssUrl: `./site/components/TimePicker/presets/${basePresetName}.css`,
+        displayName: DisplayNames.root.presets.baseTimePicker,
+        presetDefaults: {
+          elements: {
+            label: {
+              cssProperties: {
+                marginBottom: {
+                  defaultValue: "0px"
+                },
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 16px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: {
+                  defaultValue: "rgba(0, 0, 0, 1)"
+                }
+              }
+            },
+            timeInput: {
+              cssProperties: {
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 16px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: {
+                  defaultValue: "rgba(0, 0, 0, 1)"
+                },
+                backgroundColor: {
+                  defaultValue: "transparent"
+                },
+                boxShadow: { defaultValue: "none" },
+                borderTop: {
+                  defaultValue: "1px solid #000000"
+                },
+                borderBottom: {
+                  defaultValue: "1px solid #000000"
+                },
+                borderInlineStart: {
+                  defaultValue: "1px solid #000000"
+                },
+                borderInlineEnd: {
+                  defaultValue: "1px solid #000000"
+                },
+                borderStartStartRadius: {
+                  defaultValue: "0px"
+                },
+                borderStartEndRadius: {
+                  defaultValue: "0px"
+                },
+                borderEndStartRadius: {
+                  defaultValue: "0px"
+                },
+                borderEndEndRadius: {
+                  defaultValue: "0px"
+                },
+                paddingTop: { defaultValue: "0px" },
+                paddingBottom: {
+                  defaultValue: "0px"
+                },
+                paddingInlineStart: {
+                  defaultValue: "0px"
+                },
+                paddingInlineEnd: {
+                  defaultValue: "0px"
+                }
+              }
+            },
+            helperText: {
+              cssProperties: {
+                marginTop: { defaultValue: "0px" },
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 14px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: {
+                  defaultValue: "rgba(0, 0, 0, 1)"
+                }
+              }
+            },
+            segment: {
+              cssProperties: {
+                backgroundColor: {
+                  defaultValue: "transparent"
+                },
+                color: {
+                  defaultValue: "inherit"
+                }
+              }
+            },
+            errorMessage: {
+              cssProperties: {
+                marginTop: { defaultValue: "0px" },
+                textAlign: { defaultValue: "start" },
+                font: {
+                  defaultValue: "normal normal 400 14px/1.3em 'Wix Madefor Text', sans-serif"
+                },
+                color: { defaultValue: "rgba(0, 0, 0, 1)" }
+              }
+            }
+          }
+        }
+      }
+    },
     layout: {
-      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
       contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
       disableStretching: true,
       disablePositioning: false
     },
+    states: {
+      previewError: { props: { previewError: true } }
+    },
+    displayFilters: { states: { hide: ["previewError"] } },
     elements: {
       label: {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
@@ -69,7 +148,17 @@ const manifest = {
           displayName: DisplayNames.root.elements.label,
           selector: getSelector(selectors.label),
           behaviors: { selectable: false },
-          cssProperties: { font: {}, color: {} }
+          cssProperties: {
+            marginBottom: {},
+            textAlign: {},
+            font: {},
+            color: {},
+            letterSpacing: {},
+            lineHeight: {},
+            textDecorationLine: {},
+            textTransform: {},
+            textShadow: {}
+          }
         }
       },
       timeInput: {
@@ -78,21 +167,58 @@ const manifest = {
           displayName: DisplayNames.root.elements.timeInput,
           selector: getSelector(selectors.group),
           behaviors: { selectable: false },
-          cssProperties: timeInputCssProperties,
+          cssProperties: {
+            textAlign: {},
+            font: {},
+            color: {},
+            letterSpacing: {},
+            lineHeight: {},
+            textDecorationLine: {},
+            textTransform: {},
+            textShadow: {},
+            backgroundColor: {},
+            boxShadow: {},
+            borderTop: {},
+            borderBottom: {},
+            borderInlineStart: {},
+            borderInlineEnd: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {},
+            paddingTop: {},
+            paddingBottom: {},
+            paddingInlineStart: {},
+            paddingInlineEnd: {}
+          },
           states: {
             hover: designState(DesignStates.timeInput.hover),
             focus: designState(DesignStates.timeInput.focus),
+            error: {
+              ...designState(DesignStates.timeInput.error),
+              props: { errorMessage: PREVIEW_ERROR_MESSAGE }
+            },
             disabled: designState(DesignStates.timeInput.disabled)
           }
         }
       },
-      description: {
+      helperText: {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
-          displayName: DisplayNames.root.elements.description,
+          displayName: DisplayNames.root.elements.helperText,
           selector: getSelector(selectors.description),
           behaviors: { selectable: false },
-          cssProperties: { font: {}, color: {} }
+          cssProperties: {
+            marginTop: {},
+            textAlign: {},
+            font: {},
+            color: {},
+            letterSpacing: {},
+            lineHeight: {},
+            textDecorationLine: {},
+            textTransform: {},
+            textShadow: {}
+          }
         }
       },
       segment: {
@@ -101,111 +227,72 @@ const manifest = {
           displayName: DisplayNames.root.elements.segment,
           selector: getSelector(selectors.segment),
           behaviors: { selectable: false },
-          cssProperties: { background: {}, color: {} },
+          cssProperties: {
+            backgroundColor: {},
+            color: {}
+          },
           states: {
             focus: designState(DesignStates.segment.focus)
           }
         }
+      },
+      errorMessage: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.errorMessage,
+          selector: getSelector(selectors.errorMessage),
+          behaviors: { selectable: false, removable: false },
+          cssProperties: {
+            marginTop: {},
+            textAlign: {},
+            font: {},
+            color: {},
+            letterSpacing: {},
+            lineHeight: {},
+            textDecorationLine: {},
+            textTransform: {},
+            textShadow: {}
+          },
+          visibleState: { stateKey: "previewError", elementPath: ".root" }
+        }
       }
     },
     data: {
       value: {
         dataType: DATA.DATA_TYPE.localTime,
-        displayName: DisplayNames.root.data.value
-      },
-      defaultValue: {
-        dataType: DATA.DATA_TYPE.localTime,
-        displayName: DisplayNames.root.data.defaultValue
-      },
-      granularity: {
-        dataType: DATA.DATA_TYPE.textEnum,
-        displayName: DisplayNames.root.data.granularity.displayName,
-        [DATA.DATA_TYPE.textEnum]: {
-          options: [
-            {
-              value: "hour",
-              displayName: DisplayNames.root.data.granularity.options.hour
-            },
-            {
-              value: "minute",
-              displayName: DisplayNames.root.data.granularity.options.minute
-            },
-            {
-              value: "second",
-              displayName: DisplayNames.root.data.granularity.options.second
-            }
-          ]
-        },
-        defaultValue: defaultValues.granularity
-      },
-      hourCycle: {
-        dataType: DATA.DATA_TYPE.textEnum,
-        displayName: DisplayNames.root.data.hourCycle.displayName,
-        [DATA.DATA_TYPE.textEnum]: {
-          options: [
-            {
-              value: "auto",
-              displayName: DisplayNames.root.data.hourCycle.options.auto
-            },
-            {
-              value: "12",
-              displayName: DisplayNames.root.data.hourCycle.options.h12
-            },
-            {
-              value: "24",
-              displayName: DisplayNames.root.data.hourCycle.options.h24
-            }
-          ]
-        },
-        defaultValue: defaultValues.hourCycle
-      },
-      shouldForceLeadingZeros: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.shouldForceLeadingZeros,
-        defaultValue: defaultValues.shouldForceLeadingZeros
+        displayName: DisplayNames.root.data.value,
+        description: Descriptions.root.data.value
       },
       label: {
         dataType: DATA.DATA_TYPE.text,
         displayName: DisplayNames.root.data.label,
-        defaultValue: defaultValues.label
+        [DATA.DATA_TYPE.text]: {
+          maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+        }
       },
-      tooltip: {
+      helperText: {
         dataType: DATA.DATA_TYPE.text,
-        displayName: DisplayNames.root.data.tooltip,
-        defaultValue: defaultValues.tooltip
+        displayName: DisplayNames.root.data.helperText,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+        },
+        description: Descriptions.root.data.helperText
       },
-      description: {
+      errorMessage: {
         dataType: DATA.DATA_TYPE.text,
-        displayName: DisplayNames.root.data.description,
-        defaultValue: defaultValues.description
-      },
-      minTime: {
-        dataType: DATA.DATA_TYPE.localTime,
-        displayName: DisplayNames.root.data.minTime
-      },
-      maxTime: {
-        dataType: DATA.DATA_TYPE.localTime,
-        displayName: DisplayNames.root.data.maxTime
-      },
-      required: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.required,
-        defaultValue: defaultValues.required
+        displayName: DisplayNames.root.data.errorMessage,
+        [DATA.DATA_TYPE.text]: {
+          maxLength: TEXT_PROP_STATIC_VALUE_MAX_LENGTH
+        },
+        description: Descriptions.root.data.errorMessage
       },
       readOnly: {
         dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.readOnly,
-        defaultValue: defaultValues.readOnly
-      },
-      isDisabled: {
-        dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.disabled,
-        defaultValue: defaultValues.disabled
+        displayName: DisplayNames.root.data.readOnly
       },
-      clearable: {
+      disabled: {
         dataType: DATA.DATA_TYPE.booleanValue,
-        displayName: DisplayNames.root.data.clearable,
-        defaultValue: defaultValues.clearable
+        displayName: DisplayNames.root.data.disabled
       },
       a11y: {
         dataType: DATA.DATA_TYPE.a11y,
@@ -216,39 +303,46 @@ const manifest = {
       direction: {
         dataType: DATA.DATA_TYPE.direction
       },
-      ...manifestChangeable(),
-      ...manifestFocusable(),
-      // The bound value is an ISO time string, so `onValidate` carries text.
-      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
-    },
-    displayFilters: {
-      data: {
-        hide: ["onChange", "onFocus", "onBlur"]
+      onValueChange: {
+        dataType: DATA.DATA_TYPE.function,
+        displayName: DisplayNames.root.data.onValueChange,
+        [DATA.DATA_TYPE.function]: {
+          parameters: [
+            {
+              dataType: DATA.DATA_TYPE.localTime,
+              displayName: DisplayNames.root.parameters.value
+            }
+          ]
+        }
       }
     },
     displayGroups: {
+      partsOrder: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.elements,
+        elements: {
+          items: [
+            "label",
+            "timeInput",
+            "segment",
+            "helperText",
+            "errorMessage"
+          ]
+        }
+      },
       orderedDataGroup: {
         groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
         data: {
           items: [
-            "required",
-            "readOnly",
-            "isDisabled",
-            "clearable",
-            "granularity",
-            "hourCycle",
-            "shouldForceLeadingZeros",
             "label",
-            "tooltip",
-            "description",
-            "minTime",
-            "maxTime"
+            "value",
+            "helperText",
+            "errorMessage",
+            "readOnly",
+            "disabled"
           ]
         }
       }
-    },
-    cssCustomProperties,
-    cssProperties
+    }
   },
   resources: {
     client: {

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

@@ -1,17 +1,17 @@
 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;
+/** Reads a text prop, defaulting an unset/non-string value to `fallback`. */
+export declare const readText: (prop: string | undefined, fallback: string) => string;
 /** Reads a boolean prop, defaulting an unset/non-boolean value to `fallback`. */
 export declare const readBool: (prop: boolean | undefined, fallback: boolean) => boolean;
 /**
- * Parses an ISO `HH:MM[:SS]` into a React Aria `TimeValue` (or `null`).
+ * Parses a local time `HH:MM[:SS]` value 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;
+export declare const toTimeValue: (localTime: string | undefined) => 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`.
+ * `TimeValue` → minute-level local-time value. `Time.toString()` always appends
+ * seconds, which would drift values to `HH:MM:00`. An empty field maps to
+ * `undefined`, since no local-time value exists.
  */
-export declare const toIso: (time: TimeValue | null, granularity: TimePickerGranularity) => string;
+export declare const toLocalTime: (time: TimeValue | null) => string | undefined;