@wix/editor-react-components 1.2309.0 → 1.2311.0

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

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

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

@@ -1,5 +1,5 @@
-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 { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { c as DisplayNames, d as defaultValues, 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 = {
@@ -7,7 +7,21 @@ const cssProperties = {
   color: {},
   textAlign: {}
 };
-const cssCustomProperties = {};
+const cssCustomProperties = {
+  "segment-focus-background-color": {
+    cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: DisplayNames.root.cssCustomProperties.segmentFocusBackgroundColor
+  },
+  "segment-focus-text-color": {
+    cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+    displayName: DisplayNames.root.cssCustomProperties.segmentFocusTextColor
+  },
+  "label-spacing": {
+    cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.rowGap,
+    displayName: DisplayNames.root.cssCustomProperties.labelSpacing,
+    defaultValue: "6px"
+  }
+};
 const boxBorder = {
   borderTop: {},
   borderBottom: {},
@@ -49,6 +63,15 @@ const manifest = {
       disablePositioning: false
     },
     elements: {
+      label: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.label,
+          selector: getSelector(selectors.label),
+          behaviors: { selectable: false },
+          cssProperties: { font: {}, color: {} }
+        }
+      },
       timeInput: {
         elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
         inlineElement: {
@@ -69,6 +92,100 @@ const manifest = {
         dataType: DATA.DATA_TYPE.localTime,
         displayName: DisplayNames.root.data.value
       },
+      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
+      },
+      label: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.label,
+        defaultValue: defaultValues.label
+      },
+      tooltip: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.tooltip,
+        defaultValue: defaultValues.tooltip
+      },
+      placeholder: {
+        dataType: DATA.DATA_TYPE.localTime,
+        displayName: DisplayNames.root.data.placeholder
+      },
+      description: {
+        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
+      },
+      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
+      },
+      clearable: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.clearable,
+        defaultValue: defaultValues.clearable
+      },
       a11y: {
         dataType: DATA.DATA_TYPE.a11y,
         [DATA.DATA_TYPE.a11y]: {
@@ -86,6 +203,28 @@ const manifest = {
         hide: ["onChange", "onFocus", "onBlur"]
       }
     },
+    displayGroups: {
+      orderedDataGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: [
+            "required",
+            "readOnly",
+            "isDisabled",
+            "clearable",
+            "granularity",
+            "hourCycle",
+            "shouldForceLeadingZeros",
+            "label",
+            "tooltip",
+            "placeholder",
+            "description",
+            "minTime",
+            "maxTime"
+          ]
+        }
+      }
+    },
     cssCustomProperties,
     cssProperties
   },

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

@@ -2,6 +2,8 @@ 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 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`).
  * `parseTime` returns the top-level `@internationalized/date` type while RAC's