@wix/editor-react-components 1.2330.0 → 1.2332.0

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

@@ -1,5 +1,5 @@
 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 { D as DesignStates, a as DisplayNames, 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";

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

@@ -27,11 +27,6 @@ export type TimePickerProps = Omit<SdkFunctionChangeableProps, 'onChange'> & Sdk
     value: string;
     /** Optional text label rendered above the field. */
     label: string;
-    /**
-     * ISO `HH:MM` time that seeds the empty field (React Aria `placeholderValue`
-     * — e.g. which hour the segments start at).
-     */
-    placeholder: string;
     /** Site-facing helper text rendered under the field. */
     description?: string;
     /** Hint text revealed from an info icon next to the label. */

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

@@ -140,11 +140,6 @@ function TimePicker(props) {
   const tooltip2 = readString(props.tooltip);
   const isDisabled = readBool(props.isDisabled, false);
   const isRequired = readBool(props.required, defaultValues.required);
-  const placeholderStr = readString(props.placeholder);
-  const placeholderValue = useMemo(
-    () => toTimeValue(placeholderStr) ?? void 0,
-    [placeholderStr]
-  );
   const { timeValue, handleChange, hasValue } = useTimePickerValue({
     value: props.value,
     onChange,
@@ -202,7 +197,6 @@ function TimePicker(props) {
               shouldForceLeadingZeros: shouldForceLeadingZeros || void 0,
               minValue,
               maxValue,
-              placeholderValue,
               isDisabled,
               isReadOnly: readOnly,
               isRequired,

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

@@ -22,7 +22,6 @@ export declare const DisplayNames: {
             shouldForceLeadingZeros: string;
             tooltip: string;
             label: string;
-            placeholder: string;
             description: string;
             minTime: string;
             maxTime: string;
@@ -31,6 +30,11 @@ export declare const DisplayNames: {
             disabled: string;
             clearable: string;
         };
+        designStates: {
+            hover: string;
+            focus: string;
+            disabled: string;
+        };
         elements: {
             label: string;
             timeInput: string;
@@ -48,7 +52,6 @@ export declare const defaultValues: {
     readonly shouldForceLeadingZeros: false;
     readonly tooltip: "";
     readonly label: "";
-    readonly placeholder: "";
     readonly description: "";
     readonly required: false;
     readonly readOnly: false;
@@ -67,6 +70,22 @@ export declare const enum HourCycleValues {
     H12 = "12",
     H24 = "24"
 }
+export declare const DesignStates: {
+    timeInput: {
+        hover: {
+            displayName: string;
+            className: string;
+        };
+        focus: {
+            displayName: string;
+            className: string;
+        };
+        disabled: {
+            displayName: string;
+            className: string;
+        };
+    };
+};
 /** The value that represents "no time selected". */
 export declare const EMPTY_VALUE = "";
 export declare const TRANSLATIONS_NAMESPACE = "timePicker";

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

@@ -9,13 +9,7 @@
   );
   --label-text-color: var(--wst-paragraph-2-color, #2b2b2b);
 
-  --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;
 
   --label-spacing: 6px;
 
@@ -48,17 +42,23 @@
 .timePicker__j78My {
   display: flex;
   flex-direction: column;
+  row-gap: var(--label-spacing, 6px);
 }
 .labelRow__qoC8g {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 6px;
-  margin: 0 0 var(--label-spacing);
+  margin: 0;
+  min-width: 0;
 }
 .label__THO5j {
   margin: 0;
+  min-width: 0;
+  max-width: 100%;
   font: var(--labelFont);
   color: var(--label-text-color);
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 .tooltipButton__ISWIR {
   flex: none;
@@ -100,29 +100,34 @@
   box-sizing: border-box;
   display: flex;
   align-items: center;
-  gap: 8px;
   width: 100%;
-  padding: 8px 12px;
+  column-gap: 8px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-inline-start: 12px;
+  padding-inline-end: 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);
+  background: var(--wst-primary-background-color, #ffffff);
+  box-shadow: none;
+  border-top: 1px solid var(--borderColor);
+  border-bottom: 1px solid var(--borderColor);
+  border-inline-start: 1px solid var(--borderColor);
+  border-inline-end: 1px solid var(--borderColor);
+  border-start-start-radius: 6px;
+  border-start-end-radius: 6px;
+  border-end-start-radius: 6px;
+  border-end-end-radius: 6px;
   transition: border-color 0.15s ease, box-shadow 0.15s ease;
 }
-.group__6HZy7:focus-within {
+.group__6HZy7:focus-within, .group__6HZy7.timePicker__group--focus {
   border-color: var(--accent-color);
   box-shadow: 0 0 0 1px var(--accent-color);
 }
-.group__6HZy7:hover:not(:focus-within) {
+.group__6HZy7:hover:not(:focus-within), .group__6HZy7.timePicker__group--hover {
   border-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
 }
-.timePicker__j78My[data-disabled] {
+.group__6HZy7[data-disabled], .group__6HZy7.timePicker__group--disabled {
   opacity: 0.55;
   cursor: not-allowed;
 }
@@ -136,7 +141,6 @@
   white-space: nowrap;
 }
 .description__ePprf {
-  margin-top: 4px;
   font-size: 12px;
   opacity: 0.7;
 }
@@ -155,8 +159,8 @@
   color: color-mix(in srgb, currentColor 45%, transparent);
 }
 .segment__OtazP[data-focused] {
-  background: var(--accent-color);
-  color: var(--segment-focus-text-color);
+  background: var(--segment-focus-background-color, #116dff);
+  color: var(--segment-focus-text-color, #ffffff);
 }
 .clearButton__Bto7s {
   flex: none;

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

@@ -1,14 +1,22 @@
 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 { c as DisplayNames, d as defaultValues, e as DesignStates, s as selectors } 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";
 const cssProperties = {
   font: {},
   color: {},
   textAlign: {}
 };
+const designState = (s) => withSpec({
+  spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+  displayName: s.displayName,
+  className: s.className
+});
 const cssCustomProperties = {
   "segment-focus-background-color": {
+    // Keep `color` (not `backgroundColor`): Dev Center enrichment rejects
+    // changing a released cssCustomProperty's type (this was published as color).
     cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
     displayName: DisplayNames.root.cssCustomProperties.segmentFocusBackgroundColor
   },
@@ -22,21 +30,22 @@ const cssCustomProperties = {
     defaultValue: "6px"
   }
 };
-const boxBorder = {
-  borderTop: {},
-  borderBottom: {},
-  borderInlineStart: {},
-  borderInlineEnd: {},
-  borderStartStartRadius: {},
-  borderStartEndRadius: {},
-  borderEndStartRadius: {},
-  borderEndEndRadius: {}
-};
-const boxPadding = {
-  paddingTop: {},
-  paddingBottom: {},
-  paddingInlineStart: {},
-  paddingInlineEnd: {}
+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 manifest = {
   id: "eb293641-a409-4f13-b122-57534b6abdab",
@@ -78,11 +87,11 @@ const manifest = {
           displayName: DisplayNames.root.elements.timeInput,
           selector: getSelector(selectors.group),
           behaviors: { selectable: false },
-          cssProperties: {
-            background: {},
-            columnGap: {},
-            ...boxBorder,
-            ...boxPadding
+          cssProperties: timeInputCssProperties,
+          states: {
+            hover: designState(DesignStates.timeInput.hover),
+            focus: designState(DesignStates.timeInput.focus),
+            disabled: designState(DesignStates.timeInput.disabled)
           }
         }
       }
@@ -149,10 +158,6 @@ const manifest = {
         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,
@@ -217,7 +222,6 @@ const manifest = {
             "shouldForceLeadingZeros",
             "label",
             "tooltip",
-            "placeholder",
             "description",
             "minTime",
             "maxTime"

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

@@ -22,7 +22,6 @@ const DisplayNames = {
       shouldForceLeadingZeros: "Always show leading zeros",
       tooltip: "Tooltip",
       label: "Label",
-      placeholder: "Placeholder time (HH:MM)",
       description: "Helper text",
       minTime: "Earliest time (HH:MM)",
       maxTime: "Latest time (HH:MM)",
@@ -31,6 +30,11 @@ const DisplayNames = {
       disabled: "Disabled",
       clearable: "Show clear button"
     },
+    designStates: {
+      hover: "Hover",
+      focus: "Focus",
+      disabled: "Disabled"
+    },
     elements: {
       label: "Label",
       timeInput: "Time input"
@@ -60,6 +64,22 @@ var HourCycleValues = /* @__PURE__ */ ((HourCycleValues2) => {
   HourCycleValues2["H24"] = "24";
   return HourCycleValues2;
 })(HourCycleValues || {});
+const DesignStates = {
+  timeInput: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "timePicker__group--hover"
+    },
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "timePicker__group--focus"
+    },
+    disabled: {
+      displayName: DisplayNames.root.designStates.disabled,
+      className: "timePicker__group--disabled"
+    }
+  }
+};
 const EMPTY_VALUE = "";
 const TRANSLATIONS_NAMESPACE = "timePicker";
 const TranslationKeys = {
@@ -91,5 +111,6 @@ export {
   TranslationKeys as b,
   DisplayNames as c,
   defaultValues as d,
+  DesignStates as e,
   selectors as s
 };

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

@@ -67,7 +67,7 @@ const DisplayNames = {
   }
 };
 export {
-  DisplayNames as D,
-  DesignStates as a,
+  DesignStates as D,
+  DisplayNames as a,
   selectors as s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2330.0",
+  "version": "1.2332.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -66,7 +66,7 @@
     "format:check": "yarn run -T format:package:check"
   },
   "peerDependencies": {
-    "@wix/editor-react-types": "^1.0.65",
+    "@wix/editor-react-types": "^1.0.67",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -78,7 +78,7 @@
     "@wix/ambassador-devcenter-v1-component-type-data": "^1.0.436",
     "@wix/sdk": "^1.21.13",
     "@wix/services-manager-react": "^0.1.27",
-    "@wix/site-ui": "1.155.0",
+    "@wix/site-ui": "1.156.0",
     "@wix/video": "^1.85.0",
     "@wix/viewer-service-consent-policy": "^1.0.100",
     "@wix/web-bi-logger": "^2.1.26",
@@ -108,7 +108,7 @@
     "@types/react-dom": "^18.2.17",
     "@uiw/react-codemirror": "^4.24.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wix/a11y-audit-tool-plugin": "^0.333.0",
+    "@wix/a11y-audit-tool-plugin": "^0.334.0",
     "@wix/astro": "^2.63.0",
     "@wix/business-tools": "^1.0.225",
     "@wix/cli": "^1.1.226",
@@ -119,7 +119,7 @@
     "@wix/editor": "^1.586.0",
     "@wix/editor-elements-scripts": "^1.0.0",
     "@wix/editor-elements-test-utils": "^1.0.0",
-    "@wix/editor-react-types": "^1.0.65",
+    "@wix/editor-react-types": "^1.0.67",
     "@wix/essentials": "^0.1.28",
     "@wix/fed-cli-sled": "1.0.25",
     "@wix/image": "^1.437.0",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "b489940c16a72f772c508a71aa8d6f8b54151fc805cc3aad4e516cdc"
+  "falconPackageHash": "fe06943bccda40d9f359f1458ee99bd92b7ef0ee0462cfa55b5ed597"
 }