@wix/editor-react-components 1.2621.0 → 1.2622.0

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

@@ -1,182 +1,211 @@
+const DesignStates = {
+  root: {
+    hover: { displayName: "Hover", className: "dropdown--hover" },
+    disabled: { displayName: "Disabled", className: "dropdown--disabled" }
+  },
+  input: {
+    hover: { displayName: "Hover", className: "dropdown__input--hover" },
+    focus: { displayName: "Focus", className: "dropdown__input--focus" },
+    disabled: {
+      displayName: "Disabled",
+      className: "dropdown__input--disabled"
+    }
+  },
+  trigger: {
+    hover: { displayName: "Hover", className: "dropdown__trigger--hover" },
+    selected: {
+      displayName: "Selected",
+      className: "dropdown__trigger--selected"
+    }
+  },
+  clearButton: {
+    hover: { displayName: "Hover", className: "dropdown__clear--hover" },
+    selected: {
+      displayName: "Selected",
+      className: "dropdown__clear--selected"
+    }
+  },
+  option: {
+    hover: { displayName: "Hover", className: "dropdown__option--hover" },
+    selected: {
+      displayName: "Selected",
+      className: "dropdown__option--selected"
+    }
+  },
+  chip: {
+    hover: { displayName: "Hover", className: "dropdown__chip--hover" },
+    selected: {
+      displayName: "Selected",
+      className: "dropdown__chip--selected"
+    }
+  }
+};
+const FunctionalStateKeys = {
+  previewList: "previewList",
+  previewChips: "previewChips"
+};
 const DisplayNames = {
   root: {
-    elementDisplayName: "Date Picker",
+    elementDisplayName: "Dropdown",
     data: {
-      value: "Selected date",
-      endValue: "Selected end date",
-      defaultValue: "Default date",
-      defaultEndValue: "Default end date",
-      onEndChange: "On End Change",
-      selectionMode: {
-        displayName: "Selection",
-        options: {
-          single: "Single date",
-          range: "Date range"
-        }
-      },
-      granularity: {
-        displayName: "Time precision",
-        options: {
-          day: "Date only",
-          hour: "Date and hour",
-          minute: "Date and time"
-        }
-      },
-      tooltip: "Tooltip",
+      options: "Options",
+      optionLabel: "Label",
+      optionValue: "Value",
+      value: "Selected value",
+      values: "Selected values",
+      defaultValue: "Default value",
+      defaultValues: "Default values",
+      inputValue: "Search query",
+      open: "Open",
+      isDisabled: "Disabled",
+      placeholder: "Placeholder",
+      searchable: "Allow search",
+      multiple: "Allow multiple selection",
+      clearable: "Show clear button",
+      autoHighlight: "Highlight first match",
+      openOnInputClick: "Open list on click",
+      inline: "Show options inline",
+      grid: "Show options in a grid",
+      columns: "Columns",
+      limit: "Max visible options",
       label: "Label",
-      description: "Helper text",
-      minDate: "Earliest date",
-      maxDate: "Latest date",
-      unavailableDates: "Unavailable dates",
-      unavailableFrom: "From",
-      unavailableTo: "To",
-      allowPastDates: "Allow past dates",
-      allowFutureDates: "Allow future dates",
       required: "Required",
       readOnly: "Read only",
-      disabled: "Disabled",
-      clearable: "Show clear button"
+      description: "Helper text",
+      triggerMode: {
+        displayName: "Apply filter",
+        options: {
+          onSelection: "On selection",
+          onApply: "On button click"
+        }
+      },
+      applyButtonLabel: "Apply button text"
     },
-    designStates: {
-      hover: "Hover",
-      focus: "Focus",
-      disabled: "Disabled",
-      selected: "Selected"
+    cssCustomProperties: {
+      width: "Width",
+      maxWidth: "Max width",
+      backgroundColor: "Background",
+      borderColor: "Border color",
+      borderWidth: "Border width",
+      paddingTop: "Padding top",
+      paddingBottom: "Padding bottom",
+      paddingInlineStart: "Padding start",
+      paddingInlineEnd: "Padding end",
+      gap: "Spacing",
+      boxShadow: "Shadow",
+      textAlign: "Value alignment",
+      font: "Value font",
+      textColor: "Value color",
+      labelFont: "Label font",
+      labelColor: "Label color",
+      helperFont: "Helper text font",
+      helperColor: "Helper text color",
+      optionTextColor: "Option text color",
+      optionHoverBackgroundColor: "Option hover background",
+      placeholderColor: "Placeholder color",
+      chipBackgroundColor: "Chip background",
+      chipTextColor: "Chip text color"
     },
     elements: {
       label: "Label",
-      description: "Helper text",
-      dateInput: "Date input",
-      calendarButton: "Calendar button",
-      popover: "Popover",
-      calendar: "Calendar",
-      calendarDay: "Calendar day",
-      today: "Today"
+      input: "Input",
+      trigger: "Button",
+      clearButton: "Clear button",
+      list: "List",
+      option: "Option",
+      chip: "Chip"
+    },
+    displayGroups: {
+      optionsGroup: "Manage options",
+      sizeGroup: "Size",
+      backgroundGroup: "Background",
+      cornersGroup: "Corner radius",
+      paddingGroup: "Padding"
     }
   }
 };
 const defaultValues = {
-  selectionMode: "single",
-  granularity: "day",
-  tooltip: "",
+  placeholder: "Select a value",
+  inputValue: "",
+  open: false,
+  isDisabled: false,
+  searchable: false,
+  multiple: false,
+  clearable: false,
+  autoHighlight: false,
+  openOnInputClick: true,
+  inline: false,
+  grid: false,
+  columns: 2,
+  limit: -1,
   label: "",
-  description: "",
-  allowPastDates: true,
-  allowFutureDates: true,
   required: false,
   readOnly: false,
-  disabled: false,
-  clearable: false
-};
-var SelectionModeValues = /* @__PURE__ */ ((SelectionModeValues2) => {
-  SelectionModeValues2["Single"] = "single";
-  SelectionModeValues2["Range"] = "range";
-  return SelectionModeValues2;
-})(SelectionModeValues || {});
-var GranularityValues = /* @__PURE__ */ ((GranularityValues2) => {
-  GranularityValues2["Day"] = "day";
-  GranularityValues2["Hour"] = "hour";
-  GranularityValues2["Minute"] = "minute";
-  return GranularityValues2;
-})(GranularityValues || {});
-const DesignStates = {
-  root: {
-    hover: {
-      displayName: DisplayNames.root.designStates.hover,
-      className: "datePicker--hover"
-    },
-    focus: {
-      displayName: DisplayNames.root.designStates.focus,
-      className: "datePicker--focus"
-    },
-    disabled: {
-      displayName: DisplayNames.root.designStates.disabled,
-      className: "datePicker--disabled"
-    }
-  },
-  dateInput: {
-    hover: {
-      displayName: DisplayNames.root.designStates.hover,
-      className: "datePicker__group--hover"
-    },
-    focus: {
-      displayName: DisplayNames.root.designStates.focus,
-      className: "datePicker__group--focus"
-    },
-    disabled: {
-      displayName: DisplayNames.root.designStates.disabled,
-      className: "datePicker__group--disabled"
-    }
-  },
-  calendarButton: {
-    hover: {
-      displayName: DisplayNames.root.designStates.hover,
-      className: "datePicker__calendar-button--hover"
-    },
-    selected: {
-      displayName: DisplayNames.root.designStates.selected,
-      className: "datePicker__calendar-button--selected"
-    }
-  },
-  calendarDay: {
-    hover: {
-      displayName: DisplayNames.root.designStates.hover,
-      className: "datePicker__day--hover"
-    },
-    selected: {
-      displayName: DisplayNames.root.designStates.selected,
-      className: "datePicker__day--selected"
-    },
-    disabled: {
-      displayName: DisplayNames.root.designStates.disabled,
-      className: "datePicker__day--disabled"
-    }
-  }
-};
-const PREVIEW_CALENDAR_OPEN = "previewCalendarOpen";
-const EMPTY_VALUE = "";
-const ARIA_LABEL_NAMESPACE = "ariaLabels";
-const AriaLabels = {
-  root: { key: "datePicker_aria_label", default: "Date picker" },
-  clear: { key: "datePicker_clear_button", default: "Clear" },
-  openCalendar: { key: "datePicker_open_calendar", default: "Open calendar" }
+  name: "",
+  description: "",
+  triggerMode: "onSelection",
+  applyButtonLabel: "Apply",
+  noResultsText: "No results"
 };
+var TriggerModeValues = /* @__PURE__ */ ((TriggerModeValues2) => {
+  TriggerModeValues2["OnSelection"] = "onSelection";
+  TriggerModeValues2["OnApply"] = "onApply";
+  return TriggerModeValues2;
+})(TriggerModeValues || {});
+const ALL_VALUE = "";
 const TestIds = {
-  root: "datepicker-root",
-  group: "datepicker-group",
-  field: "datepicker-field",
-  endField: "datepicker-end-field",
-  calendarButton: "datepicker-calendar-button",
-  clearButton: "datepicker-clear-button",
-  calendar: "datepicker-calendar",
-  tooltipButton: "datepicker-tooltip-button",
-  errorMessage: "datepicker-error-message",
-  requiredIndicator: "datepicker-required-indicator"
+  root: "dropdown-root",
+  label: "dropdown-label",
+  requiredIndicator: "dropdown-required-indicator",
+  trigger: "dropdown-trigger",
+  listbox: "dropdown-listbox",
+  clear: "dropdown-clear",
+  applyButton: "dropdown-apply-button",
+  description: "dropdown-description",
+  errorMessage: "dropdown-error-message"
 };
 const selectors = {
-  root: "datePicker",
-  label: "datePicker__label",
-  description: "datePicker__description",
-  requiredIndicator: "datePicker__required-indicator",
-  group: "datePicker__group",
-  calendarButton: "datePicker__calendar-button",
-  popover: "datePicker__popover",
-  calendar: "datePicker__calendar",
-  day: "datePicker__day",
-  errorMessage: "datePicker__error-message"
+  root: "dropdown",
+  label: "dropdown-label",
+  input: "dropdown-input",
+  trigger: "dropdown-trigger",
+  clear: "dropdown-clear",
+  list: "dropdown-list",
+  option: "dropdown-option",
+  chip: "dropdown-chip"
+};
+const semanticClassNames = {
+  root: "dropdown",
+  label: "dropdown__label",
+  requiredIndicator: "dropdown__required-indicator",
+  input: "dropdown__input",
+  trigger: "dropdown__trigger",
+  clear: "dropdown__clear",
+  listbox: "dropdown__listbox",
+  option: "dropdown__option",
+  chips: "dropdown__chips",
+  chip: "dropdown__chip",
+  applyButton: "dropdown__apply-button",
+  errorMessage: "dropdown__error-message"
+};
+const ARIA_LABEL_NAMESPACE = "ariaLabels";
+const AriaLabels = {
+  root: { key: "Dropdown_AriaLabel", default: "Dropdown" },
+  clear: { key: "Dropdown_AriaLabel_Clear", default: "Clear" },
+  removeItem: { key: "Dropdown_AriaLabel_RemoveItem", default: "Remove" }
 };
-const VALUE_MISSING_MESSAGE = "This field is required";
+const VALUE_MISSING_MESSAGE = "Please select an option.";
 export {
-  ARIA_LABEL_NAMESPACE as A,
+  ALL_VALUE as A,
   DesignStates as D,
-  EMPTY_VALUE as E,
-  GranularityValues as G,
-  PREVIEW_CALENDAR_OPEN as P,
-  SelectionModeValues as S,
+  FunctionalStateKeys as F,
   TestIds as T,
   VALUE_MISSING_MESSAGE as V,
-  AriaLabels as a,
-  DisplayNames as b,
+  semanticClassNames as a,
+  TriggerModeValues as b,
+  ARIA_LABEL_NAMESPACE as c,
   defaultValues as d,
+  AriaLabels as e,
+  DisplayNames as f,
   selectors as s
 };

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

@@ -1,69 +1,182 @@
-const manifestClasses = {
-  root: "collapsible-text",
-  text: "text",
-  expandControl: "expand-control"
-};
 const DisplayNames = {
   root: {
-    elementDisplayName: "Collapsible Text",
-    actions: {
-      settings: "Settings",
-      design: "Design"
-    },
+    elementDisplayName: "Date Picker",
     data: {
-      expandMode: {
-        displayName: "Choose what the button does",
+      value: "Selected date",
+      endValue: "Selected end date",
+      defaultValue: "Default date",
+      defaultEndValue: "Default end date",
+      onEndChange: "On End Change",
+      selectionMode: {
+        displayName: "Selection",
+        options: {
+          single: "Single date",
+          range: "Date range"
+        }
+      },
+      granularity: {
+        displayName: "Time precision",
         options: {
-          button: "Expands",
-          link: "Links"
+          day: "Date only",
+          hour: "Date and hour",
+          minute: "Date and time"
         }
       },
-      text: "Text",
-      readMoreText: "Expand button text",
-      readLessText: "Collapse button text",
-      linkText: "Link text"
+      tooltip: "Tooltip",
+      label: "Label",
+      description: "Helper text",
+      minDate: "Earliest date",
+      maxDate: "Latest date",
+      unavailableDates: "Unavailable dates",
+      unavailableFrom: "From",
+      unavailableTo: "To",
+      allowPastDates: "Allow past dates",
+      allowFutureDates: "Allow future dates",
+      required: "Required",
+      readOnly: "Read only",
+      disabled: "Disabled",
+      clearable: "Show clear button"
     },
-    elements: {
-      text: "Text",
-      button: "Button"
+    designStates: {
+      hover: "Hover",
+      focus: "Focus",
+      disabled: "Disabled",
+      selected: "Selected"
     },
-    cssCustomProperties: {
-      maxLines: "Lines displayed",
-      expandControlSpacing: "Space between text and button",
-      paragraphAlign: "Paragraph Alignment",
-      textColor: "Text color",
-      textFont: "Font",
-      textLineHeight: "Line spacing",
-      textTextDecoration: "Text Decoration",
-      textTextTransform: "Case"
+    elements: {
+      label: "Label",
+      description: "Helper text",
+      dateInput: "Date input",
+      calendarButton: "Calendar button",
+      popover: "Popover",
+      calendar: "Calendar",
+      calendarDay: "Calendar day",
+      today: "Today"
     }
   }
 };
 const defaultValues = {
-  expandMode: "button"
+  selectionMode: "single",
+  granularity: "day",
+  tooltip: "",
+  label: "",
+  description: "",
+  allowPastDates: true,
+  allowFutureDates: true,
+  required: false,
+  readOnly: false,
+  disabled: false,
+  clearable: false
+};
+var SelectionModeValues = /* @__PURE__ */ ((SelectionModeValues2) => {
+  SelectionModeValues2["Single"] = "single";
+  SelectionModeValues2["Range"] = "range";
+  return SelectionModeValues2;
+})(SelectionModeValues || {});
+var GranularityValues = /* @__PURE__ */ ((GranularityValues2) => {
+  GranularityValues2["Day"] = "day";
+  GranularityValues2["Hour"] = "hour";
+  GranularityValues2["Minute"] = "minute";
+  return GranularityValues2;
+})(GranularityValues || {});
+const DesignStates = {
+  root: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "datePicker--hover"
+    },
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "datePicker--focus"
+    },
+    disabled: {
+      displayName: DisplayNames.root.designStates.disabled,
+      className: "datePicker--disabled"
+    }
+  },
+  dateInput: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "datePicker__group--hover"
+    },
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "datePicker__group--focus"
+    },
+    disabled: {
+      displayName: DisplayNames.root.designStates.disabled,
+      className: "datePicker__group--disabled"
+    }
+  },
+  calendarButton: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "datePicker__calendar-button--hover"
+    },
+    selected: {
+      displayName: DisplayNames.root.designStates.selected,
+      className: "datePicker__calendar-button--selected"
+    }
+  },
+  calendarDay: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "datePicker__day--hover"
+    },
+    selected: {
+      displayName: DisplayNames.root.designStates.selected,
+      className: "datePicker__day--selected"
+    },
+    disabled: {
+      displayName: DisplayNames.root.designStates.disabled,
+      className: "datePicker__day--disabled"
+    }
+  }
+};
+const PREVIEW_CALENDAR_OPEN = "previewCalendarOpen";
+const EMPTY_VALUE = "";
+const ARIA_LABEL_NAMESPACE = "ariaLabels";
+const AriaLabels = {
+  root: { key: "datePicker_aria_label", default: "Date picker" },
+  clear: { key: "datePicker_clear_button", default: "Clear" },
+  openCalendar: { key: "datePicker_open_calendar", default: "Open calendar" }
 };
