@wix/editor-react-components 1.2254.0 → 1.2255.0

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

@@ -0,0 +1,418 @@
+import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, N as NativeStateType, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DesignStates, f as DisplayNames, d as defaultValues, e as selectors } from "../chunks/constants29.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, d as manifestInputable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+const manifest = {
+  id: "f49b3649-fff3-42b4-8e18-a3cd2b23c2eb",
+  type: "wixEditorElements.Dropdown__DEV__v3",
+  description: "A single-select dropdown input. Visitors pick a value from a list of options (and can clear it when enabled). Options can be set statically or fed dynamically by a connected data source. Turn on search to filter a long list.",
+  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.Dropdown,
+    layout: {
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
+      disableStretching: true,
+      disablePositioning: false
+    },
+    actions: {
+      manageItems: {
+        displayName: DisplayNames.root.displayGroups.optionsGroup,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.data,
+          data: {
+            dataItemKey: "options"
+          }
+        }
+      }
+    },
+    // Design states (gated behind the design-states spec so they stay inert in
+    // prod until the experiment is declared). BEM classNames: `<block>--<state>`.
+    states: {
+      hover: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.hover.displayName,
+        className: DesignStates.root.hover.className,
+        pseudoClass: NativeStateType.hover
+      }),
+      disabled: withSpec({
+        spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+        displayName: DesignStates.root.disabled.displayName,
+        className: DesignStates.root.disabled.className,
+        pseudoClass: NativeStateType.disabled,
+        props: { isDisabled: true }
+      })
+    },
+    data: {
+      options: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: DisplayNames.root.data.options,
+        [DATA.DATA_TYPE.arrayItems]: {
+          data: {
+            items: {
+              label: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.root.data.optionLabel
+              },
+              value: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.root.data.optionValue
+              }
+            }
+          }
+        }
+      },
+      // Single-select selection (shown when `multiple` is off — see preview).
+      value: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.value
+      },
+      // Multi-select selection (shown when `multiple` is on). A separate field
+      // because a data field's schema is fixed — it can't switch text↔arrayItems.
+      values: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: DisplayNames.root.data.values,
+        [DATA.DATA_TYPE.arrayItems]: {
+          data: {
+            items: {
+              value: {
+                dataType: DATA.DATA_TYPE.text,
+                displayName: DisplayNames.root.data.optionValue
+              }
+            }
+          }
+        }
+      },
+      inputValue: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.inputValue,
+        defaultValue: defaultValues.inputValue
+      },
+      open: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.open,
+        defaultValue: defaultValues.open
+      },
+      isDisabled: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.isDisabled,
+        defaultValue: defaultValues.isDisabled
+      },
+      filter: {
+        dataType: DATA.DATA_TYPE.function,
+        [DATA.DATA_TYPE.function]: {}
+      },
+      label: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.label,
+        defaultValue: defaultValues.label
+      },
+      placeholder: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.placeholder,
+        defaultValue: defaultValues.placeholder
+      },
+      searchable: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.searchable,
+        defaultValue: defaultValues.searchable
+      },
+      multiple: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.multiple,
+        defaultValue: defaultValues.multiple
+      },
+      clearable: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.clearable,
+        defaultValue: defaultValues.clearable
+      },
+      autoHighlight: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.autoHighlight,
+        defaultValue: defaultValues.autoHighlight
+      },
+      openOnInputClick: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.openOnInputClick,
+        defaultValue: defaultValues.openOnInputClick
+      },
+      inline: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.inline,
+        defaultValue: defaultValues.inline
+      },
+      grid: {
+        dataType: DATA.DATA_TYPE.booleanValue,
+        displayName: DisplayNames.root.data.grid,
+        defaultValue: defaultValues.grid
+      },
+      columns: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: DisplayNames.root.data.columns,
+        defaultValue: defaultValues.columns
+      },
+      limit: {
+        dataType: DATA.DATA_TYPE.number,
+        displayName: DisplayNames.root.data.limit,
+        defaultValue: defaultValues.limit
+      },
+      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
+      },
+      description: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.description,
+        defaultValue: defaultValues.description
+      },
+      triggerMode: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: DisplayNames.root.data.triggerMode.displayName,
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            {
+              value: "onSelection",
+              displayName: DisplayNames.root.data.triggerMode.options.onSelection
+            },
+            {
+              value: "onApply",
+              displayName: DisplayNames.root.data.triggerMode.options.onApply
+            }
+          ]
+        },
+        defaultValue: defaultValues.triggerMode
+      },
+      applyButtonLabel: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.applyButtonLabel,
+        defaultValue: defaultValues.applyButtonLabel
+      },
+      a11y: {
+        dataType: DATA.DATA_TYPE.a11y,
+        [DATA.DATA_TYPE.a11y]: {
+          attributes: [DATA.A11Y_ATTRIBUTES.ariaLabel]
+        }
+      },
+      direction: {
+        dataType: DATA.DATA_TYPE.direction
+      },
+      ...manifestChangeable(),
+      ...manifestInputable(),
+      ...manifestFocusable()
+    },
+    displayGroups: {
+      optionsGroup: {
+        displayName: DisplayNames.root.displayGroups.optionsGroup,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.listItem,
+        listItem: {
+          arrayItems: "options",
+          label: "label"
+        }
+      },
+      orderedDataGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.data,
+        data: {
+          items: [
+            "required",
+            "readOnly",
+            "searchable",
+            "multiple",
+            "clearable",
+            "grid",
+            "columns",
+            "triggerMode",
+            "applyButtonLabel",
+            "description"
+          ]
+        }
+      },
+      sizeGroup: {
+        displayName: DisplayNames.root.displayGroups.sizeGroup,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.cssDataType,
+        cssDataType: {
+          items: ["width", "maxWidth"]
+        }
+      },
+      backgroundGroup: {
+        displayName: DisplayNames.root.displayGroups.backgroundGroup,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.background,
+        [DISPLAY_GROUPS.GROUP_TYPE.background]: {
+          backgroundColor: "backgroundColor"
+        }
+      },
+      borderGroup: {
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.border,
+        border: {
+          color: "borderColor",
+          width: "borderWidth"
+        }
+      },
+      cornersGroup: {
+        displayName: DisplayNames.root.displayGroups.cornersGroup,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.borderRadius,
+        [DISPLAY_GROUPS.GROUP_TYPE.borderRadius]: {
+          topLeft: "borderStartStartRadius",
+          topRight: "borderStartEndRadius",
+          bottomLeft: "borderEndStartRadius",
+          bottomRight: "borderEndEndRadius"
+        }
+      },
+      paddingGroup: {
+        displayName: DisplayNames.root.displayGroups.paddingGroup,
+        groupType: DISPLAY_GROUPS.GROUP_TYPE.padding,
+        padding: {
+          top: "paddingTop",
+          bottom: "paddingBottom",
+          left: "paddingInlineStart",
+          right: "paddingInlineEnd"
+        }
+      }
+    },
+    cssCustomProperties: {
+      width: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.lengthPercentage,
+        displayName: DisplayNames.root.cssCustomProperties.width
+      },
+      maxWidth: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.lengthPercentage,
+        displayName: DisplayNames.root.cssCustomProperties.maxWidth,
+        defaultValue: "480px"
+      },
+      backgroundColor: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
+        displayName: DisplayNames.root.cssCustomProperties.backgroundColor
+      },
+      borderColor: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+        displayName: DisplayNames.root.cssCustomProperties.borderColor
+      },
+      borderWidth: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderWidth,
+        displayName: DisplayNames.root.cssCustomProperties.borderWidth,
+        defaultValue: "1px"
+      },
+      borderStartStartRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartStartRadius,
+        defaultValue: "4px"
+      },
+      borderStartEndRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderStartEndRadius,
+        defaultValue: "4px"
+      },
+      borderEndStartRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndStartRadius,
+        defaultValue: "4px"
+      },
+      borderEndEndRadius: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderEndEndRadius,
+        defaultValue: "4px"
+      },
+      paddingTop: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingTop,
+        displayName: DisplayNames.root.cssCustomProperties.paddingTop,
+        defaultValue: "8px"
+      },
+      paddingBottom: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingBottom,
+        displayName: DisplayNames.root.cssCustomProperties.paddingBottom,
+        defaultValue: "8px"
+      },
+      paddingInlineStart: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineStart,
+        displayName: DisplayNames.root.cssCustomProperties.paddingInlineStart,
+        defaultValue: "12px"
+      },
+      paddingInlineEnd: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.paddingInlineEnd,
+        displayName: DisplayNames.root.cssCustomProperties.paddingInlineEnd,
+        defaultValue: "12px"
+      },
+      gap: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.gap,
+        displayName: DisplayNames.root.cssCustomProperties.gap,
+        defaultValue: "8px"
+      },
+      textAlign: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.textAlign,
+        displayName: DisplayNames.root.cssCustomProperties.textAlign,
+        defaultValue: "start"
+      },
+      font: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
+        displayName: DisplayNames.root.cssCustomProperties.font,
+        defaultValue: "normal normal normal 16px/1.5em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
+      },
+      textColor: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.root.cssCustomProperties.textColor
+      },
+      labelFont: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
+        displayName: DisplayNames.root.cssCustomProperties.labelFont,
+        defaultValue: "normal normal normal 14px/1.4em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
+      },
+      labelColor: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.root.cssCustomProperties.labelColor
+      },
+      helperFont: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
+        displayName: DisplayNames.root.cssCustomProperties.helperFont,
+        defaultValue: "normal normal normal 14px/1.4em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
+      },
+      helperColor: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.root.cssCustomProperties.helperColor
+      },
+      optionTextColor: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.root.cssCustomProperties.optionTextColor
+      },
+      optionHoverBackgroundColor: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+        displayName: DisplayNames.root.cssCustomProperties.optionHoverBackgroundColor
+      }
+    }
+  },
+  resources: {
+    client: {
+      componentUrl: "./site/components/Dropdown/component.tsx",
+      dependencies: {
+        serviceDependencies: [
+          "@wix/viewer-service-environment",
+          "@wix/viewer-service-translations"
+        ]
+      }
+    },
+    editor: {
+      componentUrl: "./site/components/Dropdown/component.preview.tsx"
+    }
+  },
+  moduleConfiguration: {
+    package: { name: "@wix/editor-react-components", version: "^1.0.0" },
+    component: { path: "site/components/Dropdown" }
+  }
+};
+export {
+  manifest as default
+};

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

