@canonical/react-components 4.4.1 → 4.5.1

package/dist/components/MultiSelect/MultiSelect.d.ts

@@ -24,12 +24,21 @@ export type MultiSelectProps = {
     renderItem?: (item: MultiSelectItem) => ReactNode;
     dropdownHeader?: ReactNode;
     dropdownFooter?: ReactNode;
+    footerClassName?: string;
+    inputClassName?: string;
+    dropdownClassName?: string;
+    emptyState?: ReactNode;
+    emptyMessage?: string;
     showDropdownFooter?: boolean;
     variant?: "condensed" | "search";
     scrollOverflow?: boolean;
     isSortedAlphabetically?: boolean;
     hasSelectedItemsFirst?: boolean;
     id?: string;
+    onSearchChange?: (value: string) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    searchButtonType?: "submit" | "button";
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;
@@ -43,6 +52,10 @@ type MultiSelectDropdownProps = {
     onDeselectItem?: (item: MultiSelectItem) => void;
     onSelectItem?: (item: MultiSelectItem) => void;
     footer?: ReactNode;
+    footerClassName?: string;
+    dropdownClassName?: string;
+    emptyState?: ReactNode;
+    emptyMessage?: string;
     groupFn?: GroupFn;
     sortFn?: SortFn;
     hasSelectedItemsFirst?: boolean;

package/dist/components/MultiSelect/MultiSelect.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 require("./MultiSelect.scss");
 var _index = require("../../index");
 var _FadeInDown = require("./FadeInDown");
-const _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "sortFn", "groupFn", "hasSelectedItemsFirst"];
+const _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "dropdownClassName", "footerClassName", "emptyState", "emptyMessage", "sortFn", "groupFn", "hasSelectedItemsFirst"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -57,6 +57,10 @@ const MultiSelectDropdown = _ref2 => {
       onDeselectItem,
       isOpen,
       footer,
+      dropdownClassName,
+      footerClassName,
+      emptyState,
+      emptyMessage,
       sortFn = sortAlphabetically,
       groupFn = getGroupedItems,
       hasSelectedItemsFirst = true
@@ -72,6 +76,7 @@ const MultiSelectDropdown = _ref2 => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
   const hasGroup = (0, _react.useMemo)(() => items.some(item => item.group), [items]);
+  const hasItems = items.length > 0;
   const groupedItems = (0, _react.useMemo)(() => hasGroup ? groupFn(items) : [{
     group: "Ungrouped",
     items
@@ -98,9 +103,9 @@ const MultiSelectDropdown = _ref2 => {
   return /*#__PURE__*/_react.default.createElement(_FadeInDown.FadeInDown, {
     isVisible: isOpen
   }, /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: "multi-select__dropdown",
+    className: (0, _classnames.default)("multi-select__dropdown", dropdownClassName),
     role: "listbox"
-  }, props), header ? header : null, groupedItems.map(_ref3 => {
+  }, props), header ? header : null, hasItems ? groupedItems.map(_ref3 => {
     let {
       group,
       items
@@ -124,8 +129,10 @@ const MultiSelectDropdown = _ref2 => {
       onChange: handleOnChange,
       key: item.value
     })))));
-  }), footer ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "multi-select__footer"
+  }) : emptyState !== null && emptyState !== void 0 ? emptyState : emptyMessage ? /*#__PURE__*/_react.default.createElement("p", {
+    className: "multi-select__empty-state"
+  }, emptyMessage) : null, footer ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("multi-select__footer", footerClassName)
   }, footer) : null));
 };
 