-var ExpandModeValues = /* @__PURE__ */ ((ExpandModeValues2) => {
-  ExpandModeValues2["Link"] = "link";
-  ExpandModeValues2["Expand"] = "button";
-  return ExpandModeValues2;
-})(ExpandModeValues || {});
 const TestIds = {
-  root: "collapsible-text-root",
-  textWrapper: "collapsible-text-text-wrapper"
+  root: "datepicker-root",
+  group: "datepicker-group",
+  field: "datepicker-field",
+  endField: "datepicker-end-field",
+  calendarButton: "datepicker-calendar-button",
+  clearButton: "datepicker-clear-button",
+  calendar: "datepicker-calendar",
+  tooltipButton: "datepicker-tooltip-button",
+  errorMessage: "datepicker-error-message",
+  requiredIndicator: "datepicker-required-indicator"
 };
-const FALLBACK_LINE_HEIGHT = 22.4;
-const LINE_HEIGHT_ROUNDING_ERROR_TOLERANCE = 1;
-const semanticClassNames = {
-  root: "collapsible-text",
-  text: "collapsible-text__text"
+const selectors = {
+  root: "datePicker",
+  label: "datePicker__label",
+  description: "datePicker__description",
+  requiredIndicator: "datePicker__required-indicator",
+  group: "datePicker__group",
+  calendarButton: "datePicker__calendar-button",
+  popover: "datePicker__popover",
+  calendar: "datePicker__calendar",
+  day: "datePicker__day",
+  errorMessage: "datePicker__error-message"
 };
+const VALUE_MISSING_MESSAGE = "This field is required";
 export {
-  DisplayNames as D,
-  ExpandModeValues as E,
-  FALLBACK_LINE_HEIGHT as F,
-  LINE_HEIGHT_ROUNDING_ERROR_TOLERANCE as L,
+  ARIA_LABEL_NAMESPACE as A,
+  DesignStates as D,
+  EMPTY_VALUE as E,
+  GranularityValues as G,
+  PREVIEW_CALENDAR_OPEN as P,
+  SelectionModeValues as S,
   TestIds as T,
+  VALUE_MISSING_MESSAGE as V,
+  AriaLabels as a,
+  DisplayNames as b,
   defaultValues as d,
-  manifestClasses as m,
-  semanticClassNames as s
+  selectors as s
 };