@automattic/vip-design-system 2.15.2 → 2.15.4

package/build/system/NewForm/FormAutocompleteMultiselect.js

@@ -7,16 +7,17 @@ import Autocomplete from 'accessible-autocomplete/react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { MdClose } from 'react-icons/md';
 
 /**
  * Internal dependencies
  */
+import { FormAutocompleteMultiselectBadge } from './FormAutocompleteMultiselectBadge';
+import { FormAutocompleteMultiselectButton } from './FormAutocompleteMultiselectButton';
 import { FormSelectArrow } from './FormSelectArrow';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectLoading } from './FormSelectLoading';
 import { FormSelectSearch } from './FormSelectSearch';
-import { Button, Flex } from '../';
+import { Flex } from '../';
 import { Validation } from '../Form';
 import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Label } from '../Form/Label';
@@ -126,42 +127,6 @@ AddSelectionStatus.propTypes = {
 	status: PropTypes.string.isRequired,
 };
 
-const SelectedOptions = ( { index, option, unselectValue } ) => {
-	return (
-		<div key={ index } sx={ { mr: 1, maxWidth: '100%' } }>
-			<Button
-				variant="tertiary"
-				onClick={ e => {
-					e.preventDefault();
-					unselectValue( option, index );
-				} }
-				sx={ {
-					mt: 1,
-					fontSize: 1,
-					maxWidth: '100%',
-				} }
-			>
-				<div
-					sx={ {
-						overflow: 'hidden',
-						textOverflow: 'ellipsis',
-						whiteSpace: 'nowrap',
-					} }
-				>
-					{ option }
-				</div>
-				<MdClose sx={ { ml: 2 } } />
-			</Button>
-		</div>
-	);
-};
-
-SelectedOptions.propTypes = {
-	index: PropTypes.number.isRequired,
-	option: PropTypes.string.isRequired,
-	unselectValue: PropTypes.func.isRequired,
-};
-
 const FormAutocompleteMultiselect = React.forwardRef(
 	(
 		{
@@ -188,6 +153,8 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			showAllValues = false,
 			source,
 			value,
+			listType = 'button',
+			initialValue = [],
 			...props
 		},
 		forwardRef
@@ -197,8 +164,10 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			REMOVE: 'remove',
 			NONE: 'none',
 		};
+		const ListComponent =
+			listType === 'button' ? FormAutocompleteMultiselectButton : FormAutocompleteMultiselectBadge;
 		const [ isDirty, setIsDirty ] = useState( false );
-		const [ selectedOptions, setSelectedOptions ] = useState( [] );
+		const [ selectedOptions, setSelectedOptions ] = useState( initialValue );
 		const [ addStatus, setAddStatus ] = useState( '' );
 		const [ currentOption, setCurrentOption ] = useState( {
 			action: OPTION_ACTION.NONE,
@@ -367,10 +336,10 @@ const FormAutocompleteMultiselect = React.forwardRef(
 				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
 			} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
 				// Move focus to the first selected item, if the last element is removed and there are other elements in the list
-				global.document.querySelector( '.vip-button-component' ).focus();
+				global.document.querySelector( '.vip-button-component' )?.focus();
 			} else if ( selectedOptions.length === 0 ) {
 				// Move focus to the input field if the last element is removed and there are no other elements in the list
-				global.document.querySelector( '.autocomplete__input' ).focus();
+				global.document.querySelector( '.autocomplete__input' )?.focus();
 			}
 		}, [ currentOption ] );
 