@@ -158,6 +165,10 @@ MultiSelectDropdown.propTypes = {
   onDeselectItem: _propTypes.default.func,
   onSelectItem: _propTypes.default.func,
   footer: _propTypes.default.node,
+  footerClassName: _propTypes.default.string,
+  dropdownClassName: _propTypes.default.string,
+  emptyState: _propTypes.default.node,
+  emptyMessage: _propTypes.default.string,
   groupFn: _propTypes.default.func,
   sortFn: _propTypes.default.any,
   hasSelectedItemsFirst: _propTypes.default.bool
@@ -177,21 +188,48 @@ const MultiSelect = _ref4 => {
     disabledItems = [],
     dropdownHeader,
     dropdownFooter,
+    footerClassName,
+    dropdownClassName,
+    inputClassName,
+    emptyState,
+    emptyMessage,
+    searchButtonType = "submit",
     showDropdownFooter = true,
     variant = "search",
     scrollOverflow = false,
     isSortedAlphabetically = true,
     hasSelectedItemsFirst = true,
     id,
+    onSearchChange,
+    onOpen,
+    onClose,
     help,
     helpClassName
   } = _ref4;
   const buttonRef = (0, _react.useRef)(null);
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
   const [filter, setFilter] = (0, _react.useState)("");
+  const handleSetDropdownOpen = newState => {
+    if (newState && !isDropdownOpen) {
+      onOpen === null || onOpen === void 0 || onOpen();
+    } else if (!newState && isDropdownOpen) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+    setIsDropdownOpen(newState);
+  };
   const [internalSelectedItems, setInternalSelectedItems] = (0, _react.useState)([]);
   const selectedItems = externalSelectedItems || internalSelectedItems;
   const helpId = (0, _react.useId)();
+  const updateFilter = value => {
+    setFilter(value);
+    onSearchChange === null || onSearchChange === void 0 || onSearchChange(value);
+  };
+  const resetSearch = () => {
+    if (!filter.length) {
+      return;
+    }
+    updateFilter("");
+  };
   const updateItems = newItems => {
     const uniqueItems = Array.from(new Set(newItems));
     setInternalSelectedItems(uniqueItems);
@@ -222,12 +260,12 @@ const MultiSelect = _ref4 => {
     className: "multi-select",
     onToggleMenu: isOpen => {
       if (!isOpen) {
-        setFilter("");
+        resetSearch();
       }
       // Handle syncing the state when toggling the menu from within the
       // contextual menu component e.g. when clicking outside.
       if (isOpen !== isDropdownOpen) {
-        setIsDropdownOpen(isOpen);
+        handleSetDropdownOpen(isOpen);
       }
     },
     position: "left",
@@ -242,16 +280,18 @@ const MultiSelect = _ref4 => {
       disabled: disabled,
       autoComplete: "off",
       onChange: value => {
-        setFilter(value);
+        updateFilter(value);
         // reopen if dropdown has been closed via ESC
-        setIsDropdownOpen(true);
+        handleSetDropdownOpen(true);
       },
-      onFocus: () => setIsDropdownOpen(true),
+      onClear: resetSearch,
+      onFocus: () => handleSetDropdownOpen(true),
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
       required: required,
       type: "text",
       value: filter,
-      className: "multi-select__input"
+      searchButtonType: searchButtonType,
+      className: (0, _classnames.default)("multi-select__input", inputClassName)
     }) : /*#__PURE__*/_react.default.createElement("button", {
       role: "combobox",
       type: "button",
@@ -260,7 +300,7 @@ const MultiSelect = _ref4 => {
       "aria-expanded": isDropdownOpen,
       className: "multi-select__select-button",
       onClick: () => {
-        setIsDropdownOpen(!isDropdownOpen);
+        handleSetDropdownOpen(!isDropdownOpen);
       },
       onMouseDown: event => {
         // If the dropdown is open when this button is clicked the
@@ -295,6 +335,10 @@ const MultiSelect = _ref4 => {
     onSelectItem: onSelectItem,
     onDeselectItem: onDeselectItem,
     footer: footer,
+    footerClassName: footerClassName,
+    dropdownClassName: dropdownClassName,
+    emptyState: emptyState,
+    emptyMessage: emptyMessage,
     sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
     hasSelectedItemsFirst: hasSelectedItemsFirst
   })), help && /*#__PURE__*/_react.default.createElement("p", {
@@ -333,10 +377,12 @@ MultiSelect.propTypes = {
   renderItem: _propTypes.default.func,
   dropdownHeader: _propTypes.default.node,
   dropdownFooter: _propTypes.default.node,
+  footerClassName: _propTypes.default.string,
+  inputClassName: _propTypes.default.string,
+  dropdownClassName: _propTypes.default.string,
+  emptyState: _propTypes.default.node,
+  emptyMessage: _propTypes.default.string,
   showDropdownFooter: _propTypes.default.bool,
   variant: _propTypes.default.oneOf(["condensed", "search"]),
-  scrollOverflow: _propTypes.default.bool,
-  isSortedAlphabetically: _propTypes.default.bool,
-  hasSelectedItemsFirst: _propTypes.default.bool,
-  id: _propTypes.default.string
+  scrollOverflow: _propTypes.default.bool
 };

package/dist/components/MultiSelect/MultiSelect.scss

@@ -93,6 +93,12 @@ $dropdown-max-height: 20rem;
   }
 }
 
+.multi-select__empty-state {
+  color: $colors--theme--text-muted;
+  margin: 0;
+  padding: $spv--small $sph--large;
+}
+
 .multi-select__dropdown-button {
   border: 0;
   margin-bottom: 0;

package/dist/components/MultiSelect/MultiSelect.stories.d.ts

@@ -9,3 +9,6 @@ export declare const WithDisabledItems: Story;
 export declare const WithoutSorting: Story;
 export declare const Disabled: Story;
 export declare const HelpText: Story;
+export declare const FormikCallbacksAndEmptyState: Story;
+export declare const EmptyMessage: Story;
+export declare const EmptyStateNode: Story;

package/dist/components/MultiSelect/MultiSelect.stories.js

@@ -3,8 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutSorting = exports.WithDisabledItems = exports.SearchExample = exports.HelpText = exports.Disabled = exports.CondensedExample = void 0;
+exports.default = exports.WithoutSorting = exports.WithDisabledItems = exports.SearchExample = exports.HelpText = exports.FormikCallbacksAndEmptyState = exports.EmptyStateNode = exports.EmptyMessage = exports.Disabled = exports.CondensedExample = void 0;
 var _react = _interopRequireWildcard(require("react"));
+var _formik = require("formik");
+var _index = require("../../index");
 var _MultiSelect = require("./MultiSelect");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -27,6 +29,23 @@ const meta = {
   parameters: {}
 };
 var _default = exports.default = meta;
+const groupedItems = [{
+  label: "Almond",
+  value: "almond",
+  group: "Nuts"
+}, {
+  label: "Cashew",
+  value: "cashew",
+  group: "Nuts"
+}, {
+  label: "Mango",
+  value: "mango",
+  group: "Fruit"
+}, {
+  label: "Peach",
+  value: "peach",
+  group: "Fruit"
+}];
 const CondensedExample = exports.CondensedExample = {
   args: {
     items: [...Array.from({
@@ -119,4 +138,75 @@ const HelpText = exports.HelpText = {
   args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
     help: /*#__PURE__*/_react.default.createElement("span", null, "This is a help text, that should appear underneath the component.")
   })
+};
+const FormikCallbacksAndEmptyStateTemplate = () => {
+  const [selectedItems, setSelectedItems] = (0, _react.useState)([]);
+  const [events, setEvents] = (0, _react.useState)([]);
+  const addEvent = eventName => {
+    setEvents(previousEvents => [eventName, ...previousEvents].slice(0, 6));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      maxWidth: "28rem"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_formik.Formik, {
+    initialValues: {
+      ingredients: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/_react.default.createElement(_index.FormikField, {
+    name: "ingredients",
+    component: _MultiSelect.MultiSelect,
+    label: "Ingredients",
+    variant: "search",
+    placeholder: "Search ingredients",
+    items: groupedItems,
+    selectedItems: selectedItems,
+    onItemsUpdate: setSelectedItems,
+    onSearchChange: value => {
+      addEvent("onSearchChange(\"".concat(value, "\")"));
+    },
+    onOpen: () => addEvent("onOpen()"),
+    onClose: () => addEvent("onClose()"),
+    emptyMessage: "No ingredients found"
+  })), /*#__PURE__*/_react.default.createElement("p", {
+    style: {
+      marginBottom: "0.5rem"
+    }
+  }, "Callback log:"), /*#__PURE__*/_react.default.createElement("ul", {
+    style: {
+      margin: 0,
+      paddingLeft: "1.25rem"
+    }
+  }, events.map((event, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: "".concat(event, "-").concat(index)
+  }, event))));
+};
+const FormikCallbacksAndEmptyState = exports.FormikCallbacksAndEmptyState = {
+  render: FormikCallbacksAndEmptyStateTemplate
+};
+const EmptyMessage = exports.EmptyMessage = {
+  args: {
+    variant: "search",
+    items: groupedItems,
+    emptyMessage: "No matching ingredients.",
+    placeholder: "Try typing kiwi"
+  }
+};
+const EmptyStateNode = exports.EmptyStateNode = {
+  args: {
+    variant: "search",
+    items: groupedItems,
+    placeholder: "Try typing kiwi",
+    emptyState: /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-align--center",
+      style: {
+        padding: "0.75rem 1rem"
+      }
+    }, /*#__PURE__*/_react.default.createElement("strong", null, "No ingredient matches."), /*#__PURE__*/_react.default.createElement("p", {
+      style: {
+        margin: "0.25rem 0 0"
+      }
+    }, "Use a broader term."))
+  }
 };

package/dist/components/SearchBox/SearchBox.d.ts

@@ -37,6 +37,10 @@ export type Props = PropsWithSpread<{
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * Whether the search button should be a button or submit type.
+     */
+    searchButtonType?: "submit" | "button";
     /**
      * Whether the search input should lose focus when searching.
      */

package/dist/components/SearchBox/SearchBox.js

@@ -7,7 +7,7 @@ exports.default = exports.Label = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-const _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
+const _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "searchButtonType", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -34,6 +34,7 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
       onChange,
       onSearch,
       onClear,
+      searchButtonType = "submit",
       placeholder = "Search",
       shouldBlurOnSearch = true,
       shouldRefocusAfterReset,
@@ -102,7 +103,8 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
   }, Label.Clear)), /*#__PURE__*/_react.default.createElement("button", {
     className: "p-search-box__button",
     disabled: disabled,
-    onClick: triggerSearch
+    onClick: triggerSearch,
+    type: searchButtonType
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "search"
   }, Label.Search)));

package/dist/esm/components/MultiSelect/MultiSelect.d.ts

@@ -24,12 +24,21 @@ export type MultiSelectProps = {
     renderItem?: (item: MultiSelectItem) => ReactNode;
     dropdownHeader?: ReactNode;
     dropdownFooter?: ReactNode;
+    footerClassName?: string;
+    inputClassName?: string;
+    dropdownClassName?: string;
+    emptyState?: ReactNode;
+    emptyMessage?: string;
     showDropdownFooter?: boolean;
     variant?: "condensed" | "search";
     scrollOverflow?: boolean;
     isSortedAlphabetically?: boolean;
     hasSelectedItemsFirst?: boolean;
     id?: string;
+    onSearchChange?: (value: string) => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    searchButtonType?: "submit" | "button";
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;
@@ -43,6 +52,10 @@ type MultiSelectDropdownProps = {
     onDeselectItem?: (item: MultiSelectItem) => void;
     onSelectItem?: (item: MultiSelectItem) => void;
     footer?: ReactNode;
+    footerClassName?: string;
+    dropdownClassName?: string;
+    emptyState?: ReactNode;
+    emptyMessage?: string;
     groupFn?: GroupFn;
     sortFn?: SortFn;
     hasSelectedItemsFirst?: boolean;

package/dist/esm/components/MultiSelect/MultiSelect.js

@@ -1,5 +1,5 @@
 import _pt from "prop-types";
-var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "sortFn", "groupFn", "hasSelectedItemsFirst"];
+var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "dropdownClassName", "footerClassName", "emptyState", "emptyMessage", "sortFn", "groupFn", "hasSelectedItemsFirst"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -49,6 +49,10 @@ export var MultiSelectDropdown = _ref2 => {
       onDeselectItem,
       isOpen,
       footer,
+      dropdownClassName,
+      footerClassName,
+      emptyState,
+      emptyMessage,
       sortFn = sortAlphabetically,
       groupFn = getGroupedItems,
       hasSelectedItemsFirst = true
@@ -64,6 +68,7 @@ export var MultiSelectDropdown = _ref2 => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
   var hasGroup = useMemo(() => items.some(item => item.group), [items]);
+  var hasItems = items.length > 0;
   var groupedItems = useMemo(() => hasGroup ? groupFn(items) : [{
     group: "Ungrouped",
     items
@@ -90,9 +95,9 @@ export var MultiSelectDropdown = _ref2 => {
   return /*#__PURE__*/React.createElement(FadeInDown, {
     isVisible: isOpen
   }, /*#__PURE__*/React.createElement("div", _extends({
-    className: "multi-select__dropdown",
+    className: classNames("multi-select__dropdown", dropdownClassName),
     role: "listbox"
-  }, props), header ? header : null, groupedItems.map(_ref3 => {
+  }, props), header ? header : null, hasItems ? groupedItems.map(_ref3 => {
     var {
       group,
       items
@@ -116,8 +121,10 @@ export var MultiSelectDropdown = _ref2 => {
       onChange: handleOnChange,
       key: item.value
     })))));
-  }), footer ? /*#__PURE__*/React.createElement("div", {
-    className: "multi-select__footer"
+  }) : emptyState !== null && emptyState !== void 0 ? emptyState : emptyMessage ? /*#__PURE__*/React.createElement("p", {
+    className: "multi-select__empty-state"
+  }, emptyMessage) : null, footer ? /*#__PURE__*/React.createElement("div", {
+    className: classNames("multi-select__footer", footerClassName)
   }, footer) : null));
 };
 
@@ -149,6 +156,10 @@ MultiSelectDropdown.propTypes = {
   onDeselectItem: _pt.func,
   onSelectItem: _pt.func,
   footer: _pt.node,
+  footerClassName: _pt.string,
+  dropdownClassName: _pt.string,
+  emptyState: _pt.node,
+  emptyMessage: _pt.string,
   groupFn: _pt.func,
   sortFn: _pt.any,
   hasSelectedItemsFirst: _pt.bool
@@ -168,21 +179,48 @@ export var MultiSelect = _ref4 => {
     disabledItems = [],
     dropdownHeader,
     dropdownFooter,
+    footerClassName,
+    dropdownClassName,
+    inputClassName,
+    emptyState,
+    emptyMessage,
+    searchButtonType = "submit",
     showDropdownFooter = true,
     variant = "search",
     scrollOverflow = false,
     isSortedAlphabetically = true,
     hasSelectedItemsFirst = true,
     id,
+    onSearchChange,
+    onOpen,
+    onClose,
     help,
     helpClassName
   } = _ref4;
   var buttonRef = useRef(null);
   var [isDropdownOpen, setIsDropdownOpen] = useState(false);
   var [filter, setFilter] = useState("");
+  var handleSetDropdownOpen = newState => {
+    if (newState && !isDropdownOpen) {
+      onOpen === null || onOpen === void 0 || onOpen();
+    } else if (!newState && isDropdownOpen) {
+      onClose === null || onClose === void 0 || onClose();
+    }
+    setIsDropdownOpen(newState);
+  };
   var [internalSelectedItems, setInternalSelectedItems] = useState([]);
   var selectedItems = externalSelectedItems || internalSelectedItems;
   var helpId = useId();
+  var updateFilter = value => {
+    setFilter(value);
+    onSearchChange === null || onSearchChange === void 0 || onSearchChange(value);
+  };
+  var resetSearch = () => {
+    if (!filter.length) {
+      return;
+    }
+    updateFilter("");
+  };
   var updateItems = newItems => {
     var uniqueItems = Array.from(new Set(newItems));
     setInternalSelectedItems(uniqueItems);
@@ -213,12 +251,12 @@ export var MultiSelect = _ref4 => {
     className: "multi-select",
     onToggleMenu: isOpen => {
       if (!isOpen) {
-        setFilter("");
+        resetSearch();
       }
       // Handle syncing the state when toggling the menu from within the
       // contextual menu component e.g. when clicking outside.
       if (isOpen !== isDropdownOpen) {
-        setIsDropdownOpen(isOpen);
+        handleSetDropdownOpen(isOpen);
       }
     },
     position: "left",
@@ -233,16 +271,18 @@ export var MultiSelect = _ref4 => {
       disabled: disabled,
       autoComplete: "off",
       onChange: value => {
-        setFilter(value);
+        updateFilter(value);
         // reopen if dropdown has been closed via ESC
-        setIsDropdownOpen(true);
+        handleSetDropdownOpen(true);
       },
-      onFocus: () => setIsDropdownOpen(true),
+      onClear: resetSearch,
+      onFocus: () => handleSetDropdownOpen(true),
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
       required: required,
       type: "text",
       value: filter,
-      className: "multi-select__input"
+      searchButtonType: searchButtonType,
+      className: classNames("multi-select__input", inputClassName)
     }) : /*#__PURE__*/React.createElement("button", {
       role: "combobox",
       type: "button",
@@ -251,7 +291,7 @@ export var MultiSelect = _ref4 => {
       "aria-expanded": isDropdownOpen,
       className: "multi-select__select-button",
       onClick: () => {
-        setIsDropdownOpen(!isDropdownOpen);
+        handleSetDropdownOpen(!isDropdownOpen);
       },
       onMouseDown: event => {
         // If the dropdown is open when this button is clicked the
@@ -286,6 +326,10 @@ export var MultiSelect = _ref4 => {
     onSelectItem: onSelectItem,
     onDeselectItem: onDeselectItem,
     footer: footer,
+    footerClassName: footerClassName,
+    dropdownClassName: dropdownClassName,
+    emptyState: emptyState,
+    emptyMessage: emptyMessage,
     sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
     hasSelectedItemsFirst: hasSelectedItemsFirst
   })), help && /*#__PURE__*/React.createElement("p", {
@@ -323,10 +367,12 @@ MultiSelect.propTypes = {
   renderItem: _pt.func,
   dropdownHeader: _pt.node,
   dropdownFooter: _pt.node,
+  footerClassName: _pt.string,
+  inputClassName: _pt.string,
+  dropdownClassName: _pt.string,
+  emptyState: _pt.node,
+  emptyMessage: _pt.string,
   showDropdownFooter: _pt.bool,
   variant: _pt.oneOf(["condensed", "search"]),
-  scrollOverflow: _pt.bool,
-  isSortedAlphabetically: _pt.bool,
-  hasSelectedItemsFirst: _pt.bool,
-  id: _pt.string
+  scrollOverflow: _pt.bool
 };

package/dist/esm/components/MultiSelect/MultiSelect.scss

@@ -93,6 +93,12 @@ $dropdown-max-height: 20rem;
   }
 }
 
+.multi-select__empty-state {
+  color: $colors--theme--text-muted;
+  margin: 0;
+  padding: $spv--small $sph--large;
+}
+
 .multi-select__dropdown-button {
   border: 0;
   margin-bottom: 0;

package/dist/esm/components/MultiSelect/MultiSelect.stories.d.ts

@@ -9,3 +9,6 @@ export declare const WithDisabledItems: Story;
 export declare const WithoutSorting: Story;
 export declare const Disabled: Story;
 export declare const HelpText: Story;
+export declare const FormikCallbacksAndEmptyState: Story;
+export declare const EmptyMessage: Story;
+export declare const EmptyStateNode: Story;

package/dist/esm/components/MultiSelect/MultiSelect.stories.js

@@ -6,6 +6,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import React from "react";
 import { useState } from "react";
+import { Formik } from "formik";
+import { FormikField } from "../../index";
 import { MultiSelect } from "./MultiSelect";
 var Template = props => {
   var [selectedItems, setSelectedItems] = useState(props.selectedItems || []);
@@ -21,6 +23,23 @@ var meta = {
   parameters: {}
 };
 export default meta;
+var groupedItems = [{
+  label: "Almond",
+  value: "almond",
+  group: "Nuts"
+}, {
+  label: "Cashew",
+  value: "cashew",
+  group: "Nuts"
+}, {
+  label: "Mango",
+  value: "mango",
+  group: "Fruit"
+}, {
+  label: "Peach",
+  value: "peach",
+  group: "Fruit"
+}];
 export var CondensedExample = {
   args: {
     items: [...Array.from({
@@ -113,4 +132,75 @@ export var HelpText = {
   args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
     help: /*#__PURE__*/React.createElement("span", null, "This is a help text, that should appear underneath the component.")
   })
+};
+var FormikCallbacksAndEmptyStateTemplate = () => {
+  var [selectedItems, setSelectedItems] = useState([]);
+  var [events, setEvents] = useState([]);
+  var addEvent = eventName => {
+    setEvents(previousEvents => [eventName, ...previousEvents].slice(0, 6));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      maxWidth: "28rem"
+    }
+  }, /*#__PURE__*/React.createElement(Formik, {
+    initialValues: {
+      ingredients: ""
+    },
+    onSubmit: () => {}
+  }, /*#__PURE__*/React.createElement(FormikField, {
+    name: "ingredients",
+    component: MultiSelect,
+    label: "Ingredients",
+    variant: "search",
+    placeholder: "Search ingredients",
+    items: groupedItems,
+    selectedItems: selectedItems,
+    onItemsUpdate: setSelectedItems,
+    onSearchChange: value => {
+      addEvent("onSearchChange(\"".concat(value, "\")"));
+    },
+    onOpen: () => addEvent("onOpen()"),
+    onClose: () => addEvent("onClose()"),
+    emptyMessage: "No ingredients found"
+  })), /*#__PURE__*/React.createElement("p", {
+    style: {
+      marginBottom: "0.5rem"
+    }
+  }, "Callback log:"), /*#__PURE__*/React.createElement("ul", {
+    style: {
+      margin: 0,
+      paddingLeft: "1.25rem"
+    }
+  }, events.map((event, index) => /*#__PURE__*/React.createElement("li", {
+    key: "".concat(event, "-").concat(index)
+  }, event))));
+};
+export var FormikCallbacksAndEmptyState = {
+  render: FormikCallbacksAndEmptyStateTemplate
+};
+export var EmptyMessage = {
+  args: {
+    variant: "search",
+    items: groupedItems,
+    emptyMessage: "No matching ingredients.",
+    placeholder: "Try typing kiwi"
+  }
+};
+export var EmptyStateNode = {
+  args: {
+    variant: "search",
+    items: groupedItems,
+    placeholder: "Try typing kiwi",
+    emptyState: /*#__PURE__*/React.createElement("div", {
+      className: "u-align--center",
+      style: {
+        padding: "0.75rem 1rem"
+      }
+    }, /*#__PURE__*/React.createElement("strong", null, "No ingredient matches."), /*#__PURE__*/React.createElement("p", {
+      style: {
+        margin: "0.25rem 0 0"
+      }
+    }, "Use a broader term."))
+  }
 };

package/dist/esm/components/SearchBox/SearchBox.d.ts

@@ -37,6 +37,10 @@ export type Props = PropsWithSpread<{
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * Whether the search button should be a button or submit type.
+     */
+    searchButtonType?: "submit" | "button";
     /**
      * Whether the search input should lose focus when searching.
      */

package/dist/esm/components/SearchBox/SearchBox.js

@@ -1,4 +1,4 @@
-var _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
+var _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "searchButtonType", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -26,6 +26,7 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
       onChange: _onChange,
       onSearch,
       onClear,
+      searchButtonType = "submit",
       placeholder = "Search",
       shouldBlurOnSearch = true,
       shouldRefocusAfterReset,
@@ -94,7 +95,8 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
   }, Label.Clear)), /*#__PURE__*/React.createElement("button", {
     className: "p-search-box__button",
     disabled: disabled,
-    onClick: triggerSearch
+    onClick: triggerSearch,
+    type: searchButtonType
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "search"
   }, Label.Search)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "4.4.1",
+  "version": "4.5.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {