@wix/editor-react-components 1.2288.0 → 1.2289.0

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

@@ -0,0 +1,370 @@
+import { N as NativeStateType, b as DISPLAY_GROUPS, D as DATA, E as ELEMENTS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DesignStates, P as PREVIEW_CALENDAR_OPEN, b as DisplayNames, d as defaultValues, s as selectors } from "../chunks/constants32.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 { D as DomEventType } from "../chunks/types.impl.js";
+const cssProperties = {
+  font: {},
+  color: {}
+};
+const designState = (s) => withSpec({
+  spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+  displayName: s.displayName,
+  className: s.className
+});
+const openWhileDesigning = {
+  stateKey: PREVIEW_CALENDAR_OPEN,
+  elementPath: ".root"
+};
+const boxBorder = {
+  borderTop: {},
+  borderBottom: {},
+  borderInlineStart: {},
+  borderInlineEnd: {},
+  borderStartStartRadius: {},
+  borderStartEndRadius: {},
+  borderEndStartRadius: {},
+  borderEndEndRadius: {}
+};
+const boxPadding = {
+  paddingTop: {},
+  paddingBottom: {},
+  paddingInlineStart: {},
+  paddingInlineEnd: {}
+};
+const manifest = {
+  id: "0bdb8b86-cfd6-45cb-a30b-900480415524",
+  type: "wixEditorElements.DatePicker__DEV__v2",
+  description: "A date picker input. Visitors pick a date from a segmented field or a calendar popover. The selected date is exposed as an ISO string and can be connected to a data field.",
+  installation: {
+    initialSize: {
+      width: {
+        sizingType: LAYOUT.SIZING_TYPE.pixels,
+        pixels: 240
+      },
+      height: {
+        sizingType: LAYOUT.SIZING_TYPE.content
+      }
+    }
+  },
+  editorElement: {
+    selector: getSelector(selectors.root),
+    displayName: DisplayNames.root.elementDisplayName,
+    archetype: Archetype.DatePicker,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
+      disableStretching: true,
+      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: {} }
+        }
+      },
+      dateInput: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.dateInput,
+          selector: getSelector(selectors.group),
+          behaviors: { selectable: false },
+          cssProperties: {
+            background: {},
+            columnGap: {},
+            ...boxBorder,
+            ...boxPadding
+          },
+          states: {
+            hover: designState(DesignStates.dateInput.hover),
+            focus: designState(DesignStates.dateInput.focus),
+            disabled: designState(DesignStates.dateInput.disabled)
+          }
+        }
+      },
+      calendarButton: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.calendarButton,
+          selector: getSelector(selectors.calendarButton),
+          behaviors: { selectable: false },
+          cssProperties: {
+            background: {},
+            color: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {}
+          },
+          states: {
+            hover: designState(DesignStates.calendarButton.hover),
+            selected: designState(DesignStates.calendarButton.selected)
+          }
+        }
+      },
+      popover: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.popover,
+          selector: getSelector(selectors.popover),
+          behaviors: { selectable: false },
+          cssProperties: { boxShadow: {}, ...boxBorder },
+          visibleState: openWhileDesigning
+        }
+      },
+      calendar: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.calendar,
+          selector: getSelector(selectors.calendar),
+          behaviors: { selectable: false },
+          cssProperties: { background: {}, ...boxPadding },
+          visibleState: openWhileDesigning
+        }
+      },
+      calendarDay: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.calendarDay,
+          selector: getSelector(selectors.day),
+          behaviors: { selectable: false },
+          cssProperties: { background: {}, color: {} },
+          states: {
+            hover: designState(DesignStates.calendarDay.hover),
+            selected: designState(DesignStates.calendarDay.selected),
+            disabled: designState(DesignStates.calendarDay.disabled)
+          },
+          visibleState: openWhileDesigning
+        }
+      },
+      today: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.today,
+          selector: `${getSelector(selectors.day)}[data-today]`,
+          behaviors: { selectable: false },
+          cssProperties: { background: {}, color: {} },
+          visibleState: openWhileDesigning
+        }
+      }
+    },
+    data: {
+      value: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.value
+      },
+      endValue: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.endValue
+      },
+      selectionMode: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.root.data.selectionMode.displayName,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "single",
+              displayName: DisplayNames.root.data.selectionMode.options.single
+            },
+            {
+              value: "range",
+              displayName: DisplayNames.root.data.selectionMode.options.range
+            }
+          ]
+        },
+        defaultValue: defaultValues.selectionMode
+      },
+      granularity: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.root.data.granularity.displayName,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "day",
+              displayName: DisplayNames.root.data.granularity.options.day
+            },
+            {
+              value: "hour",
+              displayName: DisplayNames.root.data.granularity.options.hour
+            },
+            {
+              value: "minute",
+              displayName: DisplayNames.root.data.granularity.options.minute
+            }
+          ]
+        },
+        defaultValue: defaultValues.granularity
+      },
+      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
+      },
+      description: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.description,
+        defaultValue: defaultValues.description
+      },
+      minDate: {
+        dataType: DATA.DATA_TYPE.localDate,
+        displayName: DisplayNames.root.data.minDate
+      },
+      maxDate: {
+        dataType: DATA.DATA_TYPE.localDate,
+        displayName: DisplayNames.root.data.maxDate
+      },
+      unavailableDates: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: DisplayNames.root.data.unavailableDates,
+        [DATA.DATA_TYPE.arrayItems]: {
+          data: {
+            items: {
+              from: {
+                dataType: DATA.DATA_TYPE.localDate,
+                displayName: DisplayNames.root.data.unavailableFrom
+              },
+              to: {
+                dataType: DATA.DATA_TYPE.localDate,
+                displayName: DisplayNames.root.data.unavailableTo
+              }
+            }
+          }
+        }
+      },
+      allowPastDates: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.allowPastDates,
+        defaultValue: defaultValues.allowPastDates
+      },
+      allowFutureDates: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.allowFutureDates,
+        defaultValue: defaultValues.allowFutureDates
+      },
+      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]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestChangeable(),
+      onEndChange: {
+        dataType: DATA.DATA_TYPE.function,
+        displayName: DisplayNames.root.data.onEndChange,
+        [DATA.DATA_TYPE.function]: {
+          parameters: [{ domEvent: DomEventType.CHANGE }]
+        }
+      },
+      ...manifestFocusable()
+    },
+    displayGroups: {
+      orderedDataGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: [
+            "required",
+            "readOnly",
+            "isDisabled",
+            "clearable",
+            "allowPastDates",
+            "allowFutureDates",
+            "selectionMode",
+            "granularity",
+            "label",
+            "tooltip",
+            "description",
+            "minDate",
+            "maxDate"
+          ]
+        }
+      }
+    },
+    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
+      }),
+      disabled: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.disabled.displayName,
+        className: DesignStates.root.disabled.className,
+        pseudoClass: NativeStateType.disabled
+      }),
+      // Editor-only: activating this state passes `previewCalendarOpen` so the
+      // overlay parts (referenced via `visibleState`) are editable on canvas.
+      [PREVIEW_CALENDAR_OPEN]: {
+        props: {
+          [PREVIEW_CALENDAR_OPEN]: true
+        }
+      }
+    },
+    displayFilters: {
+      states: {
+        hide: [PREVIEW_CALENDAR_OPEN]
+      }
+    },
+    cssProperties
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/DatePicker/component.tsx",
+      dependencies: {
+        serviceDependencies: [
+          "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations"
+        ]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/DatePicker/component.preview.tsx"
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/DatePicker" }
+  }
+};
+export {
+  manifest as default
+};

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