@@ -421,7 +390,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 				<div sx={ { display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%' } }>
 					{ selectedOptions &&
 						selectedOptions.map( ( option, idx ) => (
-							<SelectedOptions
+							<ListComponent
 								key={ idx }
 								index={ idx }
 								option={ option }
@@ -458,6 +427,7 @@ FormAutocompleteMultiselect.propTypes = {
 	source: PropTypes.func,
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
+	initialValue: PropTypes.array,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

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

@@ -29,6 +29,8 @@ declare namespace _default {
 }
 export default _default;
 export function Default(): 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;
 export namespace Inline {
     let displayName: string;

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

@@ -86,6 +86,32 @@ export const Default = () => {
 	);
 };
 
+export const WithBadges = () => {
+	const customArgs = {
+		...args,
+		listType: 'badge',
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
+export const WithInitialValueBadges = () => {
+	const customArgs = {
+		...args,
+		initialValue: shortOptions.slice( 0, 2 ).map( option => option.label ),
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
 export const Inline = () => {
 	const customArgs = {
 		isInline: true,

package/build/system/NewForm/FormAutocompleteMultiselectBadge.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+declare const FormAutocompleteMultiselectBadge: ({ index, option, unselectValue, }: {
+    index: number;
+    option: string;
+    unselectValue: (option: string, index: number) => void;
+}) => import("react").JSX.Element;
+export { FormAutocompleteMultiselectBadge };

package/build/system/NewForm/FormAutocompleteMultiselectBadge.js

@@ -0,0 +1,49 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { MdClose } from 'react-icons/md';
+import { Badge } from '..';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+var FormAutocompleteMultiselectBadge = function FormAutocompleteMultiselectBadge(_ref) {
+  var index = _ref.index,
+    option = _ref.option,
+    unselectValue = _ref.unselectValue;
+  return _jsx("div", {
+    sx: {
+      mr: 1,
+      maxWidth: '100%'
+    },
+    children: _jsxs(Badge, {
+      variant: "gray",
+      sx: {
+        mt: 1,
+        fontSize: 1,
+        maxWidth: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+      children: [_jsx("div", {
+        sx: {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        },
+        children: option
+      }), _jsx(MdClose, {
+        sx: {
+          ml: 2,
+          cursor: 'pointer'
+        },
+        onClick: function onClick(e) {
+          e.preventDefault();
+          unselectValue(option, index);
+        }
+      })]
+    })
+  }, index);
+};
+export { FormAutocompleteMultiselectBadge };

package/build/system/NewForm/FormAutocompleteMultiselectButton.d.ts

@@ -0,0 +1,8 @@
+/** @jsxImportSource theme-ui */
+/// <reference types="react" />
+declare const FormAutocompleteMultiselectButton: ({ index, option, unselectValue, }: {
+    index: number;
+    option: string;
+    unselectValue: (option: string, index: number) => void;
+}) => import("react").JSX.Element;
+export { FormAutocompleteMultiselectButton };

package/build/system/NewForm/FormAutocompleteMultiselectButton.js

@@ -0,0 +1,45 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { MdClose } from 'react-icons/md';
+import { Button } from '..';
+import { jsx as _jsx } from "theme-ui/jsx-runtime";
+import { jsxs as _jsxs } from "theme-ui/jsx-runtime";
+var FormAutocompleteMultiselectButton = function FormAutocompleteMultiselectButton(_ref) {
+  var index = _ref.index,
+    option = _ref.option,
+    unselectValue = _ref.unselectValue;
+  return _jsx("div", {
+    sx: {
+      mr: 1,
+      maxWidth: '100%'
+    },
+    children: _jsxs(Button, {
+      variant: "tertiary",
+      onClick: function onClick(e) {
+        e.preventDefault();
+        unselectValue(option, index);
+      },
+      sx: {
+        mt: 1,
+        fontSize: 1,
+        maxWidth: '100%'
+      },
+      children: [_jsx("div", {
+        sx: {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        },
+        children: option
+      }), _jsx(MdClose, {
+        sx: {
+          ml: 2
+        }
+      })]
+    })
+  }, index);
+};
+export { FormAutocompleteMultiselectButton };

package/package.json

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

package/src/system/NewForm/FormAutocompleteMultiselect.js

@@ -7,16 +7,17 @@ import Autocomplete from 'accessible-autocomplete/react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { MdClose } from 'react-icons/md';
 
 /**
  * Internal dependencies
  */
+import { FormAutocompleteMultiselectBadge } from './FormAutocompleteMultiselectBadge';
+import { FormAutocompleteMultiselectButton } from './FormAutocompleteMultiselectButton';
 import { FormSelectArrow } from './FormSelectArrow';
 import { FormSelectContent } from './FormSelectContent';
 import { FormSelectLoading } from './FormSelectLoading';
 import { FormSelectSearch } from './FormSelectSearch';
-import { Button, Flex } from '../';
+import { Flex } from '../';
 import { Validation } from '../Form';
 import { baseControlBorderStyle, inputBaseText } from '../Form/Input.styles';
 import { Label } from '../Form/Label';
@@ -126,42 +127,6 @@ AddSelectionStatus.propTypes = {
 	status: PropTypes.string.isRequired,
 };
 
-const SelectedOptions = ( { index, option, unselectValue } ) => {
-	return (
-		<div key={ index } sx={ { mr: 1, maxWidth: '100%' } }>
-			<Button
-				variant="tertiary"
-				onClick={ e => {
-					e.preventDefault();
-					unselectValue( option, index );
-				} }
-				sx={ {
-					mt: 1,
-					fontSize: 1,
-					maxWidth: '100%',
-				} }
-			>
-				<div
-					sx={ {
-						overflow: 'hidden',
-						textOverflow: 'ellipsis',
-						whiteSpace: 'nowrap',
-					} }
-				>
-					{ option }
-				</div>
-				<MdClose sx={ { ml: 2 } } />
-			</Button>
-		</div>
-	);
-};
-
-SelectedOptions.propTypes = {
-	index: PropTypes.number.isRequired,
-	option: PropTypes.string.isRequired,
-	unselectValue: PropTypes.func.isRequired,
-};
-
 const FormAutocompleteMultiselect = React.forwardRef(
 	(
 		{
@@ -188,6 +153,8 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			showAllValues = false,
 			source,
 			value,
+			listType = 'button',
+			initialValue = [],
 			...props
 		},
 		forwardRef
@@ -197,8 +164,10 @@ const FormAutocompleteMultiselect = React.forwardRef(
 			REMOVE: 'remove',
 			NONE: 'none',
 		};
+		const ListComponent =
+			listType === 'button' ? FormAutocompleteMultiselectButton : FormAutocompleteMultiselectBadge;
 		const [ isDirty, setIsDirty ] = useState( false );
-		const [ selectedOptions, setSelectedOptions ] = useState( [] );
+		const [ selectedOptions, setSelectedOptions ] = useState( initialValue );
 		const [ addStatus, setAddStatus ] = useState( '' );
 		const [ currentOption, setCurrentOption ] = useState( {
 			action: OPTION_ACTION.NONE,
@@ -367,10 +336,10 @@ const FormAutocompleteMultiselect = React.forwardRef(
 				setCurrentOption( { action: OPTION_ACTION.NONE, option: null } );
 			} else if ( currentOption.index === selectedOptions.length && selectedOptions.length > 0 ) {
 				// Move focus to the first selected item, if the last element is removed and there are other elements in the list
-				global.document.querySelector( '.vip-button-component' ).focus();
+				global.document.querySelector( '.vip-button-component' )?.focus();
 			} else if ( selectedOptions.length === 0 ) {
 				// Move focus to the input field if the last element is removed and there are no other elements in the list
-				global.document.querySelector( '.autocomplete__input' ).focus();
+				global.document.querySelector( '.autocomplete__input' )?.focus();
 			}
 		}, [ currentOption ] );
 
@@ -421,7 +390,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
 				<div sx={ { display: 'inline-flex', flexWrap: 'wrap', maxWidth: '100%' } }>
 					{ selectedOptions &&
 						selectedOptions.map( ( option, idx ) => (
-							<SelectedOptions
+							<ListComponent
 								key={ idx }
 								index={ idx }
 								option={ option }
@@ -458,6 +427,7 @@ FormAutocompleteMultiselect.propTypes = {
 	source: PropTypes.func,
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,
+	initialValue: PropTypes.array,
 };
 
 FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';

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

@@ -86,6 +86,32 @@ export const Default = () => {
 	);
 };
 
+export const WithBadges = () => {
+	const customArgs = {
+		...args,
+		listType: 'badge',
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
+export const WithInitialValueBadges = () => {
+	const customArgs = {
+		...args,
+		initialValue: shortOptions.slice( 0, 2 ).map( option => option.label ),
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};
+
 export const Inline = () => {
 	const customArgs = {
 		isInline: true,

package/src/system/NewForm/FormAutocompleteMultiselectBadge.tsx

@@ -0,0 +1,53 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { MdClose } from 'react-icons/md';
+
+import { Badge } from '..';
+
+const FormAutocompleteMultiselectBadge = ( {
+	index,
+	option,
+	unselectValue,
+}: {
+	index: number;
+	option: string;
+	unselectValue: ( option: string, index: number ) => void;
+} ) => {
+	return (
+		<div key={ index } sx={ { mr: 1, maxWidth: '100%' } }>
+			<Badge
+				variant="gray"
+				sx={ {
+					mt: 1,
+					fontSize: 1,
+					maxWidth: '100%',
+					display: 'flex',
+					alignItems: 'center',
+					justifyContent: 'space-between',
+				} }
+			>
+				<div
+					sx={ {
+						overflow: 'hidden',
+						textOverflow: 'ellipsis',
+						whiteSpace: 'nowrap',
+					} }
+				>
+					{ option }
+				</div>
+				<MdClose
+					sx={ { ml: 2, cursor: 'pointer' } }
+					onClick={ e => {
+						e.preventDefault();
+						unselectValue( option, index );
+					} }
+				/>
+			</Badge>
+		</div>
+	);
+};
+
+export { FormAutocompleteMultiselectBadge };

package/src/system/NewForm/FormAutocompleteMultiselectButton.tsx

@@ -0,0 +1,48 @@
+/** @jsxImportSource theme-ui */
+
+/**
+ * External dependencies
+ */
+import { MdClose } from 'react-icons/md';
+
+import { Button } from '..';
+
+const FormAutocompleteMultiselectButton = ( {
+	index,
+	option,
+	unselectValue,
+}: {
+	index: number;
+	option: string;
+	unselectValue: ( option: string, index: number ) => void;
+} ) => {
+	return (
+		<div key={ index } sx={ { mr: 1, maxWidth: '100%' } }>
+			<Button
+				variant="tertiary"
+				onClick={ e => {
+					e.preventDefault();
+					unselectValue( option, index );
+				} }
+				sx={ {
+					mt: 1,
+					fontSize: 1,
+					maxWidth: '100%',
+				} }
+			>
+				<div
+					sx={ {
+						overflow: 'hidden',
+						textOverflow: 'ellipsis',
+						whiteSpace: 'nowrap',
+					} }
+				>
+					{ option }
+				</div>
+				<MdClose sx={ { ml: 2 } } />
+			</Button>
+		</div>
+	);
+};
+
+export { FormAutocompleteMultiselectButton };