@automattic/vip-design-system 2.15.4 → 2.15.6

package/build/system/NewForm/FormAutocomplete.js

@@ -85,6 +85,12 @@ const inlineStyles = {
 	borderWidth: 0,
 };
 
+const allowCustomStyles = {
+	'& .autocomplete__option--no-results': {
+		cursor: 'pointer',
+	},
+};
+
 const searchIconStyles = {
 	'& .autocomplete__input.autocomplete__input': {
 		paddingLeft: 6,
@@ -120,6 +126,7 @@ const FormAutocomplete = React.forwardRef(
 			resetOnBlur = false, // resets the input value to the selection if the input is blurred. Returns null if selection is empty
 			source,
 			value,
+			allowCustom = false,
 			...props
 		},
 		forwardRef
@@ -199,9 +206,13 @@ const FormAutocomplete = React.forwardRef(
 
 		const handleTypeChange = useCallback(
 			query => {
-				return options.filter(
+				const filteredOptions = options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
 				);
+				if ( allowCustom && filteredOptions.length === 0 ) {
+					return [ { label: query, value: query } ];
+				}
+				return filteredOptions;
 			},
 			[ options ]
 		);
@@ -319,6 +330,7 @@ const FormAutocomplete = React.forwardRef(
 						...defaultStyles,
 						...( isInline && inlineStyles ),
 						...( searchIcon && searchIconStyles ),
+						...( allowCustom && allowCustomStyles ),
 						...( hasError ? { borderColor: 'input.border.error' } : {} ),
 					} }
 				>
@@ -382,6 +394,7 @@ FormAutocomplete.propTypes = {
 	source: PropTypes.func,
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
+	allowCustom: PropTypes.bool,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

package/build/system/NewForm/FormAutocomplete.stories.d.ts

@@ -58,42 +58,51 @@ export function Default({ label, width, ...rest }: {
 export namespace Default {
     export { args };
 }
-export function Inline({ label, width, ...rest }: {
+export function WithAllowCustom({ label, width, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
 }): import("react").JSX.Element;
-export namespace Inline {
+export namespace WithAllowCustom {
     let args_1: any;
     export { args_1 as args };
 }
-export function WithDefaultValue({ label, width, ...rest }: {
+export function Inline({ label, width, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
 }): import("react").JSX.Element;
-export namespace WithDefaultValue {
+export namespace Inline {
     let args_2: any;
     export { args_2 as args };
 }
-export function WithSearchIcon({ label, width, ...rest }: {
+export function WithDefaultValue({ label, width, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
 }): import("react").JSX.Element;
-export namespace WithSearchIcon {
+export namespace WithDefaultValue {
     let args_3: any;
     export { args_3 as args };
 }
-export function WithLoading({ label, width, ...rest }: {
+export function WithSearchIcon({ label, width, ...rest }: {
     [x: string]: any;
     label?: string | undefined;
     width?: number | undefined;
 }): import("react").JSX.Element;
-export namespace WithLoading {
+export namespace WithSearchIcon {
     let args_4: any;
     export { args_4 as args };
 }
+export function WithLoading({ label, width, ...rest }: {
+    [x: string]: any;
+    label?: string | undefined;
+    width?: number | undefined;
+}): import("react").JSX.Element;
+export namespace WithLoading {
+    let args_5: any;
+    export { args_5 as args };
+}
 export function WithDebounce(): import("react").JSX.Element;
 export function WithSlowSearchAndDebounce({ label, width, ...rest }: {
     [x: string]: any;
@@ -101,8 +110,8 @@ export function WithSlowSearchAndDebounce({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithSlowSearchAndDebounce {
-    let args_5: any;
-    export { args_5 as args };
+    let args_6: any;
+    export { args_6 as args };
 }
 export function WithCustomMessages({ label, width, ...rest }: {
     [x: string]: any;
@@ -110,8 +119,8 @@ export function WithCustomMessages({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithCustomMessages {
-    let args_6: any;
-    export { args_6 as args };
+    let args_7: any;
+    export { args_7 as args };
 }
 export function WithErrors({ label, width, ...rest }: {
     [x: string]: any;
@@ -119,8 +128,8 @@ export function WithErrors({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithErrors {
-    let args_7: any;
-    export { args_7 as args };
+    let args_8: any;
+    export { args_8 as args };
 }
 export function WithArrow({ label, width, ...rest }: {
     [x: string]: any;
@@ -128,8 +137,8 @@ export function WithArrow({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithArrow {
-    let args_8: any;
-    export { args_8 as args };
+    let args_9: any;
+    export { args_9 as args };
 }
 export function WithCustomArrow({ label, width, ...rest }: {
     [x: string]: any;
@@ -137,8 +146,8 @@ export function WithCustomArrow({ label, width, ...rest }: {
     width?: number | undefined;
 }): import("react").JSX.Element;
 export namespace WithCustomArrow {
-    let args_9: any;
-    export { args_9 as args };
+    let args_10: any;
+    export { args_10 as args };
     export let displayName: string;
 }
 declare namespace args {

package/build/system/NewForm/FormAutocomplete.stories.jsx

@@ -67,6 +67,12 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => {
 export const Default = DefaultComponent.bind( {} );
 Default.args = args;
 
+export const WithAllowCustom = DefaultComponent.bind( {} );
+WithAllowCustom.args = {
+	...Default.args,
+	allowCustom: true,
+};
+
 export const Inline = DefaultComponent.bind( {} );
 Inline.args = {
 	...Default.args,

package/build/system/NewForm/FormAutocompleteMultiselect.js

@@ -155,6 +155,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			value,
 			listType = 'button',
 			initialValue = [],
+			allowCustom = false,
 			...props
 		},
 		forwardRef
@@ -245,11 +246,16 @@ const FormAutocompleteMultiselect = React.forwardRef(
 		);
 
 		const handleTypeChange = useCallback(
-			query =>
-				options.filter(
+			query => {
+				const filteredOptions = options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-				),
-			[ options ]
+				);
+				if ( allowCustom && filteredOptions.length === 0 ) {
+					return [ { label: query, value: query } ];
+				}
+				return filteredOptions;
+			},
+			[ options, allowCustom ]
 		);
 
 		const handleInputChange = useCallback(
@@ -384,7 +390,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 						</Validation>
 					) }
 					<div sx={ { fontSize: 1 } }>
-						{ selectedOptions.length } item{ selectedOptions.length > 1 ? 's' : '' } selected
+						{ selectedOptions.length } item{ selectedOptions.length === 1 ? '' : 's' } selected
 					</div>
 				</Flex>
 				<div sx={ { display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%' } }>
@@ -428,6 +434,7 @@ FormAutocompleteMultiselect.propTypes = {
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
 	initialValue: PropTypes.array,
+	allowCustom: PropTypes.bool,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

package/build/system/NewForm/FormAutocompleteMultiselect.stories.d.ts

@@ -29,6 +29,7 @@ declare namespace _default {
 }
 export default _default;
 export function Default(): import("react").JSX.Element;
+export function WithAllowCustom(): import("react").JSX.Element;
 export function WithBadges(): import("react").JSX.Element;
 export function WithInitialValueBadges(): import("react").JSX.Element;
 export function Inline(): import("react").JSX.Element;

package/build/system/NewForm/FormAutocompleteMultiselect.stories.jsx

@@ -86,6 +86,15 @@ export const Default = () => {
 	);
 };
 
+export const WithAllowCustom = () => {
+	const customArgs = {
+		...args,
+		allowCustom: true,
+	};
+
+	return <DefaultComponent { ...customArgs } />;
+};
+
 export const WithBadges = () => {
 	const customArgs = {
 		...args,

package/build/system/NewForm/FormSelectSearch.js

@@ -6,16 +6,23 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
  */
 import React from 'react';
 import { MdSearch } from 'react-icons/md';
+/**
+ * Internal dependencies
+ */
+import { Box } from '../Box';
 import { jsx as _jsx } from "theme-ui/jsx-runtime";
-var searchStyles = {
+var wrapperStyles = {
   position: 'absolute',
+  left: 3
+};
+var searchStyles = {
   pr: 2,
-  left: 3,
   pointerEvents: 'none'
 };
 export var FormSelectSearch = /*#__PURE__*/React.forwardRef(function (props, forwardRef) {
-  return _jsx("div", {
+  return _jsx(Box, {
     ref: forwardRef,
+    sx: wrapperStyles,
     children: _jsx(MdSearch, _extends({
       "aria-hidden": "true",
       size: 24,

package/package.json

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

package/src/system/NewForm/FormAutocomplete.js

@@ -85,6 +85,12 @@ const inlineStyles = {
 	borderWidth: 0,
 };
 
+const allowCustomStyles = {
+	'& .autocomplete__option--no-results': {
+		cursor: 'pointer',
+	},
+};
+
 const searchIconStyles = {
 	'& .autocomplete__input.autocomplete__input': {
 		paddingLeft: 6,
@@ -120,6 +126,7 @@ const FormAutocomplete = React.forwardRef(
 			resetOnBlur = false, // resets the input value to the selection if the input is blurred. Returns null if selection is empty
 			source,
 			value,
+			allowCustom = false,
 			...props
 		},
 		forwardRef
@@ -199,9 +206,13 @@ const FormAutocomplete = React.forwardRef(
 
 		const handleTypeChange = useCallback(
 			query => {
-				return options.filter(
+				const filteredOptions = options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
 				);
+				if ( allowCustom && filteredOptions.length === 0 ) {
+					return [ { label: query, value: query } ];
+				}
+				return filteredOptions;
 			},
 			[ options ]
 		);
@@ -319,6 +330,7 @@ const FormAutocomplete = React.forwardRef(
 						...defaultStyles,
 						...( isInline && inlineStyles ),
 						...( searchIcon && searchIconStyles ),
+						...( allowCustom && allowCustomStyles ),
 						...( hasError ? { borderColor: 'input.border.error' } : {} ),
 					} }
 				>
@@ -382,6 +394,7 @@ FormAutocomplete.propTypes = {
 	source: PropTypes.func,
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
+	allowCustom: PropTypes.bool,
 };
 
 FormAutocomplete.displayName = 'FormAutocomplete';

package/src/system/NewForm/FormAutocomplete.stories.jsx

@@ -67,6 +67,12 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => {
 export const Default = DefaultComponent.bind( {} );
 Default.args = args;
 
+export const WithAllowCustom = DefaultComponent.bind( {} );
+WithAllowCustom.args = {
+	...Default.args,
+	allowCustom: true,
+};
+
 export const Inline = DefaultComponent.bind( {} );
 Inline.args = {
 	...Default.args,

package/src/system/NewForm/FormAutocompleteMultiselect.js

@@ -155,6 +155,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			value,
 			listType = 'button',
 			initialValue = [],
+			allowCustom = false,
 			...props
 		},
 		forwardRef
@@ -245,11 +246,16 @@ const FormAutocompleteMultiselect = React.forwardRef(
 		);
 
 		const handleTypeChange = useCallback(
-			query =>
-				options.filter(
+			query => {
+				const filteredOptions = options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-				),
-			[ options ]
+				);
+				if ( allowCustom && filteredOptions.length === 0 ) {
+					return [ { label: query, value: query } ];
+				}
+				return filteredOptions;
+			},
+			[ options, allowCustom ]
 		);
 
 		const handleInputChange = useCallback(
@@ -384,7 +390,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 						</Validation>
 					) }
 					<div sx={ { fontSize: 1 } }>
-						{ selectedOptions.length } item{ selectedOptions.length > 1 ? 's' : '' } selected
+						{ selectedOptions.length } item{ selectedOptions.length === 1 ? '' : 's' } selected
 					</div>
 				</Flex>
 				<div sx={ { display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%' } }>
@@ -428,6 +434,7 @@ FormAutocompleteMultiselect.propTypes = {
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
 	initialValue: PropTypes.array,
+	allowCustom: PropTypes.bool,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

package/src/system/NewForm/FormAutocompleteMultiselect.stories.jsx

@@ -86,6 +86,15 @@ export const Default = () => {
 	);
 };
 
+export const WithAllowCustom = () => {
+	const customArgs = {
+		...args,
+		allowCustom: true,
+	};
+
+	return <DefaultComponent { ...customArgs } />;
+};
+
 export const WithBadges = () => {
 	const customArgs = {
 		...args,

package/src/system/NewForm/FormSelectSearch.tsx

@@ -7,22 +7,30 @@ import React from 'react';
 import { MdSearch } from 'react-icons/md';
 import { ThemeUIStyleObject } from 'theme-ui';
 
+/**
+ * Internal dependencies
+ */
+import { Box } from '../Box';
+
 interface FormSelectSearchProps {
 	sx?: ThemeUIStyleObject;
 }
 
-const searchStyles: ThemeUIStyleObject = {
+const wrapperStyles: ThemeUIStyleObject = {
 	position: 'absolute',
-	pr: 2,
 	left: 3,
+};
+
+const searchStyles: ThemeUIStyleObject = {
+	pr: 2,
 	pointerEvents: 'none',
 };
 
 export const FormSelectSearch = React.forwardRef< SVGSVGElement, FormSelectSearchProps >(
 	( props, forwardRef ) => (
-		<div ref={ forwardRef as React.RefObject< HTMLDivElement > }>
+		<Box ref={ forwardRef as React.RefObject< HTMLDivElement > } sx={ wrapperStyles }>
 			<MdSearch aria-hidden="true" size={ 24 } sx={ searchStyles } { ...props } />
-		</div>
+		</Box>
 	)
 );