@automattic/vip-design-system 0.32.1 → 0.33.0

package/build/system/Form/RadioBoxGroup.js

@@ -49,6 +49,7 @@ var RadioOption = function RadioOption(_ref) {
 
   var ref = _react["default"].useRef(null);
 
+  var describedById = "input-radio-box-" + forLabel + "-description";
   return (0, _jsxRuntime.jsxs)("div", {
     id: "o" + forLabel,
     sx: (0, _extends2["default"])({
@@ -88,7 +89,8 @@ var RadioOption = function RadioOption(_ref) {
       sx: {
         mr: 3,
         mt: 3
-      }
+      },
+      "aria-describedby": describedById
     }, restOption)), (0, _jsxRuntime.jsxs)("div", {
       sx: {
         mb: 0,
@@ -108,6 +110,7 @@ var RadioOption = function RadioOption(_ref) {
           fontSize: 1,
           display: 'block'
         },
+        id: describedById,
         children: description
       })]
     })]

package/build/system/NewForm/FormAutocomplete.js

@@ -338,6 +338,7 @@ var FormAutocomplete = /*#__PURE__*/_react["default"].forwardRef(function (_ref,
   }, []);
   (0, _react.useEffect)(function () {
     global.document.querySelector("#" + forLabel).addEventListener('blur', function () {
+      setInputQuery(global.document.querySelector("#" + forLabel).value);
       resetInputState();
     });
   }, [forwardRef]);

package/build/system/NewForm/FormAutocompleteMultiselect.js

