@automattic/vip-design-system 0.30.1 → 0.31.0

package/build/system/NewForm/FormAutocomplete.js

@@ -37,7 +37,7 @@ var _Form = require("../Form");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "errorMessage", "forLabel", "getOptionLabel", "getOptionValue", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "source", "value"];
+var _excluded = ["autoFilter", "className", "debounce", "displayMenu", "dropdownArrow", "errorMessage", "forLabel", "getOptionLabel", "getOptionValue", "hasError", "isInline", "label", "loading", "minLength", "noOptionsMessage", "onChange", "onInputChange", "options", "required", "searchIcon", "showAllValues", "resetOnBlur", "source", "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); }
 
@@ -49,7 +49,8 @@ var baseBorderTextColors = (0, _extends2["default"])({}, _Input.baseControlBorde
   borderRadius: 1
 });
 var defaultStyles = (0, _extends2["default"])({
-  width: '100%'
+  width: '100%',
+  mb: 2
 }, baseBorderTextColors, {
   py: 0,
   minHeight: '36px',
@@ -125,8 +126,8 @@ var inlineStyles = {
   borderWidth: 0
 };
 var searchIconStyles = {
-  '& .autocomplete__input.autocomplete__input--show-all-values': {
-    paddingLeft: '30px'
+  '& .autocomplete__input.autocomplete__input': {
+    paddingLeft: 4
   }
 };
 
@@ -170,6 +171,8 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       searchIcon = _ref.searchIcon,
       _ref$showAllValues = _ref.showAllValues,
       showAllValues = _ref$showAllValues === void 0 ? false : _ref$showAllValues,
+      _ref$resetOnBlur = _ref.resetOnBlur,
+      resetOnBlur = _ref$resetOnBlur === void 0 ? false : _ref$resetOnBlur,
       source = _ref.source,
       value = _ref.value,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
@@ -178,8 +181,20 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       isDirty = _useState[0],
       setIsDirty = _useState[1];
 
+  var _useState2 = (0, _react.useState)(value || ''),
+      selectedValue = _useState2[0],
+      setSelectedValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(value),
+      inputQuery = _useState3[0],
+      setInputQuery = _useState3[1];
+
   var debounceTimeout;
 
+  if (!forwardRef) {
+    forwardRef = /*#__PURE__*/_react["default"].createRef();
+  }
+
   var SelectLabel = function SelectLabel() {
     return (0, _jsxRuntime.jsx)(_Label.Label, {
       required: required,
@@ -208,11 +223,43 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
       return "" + optionLabel(option) === "" + inputValue;
     });
   }, [getAllOptions, optionLabel]);
+  /**
+   * Reset the underlying component state to show the selected value
+   */
+
+  var resetInputState = (0, _react.useCallback)(function () {
+    var _forwardRef;
+
+    if (resetOnBlur && (_forwardRef = forwardRef) != null && _forwardRef.current && inputQuery !== selectedValue) {
+      // resets the input field to the selected value or the empty string
+      forwardRef.current.setState((0, _extends2["default"])({}, forwardRef.current.state, {
+        query: inputQuery && inputQuery !== '' ? selectedValue != null ? selectedValue : '' : '' // selected value should not be null or the component will crash
+
+      }));
+    }
+  }, [forwardRef]); // sets the internal state variables and calls the onChange callback
+
+  var setAutocompleteState = function setAutocompleteState(inputValue) {
+    setInputQuery(inputValue);
+    setSelectedValue(inputValue);
+    onChange(getOptionByLabel(inputValue), inputValue);
+    setIsDirty(false);
+  }; // this method gets called when we confirm the selection via click/enter
+
+
   var onValueChange = (0, _react.useCallback)(function (inputValue) {
     if (inputValue) {
-      onChange(getOptionByLabel(inputValue), inputValue);
+      setAutocompleteState(inputValue);
+    } else if (resetOnBlur && inputQuery !== selectedValue) {
+      if (inputQuery && inputQuery !== '') {
+        // reset the content to the selected value
+        setAutocompleteState(selectedValue);
+      } else {
+        // reset the content to empty if there's no match
+        setAutocompleteState(null);
+      }
     }
-  }, [onChange, getOptionByLabel]);
+  }, [onChange, getOptionByLabel, setAutocompleteState]);
   var handleTypeChange = (0, _react.useCallback)(function (query) {
     return options.filter(function (option) {
       return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
@@ -247,7 +294,18 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     populateResults((_data = data) == null ? void 0 : _data.map(function (option) {
       return optionLabel(option);
     }));
-  }, [autoFilter, isDirty, onInputChange, options]);
+  }, [autoFilter, isDirty, onInputChange, options]); // internal function to save the inputQuery
+
+  var handleSource = function handleSource(query, populateResults) {
+    setInputQuery(query); // user function to fetch the results has the precedence
+
+    if (source) {
+      return source(query, populateResults);
+    }
+
+    return suggest(query, populateResults);
+  };
+
   (0, _react.useEffect)(function () {
     global.document.querySelector('.autocomplete__input').setAttribute('aria-activedescendant', '');
   }, []);
