@automattic/vip-design-system 0.22.0 → 0.23.1

package/build/system/Dropdown/DropdownSeparator.js

@@ -24,7 +24,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 var styles = {
   height: '1px',
-  backgroundColor: 'border',
+  backgroundColor: 'borders.2',
   my: '5px'
 };
 exports.styles = styles;

package/build/system/NewForm/FormSelect.js

@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,7 +21,13 @@ var _FormSelectContent = require("./FormSelectContent");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["isInline", "placeholder", "forLabel", "options", "label"];
+var _excluded = ["isInline", "placeholder", "forLabel", "options", "label", "getOptionLabel", "getOptionValue", "onChange"],
+    _excluded2 = ["options"];
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var MAX_SUGGESTED_OPTIONS = 15;
 var isDev = process.env.NODE_ENV !== 'production';
 var defaultStyles = {
@@ -69,6 +75,9 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
       forLabel = _ref2.forLabel,
       options = _ref2.options,
       label = _ref2.label,
+      getOptionLabel = _ref2.getOptionLabel,
+      getOptionValue = _ref2.getOptionValue,
+      onChange = _ref2.onChange,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, _excluded);
 
   if (isDev && options.length > MAX_SUGGESTED_OPTIONS) {
@@ -76,6 +85,32 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
     console.info('For 16 or more items, consider using another component with a typeahead capability.');
   }
 
+  var getAllOptions = (0, _react.useMemo)(function () {
+    return [].concat(options.filter(function (option) {
+      return !option.options;
+    }), options.filter(function (option) {
+      return option.options;
+    }).map(function (option) {
+      return option.options;
+    })).reduce(function (a, b) {
+      return a.concat(b);
+    }, []);
+  }, [options]);
+  var optionLabel = (0, _react.useCallback)(function (option) {
+    return getOptionLabel ? getOptionLabel(option) : option.label;
+  }, [getOptionLabel]);
+  var optionValue = (0, _react.useCallback)(function (option) {
+    return getOptionValue ? getOptionValue(option) : option.value;
+  }, [getOptionValue]);
+  var getOptionByValue = (0, _react.useCallback)(function (value) {
+    return getAllOptions.find(function (option) {
+      return "" + optionValue(option) === "" + value;
+    });
+  }, [getAllOptions, optionValue]);
+  var onValueChange = (0, _react.useCallback)(function (event) {
+    return onChange ? onChange(getOptionByValue(event.target.value), event) : getOptionByValue(event.target.value);
+  }, [onChange, getOptionByValue]);
+
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
       htmlFor: forLabel || props.id,
@@ -89,16 +124,17 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
       isInline: inlineLabel,
       label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
       children: [(0, _jsxRuntime.jsxs)("select", (0, _extends2["default"])({
+        onChange: onValueChange,
         ref: forwardRef,
         sx: defaultStyles
       }, props, {
         children: [placeholder && (0, _jsxRuntime.jsx)("option", {
           children: placeholder
         }), options.map(function (_ref3) {
-          var optionLabel = _ref3.label,
-              value = _ref3.value,
-              groupOptions = _ref3.options;
-          return value ? renderOption(optionLabel, value) : renderGroup(optionLabel, groupOptions);
+          var groupOptions = _ref3.options,
+              option = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded2);
+          var value = optionValue(option);
+          return value ? renderOption(optionLabel(option), value) : renderGroup(optionLabel(option), groupOptions);
         })]
       })), (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {})]
     })]
@@ -112,6 +148,9 @@ FormSelect.propTypes = {
   forLabel: _propTypes["default"].string,
   placeholder: _propTypes["default"].string,
   label: _propTypes["default"].string,
-  options: _propTypes["default"].array
+  options: _propTypes["default"].array,
+  getOptionLabel: _propTypes["default"].func,
+  getOptionValue: _propTypes["default"].func,
+  onChange: _propTypes["default"].func
 };
 FormSelect.displayName = 'FormSelect';

package/build/system/NewForm/FormSelect.stories.js

@@ -3,17 +3,19 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithGroup = exports.IsInline = exports.Default = void 0;
+exports["default"] = exports.WithOptionLabelAndValue = exports.WithOnChange = exports.WithGroup = exports.IsInline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
+var _react = require("react");
+
 var Form = _interopRequireWildcard(require("."));
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["label", "width"];
+var _excluded = ["label", "width", "onChange"];
 
 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); }
 