@@ -1,6 +1,8 @@
 import { C as CSS_PROPERTIES, L as LAYOUT, D as DATA, I as INTERACTIONS, b as DISPLAY_GROUPS, a as ACTIONS, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
-import { r as require_baseGetTag, a as requireIsObjectLike, b as require_Symbol, c as requireIsArray } from "../chunks/isObjectLike.js";
+import { r as require_Symbol } from "../chunks/isObjectLike.js";
+import { r as requireIsArray } from "../chunks/isArray.js";
+import { r as requireIsSymbol, a as require_baseSlice } from "../chunks/_baseSlice.js";
 var _arrayMap;
 var hasRequired_arrayMap;
 function require_arrayMap() {
@@ -16,19 +18,6 @@ function require_arrayMap() {
   _arrayMap = arrayMap;
   return _arrayMap;
 }
-var isSymbol_1;
-var hasRequiredIsSymbol;
-function requireIsSymbol() {
-  if (hasRequiredIsSymbol) return isSymbol_1;
-  hasRequiredIsSymbol = 1;
-  var baseGetTag = require_baseGetTag(), isObjectLike = requireIsObjectLike();
-  var symbolTag = "[object Symbol]";
-  function isSymbol(value) {
-    return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
-  }
-  isSymbol_1 = isSymbol;
-  return isSymbol_1;
-}
 var _baseToString;
 var hasRequired_baseToString;
 function require_baseToString() {
@@ -64,31 +53,6 @@ function requireToString() {
   toString_1 = toString;
   return toString_1;
 }
-var _baseSlice;
-var hasRequired_baseSlice;
-function require_baseSlice() {
-  if (hasRequired_baseSlice) return _baseSlice;
-  hasRequired_baseSlice = 1;
-  function baseSlice(array, start, end) {
-    var index = -1, length = array.length;
-    if (start < 0) {
-      start = -start > length ? 0 : length + start;
-    }
-    end = end > length ? length : end;
-    if (end < 0) {
-      end += length;
-    }
-    length = start > end ? 0 : end - start >>> 0;
-    start >>>= 0;
-    var result = Array(length);
-    while (++index < length) {
-      result[index] = array[index + start];
-    }
-    return result;
-  }
-  _baseSlice = baseSlice;
-  return _baseSlice;
-}
 const typeValues = {
   solid: "Solid",
   dash: "Dash",

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

@@ -0,0 +1,43 @@
+import { a as require_baseGetTag, b as requireIsObjectLike } from "./isObjectLike.js";
+var isSymbol_1;
+var hasRequiredIsSymbol;
+function requireIsSymbol() {
+  if (hasRequiredIsSymbol) return isSymbol_1;
+  hasRequiredIsSymbol = 1;
+  var baseGetTag = require_baseGetTag(), isObjectLike = requireIsObjectLike();
+  var symbolTag = "[object Symbol]";
+  function isSymbol(value) {
+    return typeof value == "symbol" || isObjectLike(value) && baseGetTag(value) == symbolTag;
+  }
+  isSymbol_1 = isSymbol;
+  return isSymbol_1;
+}
+var _baseSlice;
+var hasRequired_baseSlice;
+function require_baseSlice() {
+  if (hasRequired_baseSlice) return _baseSlice;
+  hasRequired_baseSlice = 1;
+  function baseSlice(array, start, end) {
+    var index = -1, length = array.length;
+    if (start < 0) {
+      start = -start > length ? 0 : length + start;
+    }
+    end = end > length ? length : end;
+    if (end < 0) {
+      end += length;
+    }
+    length = start > end ? 0 : end - start >>> 0;
+    start >>>= 0;
+    var result = Array(length);
+    while (++index < length) {
+      result[index] = array[index + start];
+    }
+    return result;
+  }
+  _baseSlice = baseSlice;
+  return _baseSlice;
+}
+export {
+  require_baseSlice as a,
+  requireIsSymbol as r
+};