@@ -12,15 +12,13 @@ import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { A as ALL_VALUE, T as TestIds, s as semanticClassNames, d as defaultValues, a as TriggerModeValues, b as ARIA_LABEL_NAMESPACE, c as AriaLabels, e as selectors } from "../chunks/constants31.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
+import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
 import { r as requireIsSymbol, a as require_baseSlice } from "../chunks/_baseSlice.js";
 import { r as requireIsObject, a as requireEq, b as requireIsArrayLike, c as require_isIndex } from "../chunks/isArrayLike.js";
 const ConfirmSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11.9393398,6 C12.232233,5.70710678 12.7071068,5.70710678 13,6 C13.2928932,6.29289322 13.2928932,6.76776695 13,7.06066017 L7.5,12.5606602 L5,10.0606602 C4.70710678,9.76776695 4.70710678,9.29289322 5,9 C5.29289322,8.70710678 5.76776695,8.70710678 6.06066017,9 L7.5,10.4393398 L11.9393398,6 Z" }));
 ConfirmSmall.displayName = "ConfirmSmall";
 var ConfirmSmall_default = ConfirmSmall;
-const DismissSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M8.43933983,9.5 L6,7.06066017 C5.70710678,6.76776695 5.70710678,6.29289322 6,6 C6.29289322,5.70710678 6.76776695,5.70710678 7.06066017,6 L9.5,8.43933983 L11.9393398,6 C12.232233,5.70710678 12.7071068,5.70710678 13,6 C13.2928932,6.29289322 13.2928932,6.76776695 13,7.06066017 L10.5606602,9.5 L13,11.9393398 C13.2928932,12.232233 13.2928932,12.7071068 13,13 C12.7071068,13.2928932 12.232233,13.2928932 11.9393398,13 L9.5,10.5606602 L7.06066017,13 C6.76776695,13.2928932 6.29289322,13.2928932 6,13 C5.70710678,12.7071068 5.70710678,12.232233 6,11.9393398 L8.43933983,9.5 Z" }));
-DismissSmall.displayName = "DismissSmall";
-var DismissSmall_default = DismissSmall;
 var _trimmedEndIndex;
 var hasRequired_trimmedEndIndex;
 function require_trimmedEndIndex() {

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

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
 import { useState } from "react";
 import { c as clsx } from "../chunks/clsx.js";
 import { F as Field, T as Tooltip, I as Input_Input_Input } from "../chunks/index10.js";
@@ -10,9 +9,7 @@ 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 { d as defaultValues, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants17.js";
-const InfoCircleSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z M9,15 C12.3137085,15 15,12.3137085 15,9 C15,5.6862915 12.3137085,3 9,3 C5.6862915,3 3,5.6862915 3,9 C3,12.3137085 5.6862915,15 9,15 Z M8,8 L10,8 L10,12 L11,13 L7,13 L8,12 L8,8.85714286 L7,8.85714286 L8,8 Z M9,5 C9.55228475,5 10,5.44771525 10,6 C10,6.55228475 9.55228475,7 9,7 C8.44771525,7 8,6.55228475 8,6 C8,5.44771525 8.44771525,5 9,5 Z" }));
-InfoCircleSmall.displayName = "InfoCircleSmall";
-var InfoCircleSmall_default = InfoCircleSmall;
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__dlp5n";
 const field = "field__i7dfL";
 const labelRow = "labelRow__qwrwd";