@automattic/vip-design-system 0.27.6 → 0.27.8

package/build/system/Form/Input.js

@@ -44,7 +44,8 @@ var inputStyles = {
     bg: 'backgroundSecondary'
   },
   '&::placeholder': {
-    color: 'placeholder'
+    color: 'placeholder',
+    opacity: 1
   }
 };
 

package/build/system/NewForm/FormAutocomplete.js

@@ -33,7 +33,7 @@ var _FormSelectLoading = require("./FormSelectLoading");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange", "onInputChange", "value", "showAllValues", "searchIcon", "minLength", "debounce", "loading", "required", "displayMenu", "noOptionsMessage", "id", "className"];
+var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "forLabel", "getOptionLabel", "getOptionValue", "id", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "value"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -134,35 +134,37 @@ var searchIconStyles = {
 };
 
 var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
-  var isInline = _ref.isInline,
+  var _ref$autoFilter = _ref.autoFilter,
+      autoFilter = _ref$autoFilter === void 0 ? true : _ref$autoFilter,
+      className = _ref.className,
+      _ref$debounce = _ref.debounce,
+      debounce = _ref$debounce === void 0 ? 0 : _ref$debounce,
+      _ref$displayMenu = _ref.displayMenu,
+      displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       forLabel = _ref.forLabel,
-      _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
-      label = _ref.label,
       getOptionLabel = _ref.getOptionLabel,
       getOptionValue = _ref.getOptionValue,
-      _ref$onChange = _ref.onChange,
-      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
-      onInputChange = _ref.onInputChange,
-      value = _ref.value,
-      _ref$showAllValues = _ref.showAllValues,
-      showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
-      searchIcon = _ref.searchIcon,
+      _ref$id = _ref.id,
+      id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
+      isInline = _ref.isInline,
+      label = _ref.label,
+      loading = _ref.loading,
       _ref$minLength = _ref.minLength,
       minLength = _ref$minLength === void 0 ? 0 : _ref$minLength,
-      _ref$debounce = _ref.debounce,
-      debounce = _ref$debounce === void 0 ? 0 : _ref$debounce,
-      loading = _ref.loading,
-      required = _ref.required,
-      _ref$displayMenu = _ref.displayMenu,
-      displayMenu = _ref$displayMenu === void 0 ? 'overlay' : _ref$displayMenu,
       _ref$noOptionsMessage = _ref.noOptionsMessage,
       noOptionsMessage = _ref$noOptionsMessage === void 0 ? function () {
     return 'No results found.';
   } : _ref$noOptionsMessage,
