@automattic/vip-design-system 0.26.0 → 0.26.1

package/build/system/NewForm/FormAutocomplete.js

@@ -79,6 +79,9 @@ var defaultStyles = {
     '&.autocomplete__input--focused': {
       outlineWidth: 0,
       boxShadow: 'none'
+    },
+    '&.autocomplete__input--show-all-values': {
+      paddingRight: '40px'
     }
   },
   '& .autocomplete__menu': {
@@ -93,8 +96,7 @@ var defaultStyles = {
     fontSize: 'inherit'
   },
   '& .autocomplete__wrapper': {
-    width: '100%',
-    paddingRight: '40px'
+    width: '100%'
   },
   '& .autocomplete__input--show-all-values': {
     paddingRight: 0
@@ -122,6 +124,10 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       id = _ref$id === void 0 ? 'vip-autocomplete' : _ref$id,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
 
+  var _useState = (0, _react.useState)(false),
+      isDirty = _useState[0],
+      setIsDirty = _useState[1];
+
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
       htmlFor: forLabel || id,
@@ -155,19 +161,29 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     }
   }, [onChange, getOptionByLabel]);
   var suggest = (0, _react.useCallback)(function (query, populateResults) {
-    var data = options.filter(function (option) {
-      return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
-    });
+    var data = options;
+
+    if (isDirty) {
+      data = options.filter(function (option) {
+        return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
+      });
+    }
+
     populateResults(data.map(function (option) {
       return optionLabel(option);
     }));
-  }, [options]);
+  }, [options, isDirty]);
   (0, _react.useEffect)(function () {
     global.document.querySelector('.autocomplete__input').setAttribute('aria-activedescendant', '');
   }, []);
   (0, _react.useEffect)(function () {
     global.document.querySelector('.autocomplete__menu').setAttribute('aria-label', label + " list");
   }, [label]);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector("#" + id).addEventListener('keydown', function () {
+      setIsDirty(true);
+    });
+  }, [setIsDirty]);
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
       sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles),

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

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithDefaultValue = exports.Inline = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -96,4 +96,15 @@ var Inline = function Inline() {
   });
 };
 
-exports.Inline = Inline;
+exports.Inline = Inline;
+
+var WithDefaultValue = function WithDefaultValue() {
+  var customArgs = (0, _extends2["default"])({}, args, {
+    value: 'Chocolate'
+  });
+  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
+  });
+};
+
+exports.WithDefaultValue = WithDefaultValue;

package/build/system/ResourceList/ResourceList.js

@@ -9,6 +9,8 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _react = require("react");
+
 var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
@@ -51,7 +53,7 @@ var StyledListItem = function StyledListItem(props) {
     sx: {
       py: 2,
       borderBottom: '1px solid',
-      borderColor: 'border',
+      borderColor: 'borders.2',
       listStyleType: 'none',
       margin: 0,
       px: 0
@@ -85,6 +87,37 @@ var ResourceList = function ResourceList(_ref) {
     });
   };
 
+  var renderGoupedItems = function renderGoupedItems() {
+    return (0, _react.useMemo)(function () {
+      return Object.keys(groupedItems).map(function (groupName, index) {
+        return (0, _jsxRuntime.jsxs)(_.Box, {
+          sx: {
+            mb: 4
+          },
+          as: "li",
+          children: [(0, _jsxRuntime.jsx)(_.Heading, {
+            variant: "h4",
+            as: "h4",
+            sx: {
+              mb: 3
+            },
+            children: groupName
+          }), (0, _jsxRuntime.jsx)(_.Box, {
+            as: "ul",
+            sx: {
+              listStyleType: 'none',
+              m: 0,
+              p: 0,
+              borderTop: '1px solid',
+              borderColor: 'border'
+            },
+            children: renderItemList(groupedItems[groupName])
+          })]
+        }, index);
+      });
+    }, [groupedItems]);
+  };
+
   return (0, _jsxRuntime.jsx)(_.Box, {
     as: "ul",
     sx: {
@@ -93,31 +126,7 @@ var ResourceList = function ResourceList(_ref) {
       p: 0
     },
     className: "vip-resource-list-component",
-    children: groupedByDay ? Object.keys(groupedItems).map(function (groupName, index) {
-      return (0, _jsxRuntime.jsxs)(_.Box, {
-        sx: {
-          mb: 4
-        },
-        children: [(0, _jsxRuntime.jsx)(_.Heading, {
-          variant: "h4",
-          as: "h4",
-          sx: {
-            mb: 3
-          },
-          children: groupName
-        }), (0, _jsxRuntime.jsx)(_.Box, {
-          as: "ul",
-          sx: {
-            listStyleType: 'none',
-            m: 0,
-            p: 0,
-            borderTop: '1px solid',
-            borderColor: 'border'
-          },
-          children: renderItemList(groupedItems[groupName])
-        })]
-      }, index);
-    }) : renderItemList(items)
+    children: groupedByDay ? renderGoupedItems(groupedItems) : renderItemList(items)
   });
 };
 