@@ -52,6 +54,13 @@ var options = [{
 }, {
   value: 'vanilla',
   label: 'Vanilla'
+}];
+var groupedOptions = [{
+  label: 'Group name',
+  options: options
+}, {
+  label: 'Another Group name',
+  options: options
 }]; // eslint-disable-next-line react/prop-types
 
 var DefaultComponent = function DefaultComponent(_ref) {
@@ -59,6 +68,7 @@ var DefaultComponent = function DefaultComponent(_ref) {
       label = _ref$label === void 0 ? 'Label' : _ref$label,
       _ref$width = _ref.width,
       width = _ref$width === void 0 ? 250 : _ref$width,
+      onChange = _ref.onChange,
       rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [(0, _jsxRuntime.jsxs)("p", {
@@ -79,7 +89,8 @@ var DefaultComponent = function DefaultComponent(_ref) {
         },
         children: (0, _jsxRuntime.jsx)(Form.Select, (0, _extends2["default"])({
           id: "form-select",
-          label: label
+          label: label,
+          onChange: onChange
         }, rest))
       })
     })]
@@ -96,13 +107,7 @@ var WithGroup = DefaultComponent.bind({});
 exports.WithGroup = WithGroup;
 WithGroup.args = {
   label: 'Group Label',
-  options: [{
-    label: 'Group name',
-    options: options
-  }, {
-    label: 'Another Group name',
-    options: options
-  }]
+  options: [].concat(options, groupedOptions)
 };
 var IsInline = DefaultComponent.bind({});
 exports.IsInline = IsInline;
@@ -110,11 +115,56 @@ IsInline.args = {
   label: 'Inline Select',
   isInline: true,
   width: '100%',
-  options: [{
-    label: 'Group name',
-    options: options
-  }, {
-    label: 'Another Group name',
-    options: options
-  }]
-};
+  options: groupedOptions
+};
+var WithOptionLabelAndValue = DefaultComponent.bind({});
+exports.WithOptionLabelAndValue = WithOptionLabelAndValue;
+WithOptionLabelAndValue.args = {
+  label: 'Select with getOptionLabel / getOptionValue',
+  width: '100%',
+  options: options.map(function (_ref2) {
+    var label = _ref2.label,
+        value = _ref2.value;
+    return {
+      name: label,
+      id: value
+    };
+  }),
+  getOptionLabel: function getOptionLabel(option) {
+    return option.name;
+  },
+  getOptionValue: function getOptionValue(option) {
+    return option.id;
+  }
+};
+
+var WithOnChange = function WithOnChange() {
+  var _useState = (0, _react.useState)(null),
+      option = _useState[0],
+      setOption = _useState[1];
+
+  var onChange = (0, _react.useCallback)(function (val, event) {
+    return setOption({
+      obj: val,
+      eventValue: event.target.value
+    });
+  });
+  var args = {
+    label: 'Select with onChange',
+    placeholder: '- Select -',
+    width: '100%',
+    onChange: onChange,
+    options: [].concat(options, groupedOptions)
+  };
+  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
+      onChange: onChange
+    }, args)), option && (0, _jsxRuntime.jsxs)("p", {
+      children: ["Object to JSON: ", JSON.stringify(option.obj)]
+    }), option && (0, _jsxRuntime.jsxs)("p", {
+      children: ["Original Event Value: ", option.eventValue]
+    })]
+  });
+};
+
+exports.WithOnChange = WithOnChange;

package/build/system/NewForm/FormSelect.test.js

@@ -140,4 +140,54 @@ describe('<FormSelect />', function () {
       }
     }, _callee3);
   })));