@@ -0,0 +1,521 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.FormAutocompleteMultiselect = void 0;
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react2 = _interopRequireDefault(require("accessible-autocomplete/react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _FormSelectContent = require("./FormSelectContent");
+
+var _FormSelectArrow = require("./FormSelectArrow");
+
+var _Label = require("../Form/Label");
+
+var _FormSelectSearch = require("./FormSelectSearch");
+
+var _FormSelectLoading = require("./FormSelectLoading");
+
+var _Input = require("../Form/Input.styles");
+
+var _Form = require("../Form");
+
+var _ = require("../");
+
+var _ScreenReaderText = _interopRequireDefault(require("../ScreenReaderText"));
+
+var _md = require("react-icons/md");
+
+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"];
+
+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 baseBorderTextColors = (0, _extends2["default"])({}, _Input.baseControlBorderStyle, {
+  backgroundColor: _Input.inputBaseBackground,
+  color: _Input.inputBaseText,
+  borderRadius: 1
+});
+var defaultStyles = (0, _extends2["default"])({
+  width: '100%'
+}, baseBorderTextColors, {
+  py: 0,
+  minHeight: '36px',
+  lineHeight: '36px',
+  '&:focus': function focus(theme) {
+    return theme.outline;
+  },
+  '&:focus-visible': function focusVisible(theme) {
+    return theme.outline;
+  },
+  '&:focus-within': function focusWithin(theme) {
+    return theme.outline;
+  },
+  '&.autocomplete__input--focused': function autocomplete__inputFocused(theme) {
+    return theme.outline;
+  },
+  '& .autocomplete__input': {
+    width: '100%',
+    paddingLeft: 3,
+    py: 0,
+    borderWidth: 0,
+    color: 'text',
+    minHeight: '36px',
+    lineHeight: '36px',
+    '&:focus': {
+      outlineWidth: 0,
+      boxShadow: 'none'
+    },
+    '&: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'
+    },
+    '&::placeholder': {
+      color: 'input.text.placeholder',
+      opacity: 1
+    }
+  },
+  '& .autocomplete__menu': (0, _extends2["default"])({}, baseBorderTextColors),
+  '& .autocomplete__hint, & .autocomplete__input, & .autocomplete__option': {
+    fontSize: 'inherit'
+  },
+  '& .autocomplete__wrapper': {
+    width: '100%'
+  },
+  '& .autocomplete__option': {
+    borderColor: _Input.baseControlBorderStyle.borderColor
+  },
+  '& .autocomplete__option--odd': {
+    bg: 'backgroundSecondary'
+  },
+  '& .autocomplete__option:hover, & .autocomplete__option--focused': {
+    bg: 'midnight',
+    borderColor: 'midnight'
+  },
+  '& .autocomplete__input--show-all-values': {
+    paddingRight: 0
+  },
+  '& .autocomplete__hint': {
+    border: 'none',
+    paddingLeft: 3,
+    minHeight: '27px',
+    lineHeight: '27px'
+  }
+});
+var inlineStyles = {
+  borderWidth: 0
+};
+var searchIconStyles = {
+  '& .autocomplete__input.autocomplete__input': {
+    paddingLeft: 4
+  }
+};
+
+var DefaultArrow = function DefaultArrow(config) {
+  return (0, _jsxRuntime.jsx)(_FormSelectArrow.FormSelectArrow, {
+    classNames: config.className
+  });
+};
+
+var AddSelectionStatus = function AddSelectionStatus(_ref) {
+  var status = _ref.status;
+  return (0, _jsxRuntime.jsx)("div", {
+    sx: {
+      border: '0',
+      clip: 'rect(0 0 0 0)',
+      height: '1px',
+      marginBottom: '-1px',
+      marginRight: '-1px',
+      overflow: 'hidden',
+      padding: '0',
+      position: 'absolute',
+      whiteSpace: 'nowrap',
+      width: '1px'
+    },
+    id: "vip-autocompletemultiselect-status",
+    role: "status",
+    "aria-atomic": "true",
+    "aria-live": "assertive",
+    children: status
+  });
+};
+
+AddSelectionStatus.propTypes = {
+  status: _propTypes["default"].string.isRequired
+};
+
+var SelectedOptions = function SelectedOptions(_ref2) {
+  var index = _ref2.index,
+      option = _ref2.option,
+      unselectValue = _ref2.unselectValue;
+  return (0, _jsxRuntime.jsx)("div", {
+    sx: {
+      mr: 1,
+      maxWidth: '100%'
+    },
+    children: (0, _jsxRuntime.jsxs)(_.Button, {
+      variant: "tertiary",
+      onClick: function onClick(e) {
+        e.preventDefault();
+        unselectValue(option, index);
+      },
+      sx: {
+        mt: 1,
+        fontSize: 1,
+        maxWidth: '100%'
+      },
+      children: [(0, _jsxRuntime.jsx)("div", {
+        sx: {
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap'
+        },
+        "aria-hidden": "true",
+        children: option
+      }), (0, _jsxRuntime.jsxs)(_ScreenReaderText["default"], {
+        children: [option + " selected. Press Space or Enter to remove.", index === 0 ? ' Press Shift Tab to add more.' : '']
+      }), (0, _jsxRuntime.jsx)(_md.MdClose, {
+        sx: {
+          ml: 2
+        }
+      })]
+    })
+  }, index);
+};
+
+SelectedOptions.propTypes = {
+  index: _propTypes["default"].number.isRequired,
+  option: _propTypes["default"].string.isRequired,
+  unselectValue: _propTypes["default"].func.isRequired
+};
+
+var FormAutocompleteMultiselect = /*#__PURE__*/_react["default"].forwardRef(function (_ref3, forwardRef) {
+  var _ref3$autoFilter = _ref3.autoFilter,
+      autoFilter = _ref3$autoFilter === void 0 ? true : _ref3$autoFilter,
+      className = _ref3.className,
+      _ref3$debounce = _ref3.debounce,
+      debounce = _ref3$debounce === void 0 ? 0 : _ref3$debounce,
+      _ref3$displayMenu = _ref3.displayMenu,
+      displayMenu = _ref3$displayMenu === void 0 ? 'overlay' : _ref3$displayMenu,
+      _ref3$dropdownArrow = _ref3.dropdownArrow,
+      dropdownArrow = _ref3$dropdownArrow === void 0 ? DefaultArrow : _ref3$dropdownArrow,
+      errorMessage = _ref3.errorMessage,
+      _ref3$forLabel = _ref3.forLabel,
+      forLabel = _ref3$forLabel === void 0 ? 'vip-autocompletemultiselect' : _ref3$forLabel,
+      getOptionLabel = _ref3.getOptionLabel,
+      getOptionValue = _ref3.getOptionValue,
+      hasError = _ref3.hasError,
+      isInline = _ref3.isInline,
+      label = _ref3.label,
+      loading = _ref3.loading,
+      _ref3$minLength = _ref3.minLength,
+      minLength = _ref3$minLength === void 0 ? 0 : _ref3$minLength,
+      _ref3$noOptionsMessag = _ref3.noOptionsMessage,
+      noOptionsMessage = _ref3$noOptionsMessag === void 0 ? function () {
+    return 'No results found. Type to search.';
+  } : _ref3$noOptionsMessag,
+      _ref3$onChange = _ref3.onChange,
+      onChange = _ref3$onChange === void 0 ? function () {} : _ref3$onChange,
+      onInputChange = _ref3.onInputChange,
+      _ref3$options = _ref3.options,
+      options = _ref3$options === void 0 ? [] : _ref3$options,
+      required = _ref3.required,
+      searchIcon = _ref3.searchIcon,
+      _ref3$showAllValues = _ref3.showAllValues,
+      showAllValues = _ref3$showAllValues === void 0 ? false : _ref3$showAllValues,
+      source = _ref3.source,
+      value = _ref3.value,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref3, _excluded);
+  var OPTION_ACTION = {
+    ADD: 'add',
+    REMOVE: 'remove',
+    NONE: 'none'
+  };
+
+  var _useState = (0, _react.useState)(false),
+      isDirty = _useState[0],
+      setIsDirty = _useState[1];
+
+  var _useState2 = (0, _react.useState)([]),
+      selectedOptions = _useState2[0],
+      setSelectedOptions = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(''),
+      addStatus = _useState3[0],
+      setAddStatus = _useState3[1];
+
+  var _useState4 = (0, _react.useState)({
+    action: OPTION_ACTION.NONE,
+    option: null,
+    index: -1
+  }),
+      currentOption = _useState4[0],
+      setCurrentOption = _useState4[1];
+
+  var debounceTimeout;
+  forwardRef = forwardRef || /*#__PURE__*/_react["default"].createRef();
+  /**
+   * Reset the underlying component state to show the selected value
+   */
+
+  var resetInputState = (0, _react.useCallback)(function () {
+    var _forwardRef;
+
+    if ((_forwardRef = forwardRef) != null && _forwardRef.current) {
+      // resets the input field to the selected value or the empty string
+      forwardRef.current.setState((0, _extends2["default"])({}, forwardRef.current.state, {
+        query: '' // selected value should not be null or the component will crash
+
+      }));
+    }
+  }, [forwardRef]);
+
+  var SelectLabel = function SelectLabel() {
+    return (0, _jsxRuntime.jsx)(_Label.Label, {
+      required: required,
+      htmlFor: forLabel,
+      children: label
+    });
+  };
+
+  var inlineLabel = !!(isInline && label);
+  var optionLabel = (0, _react.useCallback)(function (option) {
+    return getOptionLabel ? getOptionLabel(option) : option.label;
+  }, [getOptionLabel]);
+  var getOptionByLabel = (0, _react.useCallback)(function (inputValue) {
+    return getAllOptions.find(function (option) {
+      return "" + optionLabel(option) === "" + inputValue;
+    });
+  }, [getAllOptions, optionLabel]);
+  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 onValueChange = (0, _react.useCallback)(function (inputValue) {
+    if (inputValue && !selectedOptions.includes(inputValue)) {
+      setCurrentOption({
+        action: OPTION_ACTION.ADD,
+        option: inputValue
+      });
+      setSelectedOptions([].concat(selectedOptions, [inputValue]));
+    }
+  }, [getOptionByLabel, setSelectedOptions, selectedOptions, setCurrentOption]);
+  var unselectValue = (0, _react.useCallback)(function (inputValue, index) {
+    if (inputValue) {
+      setSelectedOptions(selectedOptions.filter(function (option) {
+        return ((option == null ? void 0 : option.label) || option) !== inputValue;
+      }));
+      setCurrentOption({
+        action: OPTION_ACTION.REMOVE,
+        option: inputValue,
+        index: index
+      });
+    }
+  }, [getOptionByLabel, setSelectedOptions, selectedOptions, setCurrentOption]);
+  var handleTypeChange = (0, _react.useCallback)(function (query) {
+    return options.filter(function (option) {
+      return optionLabel(option).toLowerCase().indexOf(query.toLowerCase()) >= 0;
+    });
+  }, [options]);
+  var handleInputChange = (0, _react.useCallback)(function (query) {
+    if (!debounce) {
+      return onInputChange(query);
+    }
+
+    clearTimeout(debounceTimeout);
+
+    if (!query.length || query.length >= minLength) {
+      debounceTimeout = setTimeout(function () {
+        onInputChange(query);
+      }, debounce);
+    }
+  }, [onInputChange, debounce, minLength]);
+  var suggest = (0, _react.useCallback)(function (query, populateResults) {
+    var _data;
+
+    var data = options;
+
+    if (isDirty && onInputChange) {
+      handleInputChange(query);
+    }
+
+    if (isDirty && autoFilter) {
+      data = handleTypeChange(query);
+    }
+
+    var optionForDisplay = (_data = data) == null ? void 0 : _data.map(function (option) {
+      return optionLabel(option);
+    });
+    populateResults(optionForDisplay.filter(function (option) {
+      return !selectedOptions.includes(option);
+    }));
+  }, [autoFilter, isDirty, onInputChange, options, selectedOptions]);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector('.autocomplete__input').removeAttribute('aria-activedescendant');
+  }, []);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector('.autocomplete__menu').setAttribute('aria-label', label + " list");
+  }, [label]);
+  (0, _react.useEffect)(function () {
+    var input = global.document.querySelector("#" + forLabel);
+
+    if (!input || required === undefined) {
+      return;
+    }
+
+    input.setAttribute('aria-required', required);
+  }, [required]);
+  (0, _react.useEffect)(function () {
+    global.document.querySelector("#" + forLabel).addEventListener('keydown', function () {
+      setIsDirty(true);
+    });
+  }, [setIsDirty]); // For accessibility, we need to add the error message to the aria-describedby attribute
+
+  (0, _react.useEffect)(function () {
+    var input = global.document.querySelector("#" + forLabel);
+    input == null ? void 0 : input.setAttribute('aria-describedby', "describe-" + forLabel + "-validation " + input.getAttribute('aria-describedby'));
+  }, []); // Update selectedOption and reset the input state on select input change
+
+  (0, _react.useEffect)(function () {
+    onChange(selectedOptions, selectedOptions.map(function (option) {
+      return (option == null ? void 0 : option.label) || option;
+    }));
+    resetInputState();
+  }, [selectedOptions]); // Update the select status for screen readers
+
+  (0, _react.useEffect)(function () {
+    if (currentOption.action === OPTION_ACTION.ADD) {
+      setAddStatus(currentOption.option + " added to the list.");
+      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();
+    } 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();
+    }
+  }, [currentOption]);
+  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", {
+      sx: (0, _extends2["default"])({}, defaultStyles, isInline && inlineStyles, searchIcon && searchIconStyles),
+      children: (0, _jsxRuntime.jsxs)(_FormSelectContent.FormSelectContent, {
+        isInline: inlineLabel,
+        label: inlineLabel ? (0, _jsxRuntime.jsx)(SelectLabel, {}) : null,
+        children: [searchIcon && (0, _jsxRuntime.jsx)(_FormSelectSearch.FormSelectSearch, {}), (0, _jsxRuntime.jsx)(_react2["default"], (0, _extends2["default"])({
+          id: forLabel,
+          "aria-busy": loading,
+          showAllValues: showAllValues,
+          ref: forwardRef,
+          source: source || suggest,
+          defaultValue: value,
+          displayMenu: displayMenu,
+          onConfirm: onValueChange,
+          tNoResults: noOptionsMessage,
+          required: required,
+          dropdownArrow: showAllValues ? dropdownArrow : function () {
+            return '';
+          },
+          confirmOnBlur: false
+        }, props)), addStatus && (0, _jsxRuntime.jsx)(AddSelectionStatus, {
+          status: addStatus
+        }), loading && (0, _jsxRuntime.jsx)(_FormSelectLoading.FormSelectLoading, {
+          sx: {
+            right: showAllValues ? 40 : 10
+          }
+        })]
+      })
+    }), (0, _jsxRuntime.jsxs)(_.Flex, {
+      sx: {
+        mt: 2,
+        justifyContent: 'space-between'
+      },
+      children: [hasError && errorMessage && (0, _jsxRuntime.jsx)(_Form.Validation, {
+        isValid: false,
+        describedId: forLabel,
+        children: errorMessage
+      }), (0, _jsxRuntime.jsxs)("div", {
+        sx: {
+          fontSize: 1
+        },
+        children: [selectedOptions.length, " item", selectedOptions.length > 1 ? 's' : '', " selected"]
+      })]
+    }), (0, _jsxRuntime.jsx)("div", {
+      sx: {
+        display: 'inline-flex',
+        flexWrap: 'wrap',
+        maxWidth: '100%'
+      },
+      children: selectedOptions && selectedOptions.map(function (option, idx) {
+        return (0, _jsxRuntime.jsx)(SelectedOptions, {
+          index: idx,
+          option: option,
+          unselectValue: unselectValue
+        }, idx);
+      })
+    })]
+  });
+});
+
+exports.FormAutocompleteMultiselect = FormAutocompleteMultiselect;
+FormAutocompleteMultiselect.propTypes = {
+  autoFilter: _propTypes["default"].bool,
+  className: _propTypes["default"].any,
+  debounce: _propTypes["default"].number,
+  displayMenu: _propTypes["default"].string,
+  errorMessage: _propTypes["default"].string,
+  forLabel: _propTypes["default"].string,
+  getOptionLabel: _propTypes["default"].func,
+  getOptionValue: _propTypes["default"].func,
+  hasError: _propTypes["default"].bool,
+  isInline: _propTypes["default"].bool,
+  label: _propTypes["default"].string,
+  loading: _propTypes["default"].bool,
+  minLength: _propTypes["default"].number,
+  noOptionsMessage: _propTypes["default"].func,
+  onChange: _propTypes["default"].func,
+  onInputChange: _propTypes["default"].func,
+  options: _propTypes["default"].array,
+  required: _propTypes["default"].bool,
+  searchIcon: _propTypes["default"].bool,
+  showAllValues: _propTypes["default"].bool,
+  source: _propTypes["default"].func,
+  value: _propTypes["default"].string,
+  dropdownArrow: _propTypes["default"].node
+};
+FormAutocompleteMultiselect.displayName = 'FormAutocompleteMultiselect';