package/build/system/ResourceList/ResourceList.stories.js

@@ -129,6 +129,7 @@ var Grouped = function Grouped() {
                 children: "#443"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 fontSize: 1,
@@ -337,6 +338,7 @@ var Relative = function Relative() {
                 children: "Running"
               })]
             }), (0, _jsxRuntime.jsxs)(_.Text, {
+              as: "div",
               sx: {
                 mb: 0,
                 color: 'muted',

package/package.json

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

package/src/system/NewForm/FormAutocomplete.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Label } from '../Form/Label';
 import Autocomplete from 'accessible-autocomplete/react';
@@ -42,6 +42,7 @@ const defaultStyles = {
 		'&:focus-visible': { outlineWidth: 0, boxShadow: 'none' },
 		'&:focus-within': { outlineWidth: 0, boxShadow: 'none' },
 		'&.autocomplete__input--focused': { outlineWidth: 0, boxShadow: 'none' },
+		'&.autocomplete__input--show-all-values': { paddingRight: '40px' },
 	},
 	'& .autocomplete__menu': {
 		borderWidth: '1px',
@@ -56,7 +57,6 @@ const defaultStyles = {
 	},
 	'& .autocomplete__wrapper': {
 		width: '100%',
-		paddingRight: '40px',
 	},
 	'& .autocomplete__input--show-all-values': {
 		paddingRight: 0,
@@ -85,6 +85,8 @@ const FormAutocomplete = React.forwardRef(
 		},
 		forwardRef
 	) => {
+		const [ isDirty, setIsDirty ] = useState( false );
+
 		const SelectLabel = () => <Label htmlFor={ forLabel || id }>{ label }</Label>;
 
 		const inlineLabel = !! ( isInline && label );
@@ -120,12 +122,15 @@ const FormAutocomplete = React.forwardRef(
 
 		const suggest = useCallback(
 			( query, populateResults ) => {
-				const data = options.filter(
-					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-				);
+				let data = options;
+				if ( isDirty ) {
+					data = options.filter(
+						option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
+					);
+				}
 				populateResults( data.map( option => optionLabel( option ) ) );
 			},
-			[ options ]
+			[ options, isDirty ]
 		);
 
 		useEffect( () => {
@@ -140,6 +145,12 @@ const FormAutocomplete = React.forwardRef(
 				.setAttribute( 'aria-label', `${ label } list` );
 		}, [ label ] );
 
+		useEffect( () => {
+			global.document.querySelector( `#${ id }` ).addEventListener( 'keydown', () => {
+				setIsDirty( true );
+			} );
+		}, [ setIsDirty ] );
+
 		return (
 			<>
 				{ label && ! isInline && <SelectLabel /> }

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

@@ -61,3 +61,16 @@ export const Inline = () => {
 		</>
 	);
 };
+
+export const WithDefaultValue = () => {
+	const customArgs = {
+		...args,
+		value: 'Chocolate',
+	};
+
+	return (
+		<>
+			<DefaultComponent { ...customArgs } />
+		</>
+	);
+};