+  it('renders the FormSelect component when getOptionLabel and getOptionValue', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
+    var props, _render4, container;
+
+    return _regenerator["default"].wrap(function _callee4$(_context4) {
+      while (1) {
+        switch (_context4.prev = _context4.next) {
+          case 0:
+            props = (0, _extends2["default"])({}, defaultProps, {
+              options: options.map(function (_ref5) {
+                var label = _ref5.label,
+                    value = _ref5.value;
+                return {
+                  name: label,
+                  id: value
+                };
+              }),
+              getOptionLabel: function getOptionLabel(option) {
+                return option.name;
+              },
+              getOptionValue: function getOptionValue(option) {
+                return option.id;
+              }
+            });
+            _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_FormSelect.FormSelect, (0, _extends2["default"])({
+              id: "my_desert_list"
+            }, props))), container = _render4.container;
+            expect(_react.screen.getByLabelText(defaultProps.label)).toBeInTheDocument();
+            expect(_react.screen.getByRole('combobox')).toBeInTheDocument();
+            expect(_react.screen.getAllByRole('option')).toHaveLength(3);
+            expect(_react.screen.getByText(options[0].label)).toBeInTheDocument();
+            expect(_react.screen.getByText(options[1].label)).toBeInTheDocument();
+            expect(_react.screen.getByText(options[2].label)).toBeInTheDocument();
+            expect(_react.screen.queryByRole('group')).not.toBeInTheDocument(); // Check for accessibility issues
+
+            _context4.t0 = expect;
+            _context4.next = 12;
+            return (0, _jestAxe.axe)(container);
+
+          case 12:
+            _context4.t1 = _context4.sent;
+            _context4.next = 15;
+            return (0, _context4.t0)(_context4.t1).toHaveNoViolations();
+
+          case 15:
+          case "end":
+            return _context4.stop();
+        }
+      }
+    }, _callee4);
+  })));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/vip-design-system",
-	"version": "0.22.0",
+	"version": "0.23.1",
 	"main": "build/system/index.js",
 	"scripts": {
 		"build-storybook": "build-storybook",
@@ -22,7 +22,7 @@
 	"dependencies": {
 		"@radix-ui/react-checkbox": "^1.0.0",
 		"@radix-ui/react-dialog": "^1.0.0",
-		"@radix-ui/react-dropdown-menu": "^1.0.0",
+		"@radix-ui/react-dropdown-menu": "^1.0.1-rc.6",
 		"@radix-ui/react-radio-group": "^1.0.0",
 		"@radix-ui/react-switch": "^1.0.0",
 		"@radix-ui/react-tooltip": "^1.0.0",

package/src/system/Dropdown/DropdownSeparator.js

@@ -8,7 +8,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
 export const styles = {
 	height: '1px',
-	backgroundColor: 'border',
+	backgroundColor: 'borders.2',
 	my: '5px',
 };
 

package/src/system/NewForm/FormSelect.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Label } from '../Form/Label';
 
@@ -47,7 +47,20 @@ const renderGroup = ( groupLabel, groupOptions ) => {
 };
 
 const FormSelect = React.forwardRef(
-	( { isInline, placeholder, forLabel, options, label, ...props }, forwardRef ) => {
+	(
+		{
+			isInline,
+			placeholder,
+			forLabel,
+			options,
+			label,
+			getOptionLabel,
+			getOptionValue,
+			onChange,
+			...props
+		},
+		forwardRef
+	) => {
 		if ( isDev && options.length > MAX_SUGGESTED_OPTIONS ) {
 			// eslint-disable-next-line no-console
 			console.info(
@@ -55,7 +68,40 @@ const FormSelect = React.forwardRef(
 			);
 		}
 
+		const getAllOptions = useMemo(
+			() =>
+				[
+					...options.filter( option => ! option.options ),
+					...options.filter( option => option.options ).map( option => option.options ),
+				].reduce( ( a, b ) => a.concat( b ), [] ),
+			[ options ]
+		);
+
+		const optionLabel = useCallback(
+			option => ( getOptionLabel ? getOptionLabel( option ) : option.label ),
+			[ getOptionLabel ]
+		);
+
+		const optionValue = useCallback(
+			option => ( getOptionValue ? getOptionValue( option ) : option.value ),
+			[ getOptionValue ]
+		);
+
+		const getOptionByValue = useCallback(
+			value => getAllOptions.find( option => `${ optionValue( option ) }` === `${ value }` ),
+			[ getAllOptions, optionValue ]
+		);
+
+		const onValueChange = useCallback(
+			event =>
+				onChange
+					? onChange( getOptionByValue( event.target.value ), event )
+					: getOptionByValue( event.target.value ),
+			[ onChange, getOptionByValue ]
+		);
+
 		const SelectLabel = () => <Label htmlFor={ forLabel || props.id }>{ label }</Label>;
+
 		const inlineLabel = !! ( isInline && label );
 
 		return (
@@ -63,11 +109,15 @@ const FormSelect = React.forwardRef(
 				{ label && ! isInline && <SelectLabel /> }
 
 				<FormSelectContent isInline={ inlineLabel } label={ inlineLabel ? <SelectLabel /> : null }>
-					<select ref={ forwardRef } sx={ defaultStyles } { ...props }>
+					<select onChange={ onValueChange } ref={ forwardRef } sx={ defaultStyles } { ...props }>
 						{ placeholder && <option>{ placeholder }</option> }
-						{ options.map( ( { label: optionLabel, value, options: groupOptions } ) =>
-							value ? renderOption( optionLabel, value ) : renderGroup( optionLabel, groupOptions )
-						) }
+						{ options.map( ( { options: groupOptions, ...option } ) => {
+							const value = optionValue( option );
+
+							return value
+								? renderOption( optionLabel( option ), value )
+								: renderGroup( optionLabel( option ), groupOptions );
+						} ) }
 					</select>
 
 					<FormSelectArrow />
@@ -84,6 +134,9 @@ FormSelect.propTypes = {
 	placeholder: PropTypes.string,
 	label: PropTypes.string,
 	options: PropTypes.array,
+	getOptionLabel: PropTypes.func,
+	getOptionValue: PropTypes.func,
+	onChange: PropTypes.func,
 };
 
 FormSelect.displayName = 'FormSelect';

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

@@ -3,6 +3,7 @@
 /**
  * Internal dependencies
  */
+import { useCallback, useState } from 'react';
 import * as Form from '.';
 
 export default {
@@ -25,8 +26,19 @@ const options = [
 	{ value: 'vanilla', label: 'Vanilla' },
 ];
 
+const groupedOptions = [
+	{
+		label: 'Group name',
+		options: options,
+	},
+	{
+		label: 'Another Group name',
+		options: options,
+	},
+];
+
 // eslint-disable-next-line react/prop-types
-const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => (
+const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } ) => (
 	<>
 		<p>
 			This is a simple wrapper at the top of a browser default select component. This component
@@ -49,7 +61,7 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => (
 		</p>
 		<Form.Root>
 			<div sx={ { width } }>
-				<Form.Select id="form-select" label={ label } { ...rest } />
+				<Form.Select id="form-select" label={ label } onChange={ onChange } { ...rest } />
 			</div>
 		</Form.Root>
 	</>
@@ -65,16 +77,7 @@ export const WithGroup = DefaultComponent.bind( {} );
 
 WithGroup.args = {
 	label: 'Group Label',
-	options: [
-		{
-			label: 'Group name',
-			options: options,
-		},
-		{
-			label: 'Another Group name',
-			options: options,
-		},
-	],
+	options: [ ...options, ...groupedOptions ],
 };
 
 export const IsInline = DefaultComponent.bind( {} );
@@ -83,14 +86,42 @@ IsInline.args = {
 	label: 'Inline Select',
 	isInline: true,
 	width: '100%',
-	options: [
-		{
-			label: 'Group name',
-			options: options,
-		},
-		{
-			label: 'Another Group name',
-			options: options,
-		},
-	],
+	options: groupedOptions,
+};
+
+export const WithOptionLabelAndValue = DefaultComponent.bind( {} );
+
+WithOptionLabelAndValue.args = {
+	label: 'Select with getOptionLabel / getOptionValue',
+	width: '100%',
+	options: options.map( ( { label, value } ) => ( {
+		name: label,
+		id: value,
+	} ) ),
+	getOptionLabel: option => option.name,
+	getOptionValue: option => option.id,
+};
+
+export const WithOnChange = () => {
+	const [ option, setOption ] = useState( null );
+
+	const onChange = useCallback( ( val, event ) =>
+		setOption( { obj: val, eventValue: event.target.value } )
+	);
+
+	const args = {
+		label: 'Select with onChange',
+		placeholder: '- Select -',
+		width: '100%',
+		onChange,
+		options: [ ...options, ...groupedOptions ],
+	};
+
+	return (
+		<>
+			<DefaultComponent onChange={ onChange } { ...args } />
+			{ option && <p>Object to JSON: { JSON.stringify( option.obj ) }</p> }
+			{ option && <p>Original Event Value: { option.eventValue }</p> }
+		</>
+	);
 };

package/src/system/NewForm/FormSelect.test.js

@@ -69,4 +69,29 @@ describe( '<FormSelect />', () => {
 		// Check for accessibility issues
 		await expect( await axe( container ) ).toHaveNoViolations();
 	} );
+
+	it( 'renders the FormSelect component when getOptionLabel and getOptionValue', async () => {
+		const props = {
+			...defaultProps,
+			options: options.map( ( { label, value } ) => ( {
+				name: label,
+				id: value,
+			} ) ),
+			getOptionLabel: option => option.name,
+			getOptionValue: option => option.id,
+		};
+
+		const { container } = render( <FormSelect id="my_desert_list" { ...props } /> );
+
+		expect( screen.getByLabelText( defaultProps.label ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'combobox' ) ).toBeInTheDocument();
+		expect( screen.getAllByRole( 'option' ) ).toHaveLength( 3 );
+		expect( screen.getByText( options[ 0 ].label ) ).toBeInTheDocument();
+		expect( screen.getByText( options[ 1 ].label ) ).toBeInTheDocument();
+		expect( screen.getByText( options[ 2 ].label ) ).toBeInTheDocument();
+		expect( screen.queryByRole( 'group' ) ).not.toBeInTheDocument();
+
+		// Check for accessibility issues
+		await expect( await axe( container ) ).toHaveNoViolations();
+	} );
 } );