@@ -264,8 +322,13 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     input.setAttribute('aria-required', required);
   }, [required]);
   (0, _react.useEffect)(function () {
-    global.document.querySelector("#" + forLabel).addEventListener('keydown', function () {
-      setIsDirty(true);
+    global.document.querySelector("#" + forLabel).addEventListener('keydown', function (e) {
+      // pressed escape, we want to reset the status
+      if (e.keyCode === 27 && resetOnBlur) {
+        resetInputState();
+      } else {
+        setIsDirty(true);
+      }
     });
   }, [setIsDirty]); // For accessibility, we need to add the error message to the aria-describedby attribute
 
@@ -273,6 +336,11 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
     var input = global.document.querySelector("#" + forLabel);
     input == null ? void 0 : input.setAttribute('aria-describedby', "describe-" + forLabel + "-validation " + input.getAttribute('aria-describedby'));
   }, []);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector("#" + forLabel).addEventListener('blur', function () {
+      resetInputState();
+    });
+  }, [forwardRef]);
   return (0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames["default"])('vip-form-autocomplete-component', className),
     children: [label && !isInline && (0, _jsxRuntime.jsx)(SelectLabel, {}), (0, _jsxRuntime.jsx)("div", {
@@ -285,7 +353,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
           "aria-busy": loading,
           showAllValues: showAllValues,
           ref: forwardRef,
-          source: source || suggest,
+          source: handleSource,
           defaultValue: value,
           displayMenu: displayMenu,
           onConfirm: onValueChange,
@@ -330,6 +398,7 @@ FormAutocomplete.propTypes = {
   required: _propTypes["default"].bool,
   searchIcon: _propTypes["default"].bool,
   showAllValues: _propTypes["default"].bool,
+  resetOnBlur: _propTypes["default"].bool,
   source: _propTypes["default"].func,
   value: _propTypes["default"].string,
   dropdownArrow: _propTypes["default"].node

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

@@ -3,7 +3,11 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.WithSearchIcon = exports.WithLoading = exports.WithErrors = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.WithCustomArrow = exports.WithArrow = exports.Inline = exports.Default = void 0;
+exports["default"] = exports.WithSlowSearch = exports.WithSearchIcon = exports.WithLoading = exports.WithErrors = exports.WithDefaultValue = exports.WithDebounce = exports.WithCustomMessages = exports.WithCustomArrow = exports.WithArrow = exports.Inline = exports.Default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -41,6 +45,12 @@ var _default = {
       control: {
         type: 'text'
       }
+    },
+    resetOnBlur: {
+      options: [false, true],
+      control: {
+        type: 'boolean'
+      }
     }
   }
 };
@@ -57,7 +67,9 @@ var options = [{
 }];
 var args = {
   label: 'Label',
-  options: options
+  options: options,
+  resetOnBlur: false,
+  placeholder: 'Start typing...'
 }; // eslint-disable-next-line react/prop-types
 
 var DefaultComponent = function DefaultComponent(_ref) {
@@ -94,61 +106,30 @@ var DefaultComponent = function DefaultComponent(_ref) {
   });
 };
 
-var Default = function Default() {
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
-      required: true
-    }, args, {
-      placeholder: "Start typing..."
-    }))
-  });
-};
-
+var Default = DefaultComponent.bind({});
 exports.Default = Default;
-
-var Inline = function Inline() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    isInline: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+Default.args = args;
+var Inline = DefaultComponent.bind({});
 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))
-  });
-};
-
+Inline.args = (0, _extends2["default"])({}, Default.args, {
+  isInline: true
+});
+var WithDefaultValue = DefaultComponent.bind({});
 exports.WithDefaultValue = WithDefaultValue;
-
-var WithSearchIcon = function WithSearchIcon() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    searchIcon: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithDefaultValue.args = (0, _extends2["default"])({}, Default.args, {
+  value: 'Chocolate'
+});
+var WithSearchIcon = DefaultComponent.bind({});
 exports.WithSearchIcon = WithSearchIcon;
-
-var WithLoading = function WithLoading() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    loading: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithSearchIcon.args = (0, _extends2["default"])({}, Default.args, {
+  searchIcon: true,
+  placeholder: 'Type to search'
+});
+var WithLoading = DefaultComponent.bind({});
 exports.WithLoading = WithLoading;