-      _ref$id = _ref.id,
-      id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
-      className = _ref.className,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      onInputChange = _ref.onInputChange,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? [] : _ref$options,
+      required = _ref.required,
+      searchIcon = _ref.searchIcon,
+      _ref$showAllValues = _ref.showAllValues,
+      showAllValues = _ref$showAllValues === void 0 ? true : _ref$showAllValues,
+      value = _ref.value,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -210,6 +212,10 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     });
   }, [options]);
   var handleInputChange = (0, _react.useCallback)(function (query) {
+    if (!debounce) {
+      return onInputChange(query);
+    }
+
     clearTimeout(debounceTimeout);
 
     if (!query.length || query.length >= minLength) {
@@ -223,8 +229,8 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       handleInputChange(query);
     }
 
-    var data = handleTypeChange(query);
-    populateResults(data.map(function (option) {
+    var data = autoFilter ? handleTypeChange(query) : options;
+    populateResults(data == null ? void 0 : data.map(function (option) {
       return optionLabel(option);
     }));
   }, [options, isDirty]);
@@ -264,24 +270,25 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
 
 exports.FormAutocomplete = FormAutocomplete;
 FormAutocomplete.propTypes = {
-  id: _propTypes["default"].string,
-  showAllValues: _propTypes["default"].bool,
-  searchIcon: _propTypes["default"].bool,
-  loading: _propTypes["default"].bool,
-  required: _propTypes["default"].bool,
-  isInline: _propTypes["default"].bool,
-  forLabel: _propTypes["default"].string,
-  value: _propTypes["default"].string,
+  autoFilter: _propTypes["default"].bool,
+  className: _propTypes["default"].any,
+  debounce: _propTypes["default"].number,
   displayMenu: _propTypes["default"].string,
-  label: _propTypes["default"].string,
-  options: _propTypes["default"].array,
+  forLabel: _propTypes["default"].string,
   getOptionLabel: _propTypes["default"].func,
   getOptionValue: _propTypes["default"].func,
-  onInputChange: _propTypes["default"].func,
+  id: _propTypes["default"].string,
+  isInline: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  loading: _propTypes["default"].bool,
+  minLength: _propTypes["default"].number,
   noOptionsMessage: _propTypes["default"].func,
   onChange: _propTypes["default"].func,
-  className: _propTypes["default"].any,
-  minLength: _propTypes["default"].number,
-  debounce: _propTypes["default"].number
+  onInputChange: _propTypes["default"].func,
+  options: _propTypes["default"].array,
+  required: _propTypes["default"].bool,
+  searchIcon: _propTypes["default"].bool,
+  showAllValues: _propTypes["default"].bool,
+  value: _propTypes["default"].string
 };
 FormAutocomplete.displayName = 'FormAutocomplete';

package/build/system/theme/generated/valet-theme.json

@@ -96,7 +96,7 @@
     "placeholder": {
       "type": "color",
       "description": "Use for placeholder text in fields",
-      "value": "#8f8c8b"
+      "value": "#757575"
     },
     "disabled": {
       "type": "color",
@@ -149,7 +149,7 @@
     },
     "disabled": {
       "type": "color",
-      "value": "#8f8c8b"
+      "value": "#757575"
     }
   },
   "button": {
@@ -1476,7 +1476,7 @@
         "type": "color"
       },
       "45": {
-        "value": "#8f8c8b",
+        "value": "#757575",
         "type": "color"
       },
       "50": {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.27.6",
+	"version": "0.27.8",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",

package/src/system/Form/Input.js

@@ -33,6 +33,7 @@ const inputStyles = {
 	},
 	'&::placeholder': {
 		color: 'placeholder',
+		opacity: 1,
 	},
 };
 

package/src/system/NewForm/FormAutocomplete.js

@@ -95,25 +95,26 @@ const searchIconStyles = {
 const FormAutocomplete = React.forwardRef(
 	(
 		{
-			isInline,
+			autoFilter = true,
+			className,
+			debounce = 0,
+			displayMenu = 'overlay',
 			forLabel,
-			options = [],
-			label,
 			getOptionLabel,
 			getOptionValue,
+			id = 'vip-autocomplete',
+			isInline,
+			label,
+			loading,
+			minLength = 0,
+			noOptionsMessage = () => 'No results found.',
 			onChange = () => {},
 			onInputChange,
-			value,
-			showAllValues = true,
-			searchIcon,
-			minLength = 0,
-			debounce = 0,
-			loading,
+			options = [],
 			required,
-			displayMenu = 'overlay',
-			noOptionsMessage = () => 'No results found.',
-			id = 'vip-autocomplete',
-			className,
+			searchIcon,
+			showAllValues = true,
+			value,
 			...props
 		},
 		forwardRef
@@ -168,6 +169,9 @@ const FormAutocomplete = React.forwardRef(
 
 		const handleInputChange = useCallback(
 			query => {
+				if ( ! debounce ) {
+					return onInputChange( query );
+				}
 				clearTimeout( debounceTimeout );
 				if ( ! query.length || query.length >= minLength ) {
 					debounceTimeout = setTimeout( () => {
@@ -183,8 +187,8 @@ const FormAutocomplete = React.forwardRef(
 				if ( isDirty && onInputChange ) {
 					handleInputChange( query );
 				}
-				const data = handleTypeChange( query );
-				populateResults( data.map( option => optionLabel( option ) ) );
+				const data = autoFilter ? handleTypeChange( query ) : options;
+				populateResults( data?.map( option => optionLabel( option ) ) );
 			},
 			[ options, isDirty ]
 		);
@@ -245,25 +249,26 @@ const FormAutocomplete = React.forwardRef(
 );
 
 FormAutocomplete.propTypes = {
-	id: PropTypes.string,
-	showAllValues: PropTypes.bool,
-	searchIcon: PropTypes.bool,
-	loading: PropTypes.bool,
-	required: PropTypes.bool,
-	isInline: PropTypes.bool,
-	forLabel: PropTypes.string,
-	value: PropTypes.string,
+	autoFilter: PropTypes.bool,
+	className: PropTypes.any,
+	debounce: PropTypes.number,
 	displayMenu: PropTypes.string,
-	label: PropTypes.string,
-	options: PropTypes.array,
+	forLabel: PropTypes.string,
 	getOptionLabel: PropTypes.func,
 	getOptionValue: PropTypes.func,
-	onInputChange: PropTypes.func,
+	id: PropTypes.string,
+	isInline: PropTypes.bool,
+	label: PropTypes.string,
+	loading: PropTypes.bool,
+	minLength: PropTypes.number,
 	noOptionsMessage: PropTypes.func,
 	onChange: PropTypes.func,
-	className: PropTypes.any,
-	minLength: PropTypes.number,
-	debounce: PropTypes.number,
+	onInputChange: PropTypes.func,
+	options: PropTypes.array,
+	required: PropTypes.bool,
+	searchIcon: PropTypes.bool,
+	showAllValues: PropTypes.bool,
+	value: PropTypes.string,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

package/src/system/theme/generated/valet-theme.json

@@ -96,7 +96,7 @@
     "placeholder": {
       "type": "color",
       "description": "Use for placeholder text in fields",
-      "value": "#8f8c8b"
+      "value": "#757575"
     },
     "disabled": {
       "type": "color",
@@ -149,7 +149,7 @@
     },
     "disabled": {
       "type": "color",
-      "value": "#8f8c8b"
+      "value": "#757575"
     }
   },
   "button": {
@@ -1476,7 +1476,7 @@
         "type": "color"
       },
       "45": {
-        "value": "#8f8c8b",
+        "value": "#757575",
         "type": "color"
       },
       "50": {