Add min/max count support for select elements

CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [8.14.4]
+
+### Fixed
+
+- Multiselect field now correctly enforces the maximum number of selectable items on the frontend.
+- Project settings are now passed to `outputCssVariablesInline` so inline CSS variables are output correctly.
+
 ## [8.14.3]
 
 ### Fixed

eightshift-forms.php

@@ -6,7 +6,7 @@
  * Description: Eightshift Forms is a complete form builder plugin that utilizes modern Block editor features with multiple third-party integrations, bringing your project to a new level.
  * Author: WordPress team @Infinum
  * Author URI: https://eightshift.com/
- * Version: 8.14.3
+ * Version: 8.14.4
  * Text Domain: eightshift-forms
  *
  * @package EightshiftForms

src/Blocks/components/form/assets/form.js

@@ -1324,6 +1324,7 @@ export class Form {
 			let input = this.state.getStateElementInput(name, formId);
 			const typeInternal = this.state.getStateElementTypeField(name, formId);
 			const labels = this.state.getStateSettingsLabels();
+			const maxCount = this.state.getStateElementConfig(name, StateEnum.CONFIG_SELECT_MAX_COUNT, formId);
 
 			if (typeInternal === 'phone') {
 				input = this.state.getStateElementInputSelect(name, formId);
@@ -1346,6 +1347,7 @@ export class Form {
 				searchResultLimit: 50,
 				removeItemButton: typeInternal !== 'phone', // Phone should not be able to remove prefix!
 				duplicateItemsAllowed: false,
+				...(maxCount > 0 && { maxItemCount: maxCount }),
 				searchFields: [
 					'label',
 					'value',

src/Blocks/components/form/assets/state-init.js

@@ -79,6 +79,8 @@ export const StateEnum = {
 	CONFIG: 'config',
 	CONFIG_SELECT_USE_SEARCH: 'useSearch',
 	CONFIG_SELECT_USE_MULTIPLE: 'useMultiple',
+	CONFIG_SELECT_MIN_COUNT: 'minCount',
+	CONFIG_SELECT_MAX_COUNT: 'maxCount',
 	CONFIG_PHONE_DISABLE_PICKER: 'disablePhoneCountryPicker',
 	CONFIG_USE_SINGLE_SUBMIT: 'useSingleSubmit',
 
@@ -413,6 +415,18 @@ export function setStateFormInitial(formId) {
 				setState([StateEnum.ELEMENTS, name, StateEnum.INPUT], item, formId);
 				setState([StateEnum.ELEMENTS, name, StateEnum.CONFIG, StateEnum.CONFIG_SELECT_USE_SEARCH], Boolean(item.getAttribute(getStateAttribute('selectAllowSearch'))), formId);
 				setState([StateEnum.ELEMENTS, name, StateEnum.CONFIG, StateEnum.CONFIG_SELECT_USE_MULTIPLE], Boolean(item.getAttribute(getStateAttribute('selectIsMultiple'))), formId);
+
+				const selectMinCount = parseInt(item.getAttribute(getStateAttribute('selectMinCount')), 10);
+				const selectMaxCount = parseInt(item.getAttribute(getStateAttribute('selectMaxCount')), 10);
+
+				if (selectMinCount > 0) {
+					setState([StateEnum.ELEMENTS, name, StateEnum.CONFIG, StateEnum.CONFIG_SELECT_MIN_COUNT], selectMinCount, formId);
+				}
+
+				if (selectMaxCount > 0) {
+					setState([StateEnum.ELEMENTS, name, StateEnum.CONFIG, StateEnum.CONFIG_SELECT_MAX_COUNT], selectMaxCount, formId);
+				}
+
 				setState([StateEnum.ELEMENTS, name, StateEnum.TRACKING], field.getAttribute(getStateAttribute('tracking')), formId);
 				break;
 			case 'tel':

src/Blocks/components/select/select.php

@@ -31,6 +31,8 @@
 $selectFieldAttrs = Helpers::checkAttr('selectFieldAttrs', $attributes, $manifest);
 $selectUseLabelAsPlaceholder = Helpers::checkAttr('selectUseLabelAsPlaceholder', $attributes, $manifest);
 $selectIsMultiple = Helpers::checkAttr('selectIsMultiple', $attributes, $manifest);
+$selectMinCount = Helpers::checkAttr('selectMinCount', $attributes, $manifest);
+$selectMaxCount = Helpers::checkAttr('selectMaxCount', $attributes, $manifest);
 $selectTwSelectorsData = Helpers::checkAttr('selectTwSelectorsData', $attributes, $manifest);
 
 $selectId = $selectName . '-' . Helpers::getUnique();
@@ -52,6 +54,14 @@
 if ($selectIsMultiple) {
 	$selectAttrs[UtilsHelper::getStateAttribute('selectIsMultiple')] = esc_attr($selectIsMultiple);
 	$selectAttrs['multiple'] = 'true';
+
+	if ($selectMinCount) {
+		$selectAttrs[UtilsHelper::getStateAttribute('selectMinCount')] = esc_attr($selectMinCount);
+	}
+
+	if ($selectMaxCount) {
+		$selectAttrs[UtilsHelper::getStateAttribute('selectMaxCount')] = esc_attr($selectMaxCount);
+	}
 }
 
 $placeholderLabel = '';

src/Blocks/manifest.json

@@ -616,6 +616,8 @@
 
 			"selectAllowSearch": "data-allow-search",
 			"selectIsMultiple": "data-is-multiple",
+			"selectMinCount": "data-min-count",
+			"selectMaxCount": "data-max-count",
 			"selectPlaceholder": "data-placeholder",
 			"selectCustomProperties": "data-custom-properties",
 			"selectOptionIsHidden": "data-option-is-hidden",