+WithLoading.args = (0, _extends2["default"])({}, Default.args, {
+  loading: true
+});
 
 var WithDebounce = function WithDebounce() {
   var _useState2 = (0, _react.useState)(null),
@@ -168,65 +149,80 @@ var WithDebounce = function WithDebounce() {
 };
 
 exports.WithDebounce = WithDebounce;
+var WithSlowSearch = DefaultComponent.bind({});
+exports.WithSlowSearch = WithSlowSearch;
+WithSlowSearch.args = (0, _extends2["default"])({}, Default.args, {
+  label: 'Label',
+  autoFilter: false,
+  minLength: 3,
+  required: true,
+  source: function () {
+    var _source = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee(query, populateResults) {
+      return _regenerator["default"].wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              if (!query || query.length >= 3) {
+                setTimeout(function () {
+                  var filteredResults = args.options.map(function (option) {
+                    return option.label;
+                  }).filter(function (result) {
+                    return result.toLowerCase().indexOf(query == null ? void 0 : query.toLowerCase()) !== -1;
+                  });
+                  populateResults(filteredResults);
+                }, 1000);
+              }
+
+            case 1:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
 
-var WithCustomMessages = function WithCustomMessages() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    noOptionsMessage: function noOptionsMessage() {
-      return 'No data';
-    },
-    placeholder: 'Type to search'
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
+    function source(_x, _x2) {
+      return _source.apply(this, arguments);
+    }
 
+    return source;
+  }()
+});
+var WithCustomMessages = DefaultComponent.bind({});
 exports.WithCustomMessages = WithCustomMessages;
-
-var WithErrors = function WithErrors() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    hasError: true,
-    errorMessage: 'Please select a value.',
-    required: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithCustomMessages.args = (0, _extends2["default"])({}, Default.args, {
+  noOptionsMessage: function noOptionsMessage() {
+    return 'No data';
+  },
+  placeholder: 'Type to search'
+});
+var WithErrors = DefaultComponent.bind({});
 exports.WithErrors = WithErrors;
-
-var WithArrow = function WithArrow() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    showAllValues: true
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithErrors.args = (0, _extends2["default"])({}, Default.args, {
+  hasError: true,
+  errorMessage: 'Please select a value.',
+  required: true
+});
+var WithArrow = DefaultComponent.bind({});
 exports.WithArrow = WithArrow;
-
-var WithCustomArrow = function WithCustomArrow() {
-  var customArgs = (0, _extends2["default"])({}, args, {
-    showAllValues: true,
-    // eslint-disable-next-line react/display-name
-    dropdownArrow: function dropdownArrow() {
-      return (0, _jsxRuntime.jsx)("span", {
-        sx: {
-          position: 'absolute',
-          top: '2px',
-          right: '10px',
-          pointerEvents: 'none'
-        },
-        children: "\uD83D\uDC47"
-      });
-    }
-  });
-  return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: (0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({}, customArgs))
-  });
-};
-
+WithArrow.args = (0, _extends2["default"])({}, Default.args, {
+  showAllValues: true
+});
+var WithCustomArrow = DefaultComponent.bind({});
 exports.WithCustomArrow = WithCustomArrow;
+WithCustomArrow.args = (0, _extends2["default"])({}, Default.args, {
+  showAllValues: true,
+  // eslint-disable-next-line react/display-name
+  dropdownArrow: function dropdownArrow() {
+    return (0, _jsxRuntime.jsx)("span", {
+      sx: {
+        position: 'absolute',
+        top: '2px',
+        right: '10px',
+        pointerEvents: 'none'
+      },
+      children: "\uD83D\uDC47"
+    });
+  }
+});
 WithCustomArrow.displayName = 'WithCustomArrow';

package/build/system/Table/TableCell.js

@@ -36,13 +36,12 @@ var TableCell = function TableCell(_ref) {
   }, (0, _extends2["default"])({}, rest, {
     sx: sx
   }), {
-    children: head ? (0, _jsxRuntime.jsx)(_.Heading, {
-      variant: "caps",
-      as: "div",
+    children: head ? (0, _jsxRuntime.jsx)("span", {
       sx: {
         mb: 0,
-        color: head ? 'table.heading' : 'table.text',
-        fontSize: 2
+        color: 'table.heading',
+        fontSize: 2,
+        fontWeight: 'bold'
       },
       children: children
     }) : children

package/build/system/Wizard/Wizard.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,11 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
-var _excluded = ["steps", "activeStep", "variant", "completed", "className"];
+var _excluded = ["steps", "activeStep", "variant", "completed", "className", "titleAutofocus"];
+
+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 Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRef) {
   var steps = _ref.steps,
@@ -31,7 +35,17 @@ var Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
       completed = _ref$completed === void 0 ? [] : _ref$completed,
       _ref$className = _ref.className,
       className = _ref$className === void 0 ? null : _ref$className,
+      _ref$titleAutofocus = _ref.titleAutofocus,
+      titleAutofocus = _ref$titleAutofocus === void 0 ? false : _ref$titleAutofocus,
       props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  var didMount = (0, _react.useRef)(false); // didMount helps us to track the initial render, so we can focus the title only subsequent renders
+  // to avoid stealing the focus from the page we're in.
+
+  (0, _react.useLayoutEffect)(function () {
+    if (!didMount.current) {
+      didMount.current = true;
+    }
+  }, [activeStep]);
   return (0, _jsxRuntime.jsx)(_.Box, {
     className: (0, _classnames["default"])('vip-wizard-component', className),
     ref: forwardRef,
@@ -73,6 +87,7 @@ var Wizard = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwardRe
         subTitle: subTitle,
         title: title,
         titleVariant: titleVariant,
+        shouldFocusTitle: titleAutofocus && didMount.current,
         children: children
       }, index);
     })
@@ -86,5 +101,6 @@ Wizard.propTypes = {
   activeStep: _propTypes["default"].number,
   variant: _propTypes["default"].string,
   completed: _propTypes["default"].array,
-  className: _propTypes["default"].any
+  className: _propTypes["default"].any,
+  titleAutofocus: _propTypes["default"].bool
 };

package/build/system/Wizard/Wizard.stories.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports["default"] = exports.Default = exports.CustomTitle = void 0;
+exports["default"] = exports.WithTitleAutoFocus = exports.Default = exports.CustomTitle = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -84,6 +84,82 @@ var Default = function Default() {
 
 exports.Default = Default;
 
+var WithTitleAutoFocus = function WithTitleAutoFocus() {
+  var _React$useState = _react["default"].useState(0),
+      activeStep = _React$useState[0],
+      setActiveStep = _React$useState[1];
+
+  var _React$useState2 = _react["default"].useState(true),
+      autoFocus = _React$useState2[0],
+      setAutoFocus = _React$useState2[1];
+
+  var steps = [{
+    title: 'Choose Domain',
+    titleVariant: 'h2',
+    children: (0, _jsxRuntime.jsxs)(_.Box, {
+      children: [(0, _jsxRuntime.jsx)(_.Label, {
+        children: "Domain"
+      }), (0, _jsxRuntime.jsx)(_.Input, {
+        placeholder: "yourdomain.com"
+      }), (0, _jsxRuntime.jsx)(_.Button, {
+        sx: {
+          mt: 3
+        },
+        onClick: function onClick() {
+          return setActiveStep(1);
+        },
+        children: "Continue"
+      })]
+    })
+  }, {
+    title: 'Configure DNS',
+    titleVariant: 'h2',
+    children: (0, _jsxRuntime.jsxs)(_.Box, {
+      children: [(0, _jsxRuntime.jsx)(_.Label, {
+        children: "DNS"
+      }), (0, _jsxRuntime.jsx)(_.Button, {
+        sx: {
+          mt: 3
+        },
+        onClick: function onClick() {
+          return setActiveStep(0);
+        },
+        children: "back"
+      })]
+    })
+  }];
+  return (0, _jsxRuntime.jsxs)(_react["default"].Fragment, {
+    children: [(0, _jsxRuntime.jsx)(_.Box, {
+      mt: 4,
+      children: (0, _jsxRuntime.jsx)(_.Wizard, {
+        activeStep: activeStep,
+        steps: steps,
+        titleAutofocus: autoFocus,
+        className: "vip-wizard-xyz"
+      })
+    }), (0, _jsxRuntime.jsx)(_.Box, {
+      mt: 4,
+      children: (0, _jsxRuntime.jsx)(_.Form.Select, {
+        id: "wizard-autofocus",
+        label: "Autofocus status",
+        value: autoFocus,
+        onChange: function onChange(e) {
+          return setAutoFocus(e.value);
+        },
+        options: [{
+          value: true,
+          label: 'On'
+        }, {
+          value: false,
+          label: 'Off'
+        }]
+      })
+    })]
+  });
+};
+
+exports.WithTitleAutoFocus = WithTitleAutoFocus;
+
 var CustomTitle = function CustomTitle() {
   var steps = [{
     title: (0, _jsxRuntime.jsx)("h3", {

package/build/system/Wizard/WizardStep.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.WizardStep = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _md = require("react-icons/md");
 
@@ -15,6 +15,10 @@ var _ = require("..");
 
 var _jsxRuntime = require("theme-ui/jsx-runtime");
 
+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; }
+
 /** @jsxImportSource theme-ui */
 
 /**
@@ -32,8 +36,12 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
       children = _ref.children,
       active = _ref.active,
       order = _ref.order,
+      shouldFocusTitle = _ref.shouldFocusTitle,
       _ref$titleVariant = _ref.titleVariant,
       titleVariant = _ref$titleVariant === void 0 ? 'h3' : _ref$titleVariant;
+
+  var titleRef = _react["default"].useRef(null);
+
   var borderLeftColor = 'border';
 
   if (complete) {
@@ -50,6 +58,11 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
     color = 'heading';
   }
 
+  (0, _react.useLayoutEffect)(function () {
+    if (active && titleRef != null && titleRef.current && shouldFocusTitle) {
+      titleRef.current.focus();
+    }
+  }, [active, shouldFocusTitle]);
   return (0, _jsxRuntime.jsxs)(_.Card, {
     as: "section",
     sx: {
@@ -81,6 +94,8 @@ var WizardStep = /*#__PURE__*/_react["default"].forwardRef(function (_ref, forwa
         fontSize: 2,
         fontWeight: active ? 'bold' : 'normal'
       },
+      ref: titleRef,
+      tabIndex: shouldFocusTitle ? -1 : undefined,
       children: [(0, _jsxRuntime.jsx)(_md.MdCheckCircle, {
         "aria-hidden": "true",
         sx: {
@@ -118,5 +133,6 @@ WizardStep.propTypes = {
   order: _propTypes["default"].number.isRequired,
   subTitle: _propTypes["default"].node,
   title: _propTypes["default"].node,
-  titleVariant: _propTypes["default"].string
+  titleVariant: _propTypes["default"].string,
+  shouldFocusTitle: _propTypes["default"].bool
 };

package/package.json

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

package/src/system/NewForm/FormAutocomplete.js

@@ -29,6 +29,7 @@ const baseBorderTextColors = {
 
 const defaultStyles = {
 	width: '100%',
+	mb: 2,
 	...baseBorderTextColors,
 
 	py: 0,
@@ -87,8 +88,8 @@ const inlineStyles = {
 };
 
 const searchIconStyles = {
-	'& .autocomplete__input.autocomplete__input--show-all-values': {
-		paddingLeft: '30px',
+	'& .autocomplete__input.autocomplete__input': {
+		paddingLeft: 4,
 	},
 };
 
@@ -118,6 +119,7 @@ const FormAutocomplete = React.forwardRef(
 			required,
 			searchIcon,
 			showAllValues = false,
+			resetOnBlur = false, // resets the input value to the selection if the input is blurred. Returns null if selection is empty
 			source,
 			value,
 			...props
@@ -125,7 +127,13 @@ const FormAutocomplete = React.forwardRef(
 		forwardRef
 	) => {
 		const [ isDirty, setIsDirty ] = useState( false );
+
+		const [ selectedValue, setSelectedValue ] = useState( value || '' );
+		const [ inputQuery, setInputQuery ] = useState( value );
 		let debounceTimeout;
+		if ( ! forwardRef ) {
+			forwardRef = React.createRef();
+		}
 
 		const SelectLabel = () => (
 			<Label required={ required } htmlFor={ forLabel }>
@@ -154,21 +162,49 @@ const FormAutocomplete = React.forwardRef(
 				getAllOptions.find( option => `${ optionLabel( option ) }` === `${ inputValue }` ),
 			[ getAllOptions, optionLabel ]
 		);
-
+		/**
+		 * Reset the underlying component state to show the selected value
+		 */
+		const resetInputState = useCallback( () => {
+			if ( resetOnBlur && forwardRef?.current && inputQuery !== selectedValue ) {
+				// resets the input field to the selected value or the empty string
+				forwardRef.current.setState( {
+					...forwardRef.current.state,
+					query: inputQuery && inputQuery !== '' ? selectedValue ?? '' : '', // selected value should not be null or the component will crash
+				} );
+			}
+		}, [ forwardRef ] );
+		// sets the internal state variables and calls the onChange callback
+		const setAutocompleteState = inputValue => {
+			setInputQuery( inputValue );
+			setSelectedValue( inputValue );
+			onChange( getOptionByLabel( inputValue ), inputValue );
+			setIsDirty( false );
+		};
+		// this method gets called when we confirm the selection via click/enter
 		const onValueChange = useCallback(
 			inputValue => {
 				if ( inputValue ) {
-					onChange( getOptionByLabel( inputValue ), inputValue );
+					setAutocompleteState( inputValue );
+				} else if ( resetOnBlur && inputQuery !== selectedValue ) {
+					if ( inputQuery && inputQuery !== '' ) {
+						// reset the content to the selected value
+						setAutocompleteState( selectedValue );
+					} else {
+						// reset the content to empty if there's no match
+						setAutocompleteState( null );
+					}
 				}
 			},
-			[ onChange, getOptionByLabel ]
+			[ onChange, getOptionByLabel, setAutocompleteState ]
 		);
 
 		const handleTypeChange = useCallback(
-			query =>
-				options.filter(
+			query => {
+				return options.filter(
 					option => optionLabel( option ).toLowerCase().indexOf( query.toLowerCase() ) >= 0
-				),
+				);
+			},
 			[ options ]
 		);
 
@@ -178,6 +214,7 @@ const FormAutocomplete = React.forwardRef(
 					return onInputChange( query );
 				}
 				clearTimeout( debounceTimeout );
+
 				if ( ! query.length || query.length >= minLength ) {
 					debounceTimeout = setTimeout( () => {
 						onInputChange( query );
@@ -200,7 +237,15 @@ const FormAutocomplete = React.forwardRef(
 			},
 			[ autoFilter, isDirty, onInputChange, options ]
 		);
-
+		// internal function to save the inputQuery
+		const handleSource = ( query, populateResults ) => {
+			setInputQuery( query );
+			// user function to fetch the results has the precedence
+			if ( source ) {
+				return source( query, populateResults );
+			}
+			return suggest( query, populateResults );
+		};
 		useEffect( () => {
 			global.document
 				.querySelector( '.autocomplete__input' )
@@ -224,8 +269,13 @@ const FormAutocomplete = React.forwardRef(
 		}, [ required ] );
 
 		useEffect( () => {
-			global.document.querySelector( `#${ forLabel }` ).addEventListener( 'keydown', () => {
-				setIsDirty( true );
+			global.document.querySelector( `#${ forLabel }` ).addEventListener( 'keydown', e => {
+				// pressed escape, we want to reset the status
+				if ( e.keyCode === 27 && resetOnBlur ) {
+					resetInputState();
+				} else {
+					setIsDirty( true );
+				}
 			} );
 		}, [ setIsDirty ] );
 
@@ -239,6 +289,11 @@ const FormAutocomplete = React.forwardRef(
 			);
 		}, [] );
 
+		useEffect( () => {
+			global.document.querySelector( `#${ forLabel }` ).addEventListener( 'blur', () => {
+				resetInputState();
+			} );
+		}, [ forwardRef ] );
 		return (
 			<div className={ classNames( 'vip-form-autocomplete-component', className ) }>
 				{ label && ! isInline && <SelectLabel /> }
@@ -261,7 +316,7 @@ const FormAutocomplete = React.forwardRef(
 							aria-busy={ loading }
 							showAllValues={ showAllValues }
 							ref={ forwardRef }
-							source={ source || suggest }
+							source={ handleSource }
 							defaultValue={ value }
 							displayMenu={ displayMenu }
 							onConfirm={ onValueChange }
@@ -306,6 +361,7 @@ FormAutocomplete.propTypes = {
 	required: PropTypes.bool,
 	searchIcon: PropTypes.bool,
 	showAllValues: PropTypes.bool,
+	resetOnBlur: PropTypes.bool,
 	source: PropTypes.func,
 	value: PropTypes.string,
 	dropdownArrow: PropTypes.node,

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

@@ -17,6 +17,10 @@ export default {
 			type: { name: 'string', required: false },
 			control: { type: 'text' },
 		},
+		resetOnBlur: {
+			options: [ false, true ],
+			control: { type: 'boolean' },
+		},
 	},
 };
 
@@ -29,6 +33,8 @@ const options = [
 const args = {
 	label: 'Label',
 	options,
+	resetOnBlur: false,
+	placeholder: 'Start typing...',
 };
 
 // eslint-disable-next-line react/prop-types
@@ -53,64 +59,30 @@ const DefaultComponent = ( { label = 'Label', width = 250, ...rest } ) => {
 	);
 };
 
-export const Default = () => {
-	return (
-		<>
-			<DefaultComponent required { ...args } placeholder="Start typing..." />
-		</>
-	);
-};
+export const Default = DefaultComponent.bind( {} );
+Default.args = args;
 
-export const Inline = () => {
-	const customArgs = {
-		...args,
-		isInline: true,
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...customArgs } />
-		</>
-	);
+export const Inline = DefaultComponent.bind( {} );
+Inline.args = {
+	...Default.args,
+	isInline: true,
 };
 
-export const WithDefaultValue = () => {
-	const customArgs = {
-		...args,
-		value: 'Chocolate',
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...customArgs } />
-		</>
-	);
+export const WithDefaultValue = DefaultComponent.bind( {} );
+WithDefaultValue.args = {
+	...Default.args,
+	value: 'Chocolate',
 };
-
-export const WithSearchIcon = () => {
-	const customArgs = {
-		...args,
-		searchIcon: true,
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...customArgs } />
-		</>
-	);
+export const WithSearchIcon = DefaultComponent.bind( {} );
+WithSearchIcon.args = {
+	...Default.args,
+	searchIcon: true,
+	placeholder: 'Type to search',
 };
-
-export const WithLoading = () => {
-	const customArgs = {
-		...args,
-		loading: true,
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...customArgs } />
-		</>
-	);
+export const WithLoading = DefaultComponent.bind( {} );
+WithLoading.args = {
+	...Default.args,
+	loading: true,
 };
 
 export const WithDebounce = () => {
@@ -131,65 +103,52 @@ export const WithDebounce = () => {
 		</>
 	);
 };
-
-export const WithCustomMessages = () => {
-	const customArgs = {
-		...args,
-		noOptionsMessage: () => 'No data',
-		placeholder: 'Type to search',
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...customArgs } />
-		</>
-	);
+export const WithSlowSearch = DefaultComponent.bind( {} );
+WithSlowSearch.args = {
+	...Default.args,
+	label: 'Label',
+	autoFilter: false,
+	minLength: 3,
+	required: true,
+	source: async ( query, populateResults ) => {
+		if ( ! query || query.length >= 3 ) {
+			setTimeout( () => {
+				const filteredResults = args.options
+					.map( option => option.label )
+					.filter( result => result.toLowerCase().indexOf( query?.toLowerCase() ) !== -1 );
+				populateResults( filteredResults );
+			}, 1000 );
+		}
+	},
 };
-export const WithErrors = () => {
-	const customArgs = {
-		...args,
-		hasError: true,
-		errorMessage: 'Please select a value.',
-		required: true,
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...customArgs } />
-		</>
-	);
+export const WithCustomMessages = DefaultComponent.bind( {} );
+WithCustomMessages.args = {
+	...Default.args,
+	noOptionsMessage: () => 'No data',
+	placeholder: 'Type to search',
 };
-
-export const WithArrow = () => {
-	const customArgs = {
-		...args,
-		showAllValues: true,
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...customArgs } />
-		</>
-	);
+export const WithErrors = DefaultComponent.bind( {} );
+WithErrors.args = {
+	...Default.args,
+	hasError: true,
+	errorMessage: 'Please select a value.',
+	required: true,
 };
 
-export const WithCustomArrow = () => {
-	const customArgs = {
-		...args,
-		showAllValues: true,
-		// eslint-disable-next-line react/display-name
-		dropdownArrow: () => (
-			<span sx={ { position: 'absolute', top: '2px', right: '10px', pointerEvents: 'none' } }>
-				👇
-			</span>
-		),
-	};
-
-	return (
-		<>
-			<DefaultComponent { ...customArgs } />
-		</>
-	);
+export const WithArrow = DefaultComponent.bind( {} );
+WithArrow.args = {
+	...Default.args,
+	showAllValues: true,
+};
+export const WithCustomArrow = DefaultComponent.bind( {} );
+WithCustomArrow.args = {
+	...Default.args,
+	showAllValues: true,
+	// eslint-disable-next-line react/display-name
+	dropdownArrow: () => (
+		<span sx={ { position: 'absolute', top: '2px', right: '10px', pointerEvents: 'none' } }>
+			👇
+		</span>
+	),
 };
-
 WithCustomArrow.displayName = 'WithCustomArrow';

package/src/system/Table/TableCell.js

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 /**
  * Internal dependencies
  */
-import { Heading, Box } from '../';
+import { Box } from '../';
 
 const TableCell = ( { head, children, ...rest } ) => {
 	const sx = {
@@ -27,13 +27,9 @@ const TableCell = ( { head, children, ...rest } ) => {
 	return (
 		<Box as={ head ? 'th' : 'td' } { ...{ ...rest, sx } }>
 			{ head ? (
-				<Heading
-					variant="caps"
-					as="div"
-					sx={ { mb: 0, color: head ? 'table.heading' : 'table.text', fontSize: 2 } }
-				>
+				<span sx={ { mb: 0, color: 'table.heading', fontSize: 2, fontWeight: 'bold' } }>
 					{ children }
-				</Heading>
+				</span>
 			) : (
 				children
 			) }

package/src/system/Wizard/Wizard.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useLayoutEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { MdArrowForward } from 'react-icons/md';
@@ -14,7 +14,26 @@ import { MdArrowForward } from 'react-icons/md';
 import { Box, WizardStep, Flex, WizardStepHorizontal } from '..';
 
 const Wizard = React.forwardRef(
-	( { steps, activeStep, variant, completed = [], className = null, ...props }, forwardRef ) => {
+	(
+		{
+			steps,
+			activeStep,
+			variant,
+			completed = [],
+			className = null,
+			titleAutofocus = false,
+			...props
+		},
+		forwardRef
+	) => {
+		const didMount = useRef( false );
+		// didMount helps us to track the initial render, so we can focus the title only subsequent renders
+		// to avoid stealing the focus from the page we're in.
+		useLayoutEffect( () => {
+			if ( ! didMount.current ) {
+				didMount.current = true;
+			}
+		}, [ activeStep ] );
 		return (
 			<Box className={ classNames( 'vip-wizard-component', className ) } ref={ forwardRef }>
 				{ variant === 'horizontal' ? (
@@ -52,6 +71,7 @@ const Wizard = React.forwardRef(
 							subTitle={ subTitle }
 							title={ title }
 							titleVariant={ titleVariant }
+							shouldFocusTitle={ titleAutofocus && didMount.current }
 						>
 							{ children }
 						</WizardStep>
@@ -70,6 +90,7 @@ Wizard.propTypes = {
 	variant: PropTypes.string,
 	completed: PropTypes.array,
 	className: PropTypes.any,
+	titleAutofocus: PropTypes.bool,
 };
 
 export { Wizard };

package/src/system/Wizard/Wizard.stories.jsx

@@ -59,6 +59,62 @@ export const Default = () => {
 	);
 };
 
+export const WithTitleAutoFocus = () => {
+	const [ activeStep, setActiveStep ] = React.useState( 0 );
+	const [ autoFocus, setAutoFocus ] = React.useState( true );
+	const steps = [
+		{
+			title: 'Choose Domain',
+			titleVariant: 'h2',
+			children: (
+				<Box>
+					<Label>Domain</Label>
+					<Input placeholder="yourdomain.com" />
+					<Button sx={ { mt: 3 } } onClick={ () => setActiveStep( 1 ) }>
+						Continue
+					</Button>
+				</Box>
+			),
+		},
+		{
+			title: 'Configure DNS',
+			titleVariant: 'h2',
+			children: (
+				<Box>
+					<Label>DNS</Label>
+					<Button sx={ { mt: 3 } } onClick={ () => setActiveStep( 0 ) }>
+						back
+					</Button>
+				</Box>
+			),
+		},
+	];
+	return (
+		<React.Fragment>
+			<Box mt={ 4 }>
+				<Wizard
+					activeStep={ activeStep }
+					steps={ steps }
+					titleAutofocus={ autoFocus }
+					className="vip-wizard-xyz"
+				/>
+			</Box>
+			<Box mt={ 4 }>
+				<Form.Select
+					id="wizard-autofocus"
+					label="Autofocus status"
+					value={ autoFocus }
+					onChange={ e => setAutoFocus( e.value ) }
+					options={ [
+						{ value: true, label: 'On' },
+						{ value: false, label: 'Off' },
+					] }
+				/>
+			</Box>
+		</React.Fragment>
+	);
+};
+
 export const CustomTitle = () => {
 	const steps = [
 		{

package/src/system/Wizard/WizardStep.js

@@ -3,7 +3,7 @@
 /**
  * External dependencies
  */
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import { MdCheckCircle } from 'react-icons/md';
 import PropTypes from 'prop-types';
 
@@ -14,9 +14,20 @@ import { Card, Heading, Text, Flex } from '..';
 
 const WizardStep = React.forwardRef(
 	(
-		{ title, subTitle, complete = false, children, active, order, titleVariant = 'h3' },
+		{
+			title,
+			subTitle,
+			complete = false,
+			children,
+			active,
+			order,
+			shouldFocusTitle,
+			titleVariant = 'h3',
+		},
 		forwardRef
 	) => {
+		const titleRef = React.useRef( null );
+
 		let borderLeftColor = 'border';
 
 		if ( complete ) {
@@ -32,7 +43,11 @@ const WizardStep = React.forwardRef(
 		} else if ( active ) {
 			color = 'heading';
 		}
-
+		useLayoutEffect( () => {
+			if ( active && titleRef?.current && shouldFocusTitle ) {
+				titleRef.current.focus();
+			}
+		}, [ active, shouldFocusTitle ] );
 		return (
 			<Card
 				as="section"
@@ -67,6 +82,8 @@ const WizardStep = React.forwardRef(
 							fontSize: 2,
 							fontWeight: active ? 'bold' : 'normal',
 						} }
+						ref={ titleRef }
+						tabIndex={ shouldFocusTitle ? -1 : undefined }
 					>
 						<MdCheckCircle
 							aria-hidden="true"
@@ -102,6 +119,7 @@ WizardStep.propTypes = {
 	subTitle: PropTypes.node,
 	title: PropTypes.node,
 	titleVariant: PropTypes.string,
+	shouldFocusTitle: PropTypes.bool,
 };
 
 export { WizardStep };