@canonical/react-components 1.0.0 → 1.2.0

package/dist/components/ContextualMenu/ContextualMenu.d.ts

@@ -1,17 +1,13 @@
 import React from "react";
-import type { HTMLProps } from "react";
+import type { HTMLProps, ReactNode } from "react";
 import type { ButtonProps } from "../Button";
 import type { ContextualMenuDropdownProps } from "./ContextualMenuDropdown";
 import type { MenuLink, Position } from "./ContextualMenuDropdown";
-import { ClassName, PropsWithSpread, SubComponentProps } from "../../types";
+import { ClassName, ExclusiveProps, PropsWithSpread, SubComponentProps } from "../../types";
 export declare enum Label {
     Toggle = "Toggle menu"
 }
-/**
- * The props for the ContextualMenu component.
- * @template L - The type of the link props.
- */
-export type Props<L> = PropsWithSpread<{
+export type BaseProps<L> = PropsWithSpread<{
     /**
      * Whether the menu should adjust its horizontal position to fit on the screen.
      */
@@ -44,10 +40,6 @@ export type Props<L> = PropsWithSpread<{
      * Additional props to pass to the dropdown.
      */
     dropdownProps?: SubComponentProps<ContextualMenuDropdownProps>;
-    /**
-     * Whether the toggle should display a chevron icon.
-     */
-    hasToggleIcon?: boolean;
     /**
      * A list of links to display in the menu (if the children prop is not supplied.)
      */
@@ -68,6 +60,20 @@ export type Props<L> = PropsWithSpread<{
      * Whether the dropdown should scroll if it is too long to fit on the screen.
      */
     scrollOverflow?: boolean;
+    /**
+     * Whether the menu should be visible.
+     */
+    visible?: boolean;
+}, HTMLProps<HTMLSpanElement>>;
+/**
+ * The props for the ContextualMenu component.
+ * @template L - The type of the link props.
+ */
+export type Props<L> = BaseProps<L> & ExclusiveProps<{
+    /**
+     * Whether the toggle should display a chevron icon.
+     */
+    hasToggleIcon?: boolean;
     /**
      * The appearance of the toggle button.
      */
@@ -92,15 +98,13 @@ export type Props<L> = PropsWithSpread<{
      * Additional props to pass to the toggle button.
      */
     toggleProps?: SubComponentProps<ButtonProps>;
-    /**
-     * Whether the menu should be visible.
-     */
-    visible?: boolean;
-}, HTMLProps<HTMLSpanElement>>;
+}, {
+    toggle: ReactNode;
+}>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Contextual menu](https://docs.vanillaframework.io/patterns//contextual-menu/).
  *
  * A contextual menu can be used in conjunction with any page element to provide a contextual menu.
  */
-declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
+declare const ContextualMenu: <L>({ autoAdjust, children, className, closeOnEsc, closeOnOutsideClick, constrainPanelWidth, dropdownClassName, dropdownProps, hasToggleIcon, links, onToggleMenu, position, positionNode, scrollOverflow, toggle, toggleAppearance, toggleClassName, toggleDisabled, toggleLabel, toggleLabelFirst, toggleProps, visible, ...wrapperProps }: Props<L>) => JSX.Element;
 export default ContextualMenu;

package/dist/components/ContextualMenu/ContextualMenu.js

@@ -69,6 +69,7 @@ const ContextualMenu = _ref => {
     position = "right",
     positionNode,
     scrollOverflow,
+    toggle,
     toggleAppearance,
     toggleClassName,
     toggleDisabled,
@@ -82,7 +83,6 @@ const ContextualMenu = _ref => {
   const wrapper = (0, _react.useRef)(null);
   const [positionCoords, setPositionCoords] = (0, _react.useState)();
   const [adjustedPosition, setAdjustedPosition] = (0, _react.useState)(position);
-  const hasToggle = hasToggleIcon || toggleLabel;
   (0, _react.useEffect)(() => {
     setAdjustedPosition(position);
   }, [position, autoAdjust]);
@@ -106,14 +106,15 @@ const ContextualMenu = _ref => {
     isOpen: visible,
     onOpen: () => {
       // Call the toggle callback, if supplied.
-      onToggleMenu && onToggleMenu(true);
+      onToggleMenu === null || onToggleMenu === void 0 || onToggleMenu(true);
       // When the menu opens then update the coordinates of the parent.
       updatePositionCoords();
     },
     onClose: () => {
       // Call the toggle callback, if supplied.
-      onToggleMenu && onToggleMenu(false);
-    }
+      onToggleMenu === null || onToggleMenu === void 0 || onToggleMenu(false);
+    },
+    programmaticallyOpen: true
   });
   const previousVisible = (0, _hooks.usePrevious)(visible);
   const labelNode = toggleLabel && typeof toggleLabel === "string" ? /*#__PURE__*/_react.default.createElement("span", null, toggleLabel) : /*#__PURE__*/_react.default.isValidElement(toggleLabel) ? toggleLabel : null;
@@ -166,32 +167,38 @@ const ContextualMenu = _ref => {
   }, [positionNode, updatePositionCoords]);
   (0, _hooks.useListener)(window, onResize, "resize", true, isOpen);
   (0, _hooks.useListener)(window, onScroll, "scroll", false, isOpen, true);
+  let toggleNode = null;
+  if (toggle) {
+    toggleNode = toggle;
+  } else if (hasToggleIcon || toggleLabel) {
+    toggleNode = /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+      appearance: toggleAppearance,
+      "aria-controls": id,
+      "aria-expanded": isOpen ? "true" : "false",
+      "aria-label": toggleLabel ? null : Label.Toggle,
+      "aria-pressed": isOpen ? "true" : "false",
+      "aria-haspopup": "true",
+      className: (0, _classnames.default)("p-contextual-menu__toggle", toggleClassName),
+      disabled: toggleDisabled,
+      hasIcon: hasToggleIcon,
+      onClick: evt => {
+        if (!isOpen) {
+          openPortal(evt);
+        } else {
+          closePortal(evt);
+        }
+      },
+      type: "button"
+    }, toggleProps), toggleLabelFirst ? labelNode : null, hasToggleIcon ? /*#__PURE__*/_react.default.createElement("i", {
+      className: (0, _classnames.default)("p-icon--chevron-down p-contextual-menu__indicator", {
+        "is-light": ["negative", "positive"].includes(toggleAppearance)
+      })
+    }) : null, toggleLabelFirst ? null : labelNode);
+  }
   return /*#__PURE__*/_react.default.createElement("span", _extends({
     className: contextualMenuClassName,
     ref: wrapperRef
-  }, wrapperProps), hasToggle ? /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    appearance: toggleAppearance,
-    "aria-controls": id,
-    "aria-expanded": isOpen ? "true" : "false",
-    "aria-label": toggleLabel ? null : Label.Toggle,
-    "aria-pressed": isOpen ? "true" : "false",
-    "aria-haspopup": "true",
-    className: (0, _classnames.default)("p-contextual-menu__toggle", toggleClassName),
-    disabled: toggleDisabled,
-    hasIcon: hasToggleIcon,
-    onClick: evt => {
-      if (!isOpen) {
-        openPortal(evt);
-      } else {
-        closePortal(evt);
-      }
-    },
-    type: "button"
-  }, toggleProps), toggleLabelFirst ? labelNode : null, hasToggleIcon ? /*#__PURE__*/_react.default.createElement("i", {
-    className: (0, _classnames.default)("p-icon--chevron-down p-contextual-menu__indicator", {
-      "is-light": ["negative", "positive"].includes(toggleAppearance)
-    })
-  }) : null, toggleLabelFirst ? null : labelNode) : null, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ContextualMenuDropdown.default, _extends({
+  }, wrapperProps), toggleNode, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ContextualMenuDropdown.default, _extends({
     adjustedPosition: adjustedPosition,
     autoAdjust: autoAdjust,
     handleClose: closePortal,

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -153,7 +153,7 @@ const ContextualMenuDropdown = _ref => {
     contextualMenuClassName,
     ...props
   } = _ref;
-  const dropdown = (0, _react.useRef)();
+  const dropdown = (0, _react.useRef)(null);
   const [verticalPosition, setVerticalPosition] = (0, _react.useState)("bottom");
   const [positionStyle, setPositionStyle] = (0, _react.useState)(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
   const [maxHeight, setMaxHeight] = (0, _react.useState)();
@@ -162,6 +162,7 @@ const ContextualMenuDropdown = _ref => {
     setPositionStyle(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
   }, [adjustedPosition, positionCoords, verticalPosition, constrainPanelWidth]);
   const updateVerticalPosition = (0, _react.useCallback)(() => {
+    var _dropdown$current$get;
     if (!positionNode) {
       return null;
     }
@@ -170,18 +171,18 @@ const ContextualMenuDropdown = _ref => {
       return null;
     }
     const scrollableParentRect = scrollableParent.getBoundingClientRect();
-    const rect = positionNode.getBoundingClientRect();
+    const toggleRect = positionNode.getBoundingClientRect();
 
     // Calculate the rect in relation to the scrollableParent
-    const relativeRect = {
-      top: rect.top - scrollableParentRect.top,
-      bottom: rect.bottom - scrollableParentRect.top,
-      height: rect.height
+    const relativeToScrollParentRect = {
+      top: toggleRect.top - scrollableParentRect.top,
+      bottom: toggleRect.bottom - scrollableParentRect.top
     };
-    const spaceBelow = scrollableParentRect.height - relativeRect.bottom;
-    const spaceAbove = relativeRect.top;
-    const dropdownHeight = relativeRect.height;
-    setVerticalPosition(spaceBelow >= dropdownHeight || spaceBelow > spaceAbove ? "bottom" : "top");
+    const scrollParentSpaceBelow = scrollableParentRect.height - relativeToScrollParentRect.bottom;
+    const scrollParentSpaceAbove = relativeToScrollParentRect.top;
+    const dropdownHeight = (_dropdown$current$get = dropdown.current.getBoundingClientRect().height) !== null && _dropdown$current$get !== void 0 ? _dropdown$current$get : 0;
+    const windowSpaceBelow = window.innerHeight - toggleRect.bottom;
+    setVerticalPosition(scrollParentSpaceBelow >= dropdownHeight && windowSpaceBelow >= dropdownHeight || windowSpaceBelow > scrollParentSpaceAbove ? "bottom" : "top");
   }, [positionNode]);
 
   // Update the position when the window fitment info changes.

package/dist/components/Field/Field.d.ts

@@ -51,7 +51,7 @@ export type Props = {
     /**
      * Optional class(es) to pass to the label component.
      */
-    labelClassName?: string;
+    labelClassName?: string | null;
     /**
      * Whether the label should show before the input.
      */

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

@@ -12,7 +12,10 @@ export type MultiSelectProps = {
     selectedItems?: MultiSelectItem[];
     help?: string;
     label?: string | null;
+    listSelected?: boolean;
+    onDeselectItem?: (item: MultiSelectItem) => void;
     onItemsUpdate?: (items: MultiSelectItem[]) => void;
+    onSelectItem?: (item: MultiSelectItem) => void;
     placeholder?: string;
     required?: boolean;
     items: MultiSelectItem[];
@@ -20,6 +23,7 @@ export type MultiSelectProps = {
     renderItem?: (item: MultiSelectItem) => ReactNode;
     dropdownHeader?: ReactNode;
     dropdownFooter?: ReactNode;
+    showDropdownFooter?: boolean;
     variant?: "condensed" | "search";
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
@@ -31,10 +35,11 @@ type MultiSelectDropdownProps = {
     disabledItems: MultiSelectItem[];
     header?: ReactNode;
     updateItems: (newItems: MultiSelectItem[]) => void;
+    onDeselectItem?: (item: MultiSelectItem) => void;
+    onSelectItem?: (item: MultiSelectItem) => void;
     footer?: ReactNode;
     groupFn?: GroupFn;
     sortFn?: SortFn;
-    shouldPinSelectedItems?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 declare const sortAlphabetically: (a: MultiSelectItem, b: MultiSelectItem) => number;
 declare const getGroupedItems: (items: MultiSelectItem[]) => {

package/dist/components/MultiSelect/MultiSelect.js

@@ -50,6 +50,8 @@ const MultiSelectDropdown = _ref2 => {
     disabledItems,
     header,
     updateItems,
+    onSelectItem,
+    onDeselectItem,
     isOpen,
     footer,
     sortFn = sortAlphabetically,
@@ -82,6 +84,11 @@ const MultiSelectDropdown = _ref2 => {
       var _selectedItems$filter;
       const newSelectedItems = checked ? [...selectedItems, foundItem] : (_selectedItems$filter = selectedItems.filter(item => "".concat(item.value) !== value)) !== null && _selectedItems$filter !== void 0 ? _selectedItems$filter : [];
       updateItems(newSelectedItems);
+      if (checked) {
+        onSelectItem === null || onSelectItem === void 0 || onSelectItem(foundItem);
+      } else {
+        onDeselectItem === null || onDeselectItem === void 0 || onDeselectItem(foundItem);
+      }
     }
   };
   return /*#__PURE__*/_react.default.createElement(_FadeInDown.FadeInDown, {
@@ -144,40 +151,33 @@ MultiSelectDropdown.propTypes = {
   })).isRequired,
   header: _propTypes.default.node,
   updateItems: _propTypes.default.func.isRequired,
+  onDeselectItem: _propTypes.default.func,
+  onSelectItem: _propTypes.default.func,
   footer: _propTypes.default.node,
   groupFn: _propTypes.default.func,
-  sortFn: _propTypes.default.any,
-  shouldPinSelectedItems: _propTypes.default.bool
+  sortFn: _propTypes.default.any
 };
 const MultiSelect = _ref4 => {
   let {
     disabled,
     selectedItems: externalSelectedItems = [],
     label,
+    listSelected = true,
     onItemsUpdate,
+    onSelectItem,
+    onDeselectItem,
     placeholder,
     required = false,
     items = [],
     disabledItems = [],
     dropdownHeader,
     dropdownFooter,
+    showDropdownFooter = true,
     variant = "search"
   } = _ref4;
-  const wrapperRef = (0, _index.useClickOutside)(() => {
-    setIsDropdownOpen(false);
-    setFilter("");
-  });
-  (0, _index.useOnEscapePressed)(() => {
-    setIsDropdownOpen(false);
-    setFilter("");
-  });
+  const buttonRef = (0, _react.useRef)();
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
   const [filter, setFilter] = (0, _react.useState)("");
-  (0, _react.useEffect)(() => {
-    if (!isDropdownOpen) {
-      setFilter("");
-    }
-  }, [isDropdownOpen]);
   const [internalSelectedItems, setInternalSelectedItems] = (0, _react.useState)([]);
   const selectedItems = externalSelectedItems || internalSelectedItems;
   const updateItems = newItems => {
@@ -188,51 +188,9 @@ const MultiSelect = _ref4 => {
   const dropdownId = (0, _react.useId)();
   const inputId = (0, _react.useId)();
   const selectedItemsLabel = selectedItems.filter(selectedItem => items.some(item => item.value === selectedItem.value)).map(el => el.label).join(", ");
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: wrapperRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "multi-select"
-  }, variant === "search" ? /*#__PURE__*/_react.default.createElement(_index.SearchBox, {
-    externallyControlled: true,
-    "aria-controls": dropdownId,
-    "aria-expanded": isDropdownOpen,
-    id: inputId,
-    role: "combobox",
-    "aria-label": label || placeholder || "Search",
-    disabled: disabled,
-    autoComplete: "off",
-    onChange: value => {
-      setFilter(value);
-      // reopen if dropdown has been closed via ESC
-      setIsDropdownOpen(true);
-    },
-    onFocus: () => setIsDropdownOpen(true),
-    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
-    required: required,
-    type: "text",
-    value: filter,
-    className: "multi-select__input"
-  }) : /*#__PURE__*/_react.default.createElement("button", {
-    role: "combobox",
-    type: "button",
-    "aria-label": label || placeholder || "Select items",
-    "aria-controls": dropdownId,
-    "aria-expanded": isDropdownOpen,
-    className: "multi-select__select-button",
-    onClick: () => {
-      setIsDropdownOpen(isOpen => !isOpen);
-    }
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "multi-select__condensed-text"
-  }, selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")), /*#__PURE__*/_react.default.createElement(MultiSelectDropdown, {
-    id: dropdownId,
-    isOpen: isDropdownOpen,
-    items: filter.length > 0 ? items.filter(item => item.label.toLowerCase().includes(filter.toLowerCase())) : items,
-    selectedItems: selectedItems,
-    disabledItems: disabledItems,
-    header: dropdownHeader,
-    updateItems: updateItems,
-    footer: dropdownFooter ? dropdownFooter : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Button, {
+  let footer = null;
+  if (showDropdownFooter) {
+    footer = dropdownFooter ? dropdownFooter : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Button, {
       appearance: "link",
       onClick: () => {
         const enabledItems = items.filter(item => !disabledItems.some(disabledItem => disabledItem.value === item.value));
@@ -246,8 +204,82 @@ const MultiSelect = _ref4 => {
         updateItems(disabledSelectedItems);
       },
       type: "button"
-    }, "Clear"))
-  })));
+    }, "Clear"));
+  }
+  return /*#__PURE__*/_react.default.createElement(_index.ContextualMenu, {
+    className: "multi-select",
+    onToggleMenu: isOpen => {
+      if (!isOpen) {
+        setFilter("");
+      }
+      // Handle syncing the state when toggling the menu from within the
+      // contextual menu component e.g. when clicking outside.
+      if (isOpen !== isDropdownOpen) {
+        setIsDropdownOpen(isOpen);
+      }
+    },
+    position: "left",
+    constrainPanelWidth: true,
+    toggle: variant === "search" ? /*#__PURE__*/_react.default.createElement(_index.SearchBox, {
+      externallyControlled: true,
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownOpen,
+      id: inputId,
+      role: "combobox",
+      "aria-label": label || placeholder || "Search",
+      disabled: disabled,
+      autoComplete: "off",
+      onChange: value => {
+        setFilter(value);
+        // reopen if dropdown has been closed via ESC
+        setIsDropdownOpen(true);
+      },
+      onFocus: () => setIsDropdownOpen(true),
+      placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : "Search",
+      required: required,
+      type: "text",
+      value: filter,
+      className: "multi-select__input"
+    }) : /*#__PURE__*/_react.default.createElement("button", {
+      role: "combobox",
+      type: "button",
+      "aria-label": label || placeholder || "Select items",
+      "aria-controls": dropdownId,
+      "aria-expanded": isDropdownOpen,
+      className: "multi-select__select-button",
+      onClick: () => {
+        setIsDropdownOpen(!isDropdownOpen);
+      },
+      onMouseDown: event => {
+        // If the dropdown is open when this button is clicked the
+        // click-outside event will fire which will close the dropdown, but
+        // then the button click event will fire which will immediately
+        // reopen the dropdown.
+        // To prevent this we can stop the propagation to the click event
+        // while `isDropdownOpen` is still set to `true` (by the time we
+        // get to the `onClick` event `isDropdownOpen` will already be `false`,
+        // hence having to do this on mouse down).
+        if (isDropdownOpen) {
+          event.stopPropagation();
+        }
+      },
+      ref: buttonRef
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "multi-select__condensed-text"
+    }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")),
+    visible: isDropdownOpen
+  }, /*#__PURE__*/_react.default.createElement(MultiSelectDropdown, {
+    id: dropdownId,
+    isOpen: isDropdownOpen,
+    items: filter.length > 0 ? items.filter(item => item.label.toLowerCase().includes(filter.toLowerCase())) : items,
+    selectedItems: selectedItems,
+    disabledItems: disabledItems,
+    header: dropdownHeader,
+    updateItems: updateItems,
+    onSelectItem: onSelectItem,
+    onDeselectItem: onDeselectItem,
+    footer: footer
+  }));
 };
 exports.MultiSelect = MultiSelect;
 MultiSelect.propTypes = {
@@ -260,7 +292,10 @@ MultiSelect.propTypes = {
   })),
   help: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf([null])]),
+  listSelected: _propTypes.default.bool,
+  onDeselectItem: _propTypes.default.func,
   onItemsUpdate: _propTypes.default.func,
+  onSelectItem: _propTypes.default.func,
   placeholder: _propTypes.default.string,
   required: _propTypes.default.bool,
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -276,5 +311,6 @@ MultiSelect.propTypes = {
   renderItem: _propTypes.default.func,
   dropdownHeader: _propTypes.default.node,
   dropdownFooter: _propTypes.default.node,
+  showDropdownFooter: _propTypes.default.bool,
   variant: _propTypes.default.oneOf(["condensed", "search"])
 };

package/dist/components/MultiSelect/MultiSelect.scss

@@ -10,7 +10,9 @@ $dropdown-max-height: 20rem;
   // XXX: This is a workaround for https://github.com/canonical/vanilla-framework/issues/5030
   @include vf-b-forms;
 
+  margin-bottom: $input-margin-bottom;
   position: relative;
+  width: 100%;
 }
 
 .multi-select .p-form-validation__message {
@@ -26,6 +28,7 @@ $dropdown-max-height: 20rem;
 
 .multi-select__input {
   cursor: pointer;
+  margin-bottom: 0;
   position: relative;
 
   &.items-selected {
@@ -40,19 +43,6 @@ $dropdown-max-height: 20rem;
   }
 }
 
-.multi-select__dropdown {
-  background-color: $colors--theme--background-default;
-  box-shadow: $box-shadow;
-  color: $colors--theme--text-default;
-  left: 0;
-  max-height: $dropdown-max-height;
-  overflow: auto;
-  padding-top: $spv--small;
-  position: absolute;
-  right: 0;
-  top: calc(100% - #{$input-margin-bottom});
-}
-
 .multi-select__dropdown--side-by-side {
   display: flex;
   flex-wrap: wrap;
@@ -132,6 +122,10 @@ $dropdown-max-height: 20rem;
   position: relative;
   z-index: 0;
 
+  .multi-select & {
+    margin-bottom: 0;
+  }
+
   &::after {
     content: "";
     margin-left: $sph--large;

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

@@ -28,7 +28,7 @@ export type Props = PropsWithSpread<{
     /**
      * A function that is called when the user clicks the search icon or presses enter
      */
-    onSearch?: () => void;
+    onSearch?: (inputValue: string) => void;
     /**
      * A function that is called when the user clicks the reset icon
      */
@@ -37,6 +37,10 @@ export type Props = PropsWithSpread<{
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * Whether the search input should lose focus when searching.
+     */
+    shouldBlurOnSearch?: boolean;
     /**
      * Whether the search input should receive focus after pressing the reset button
      */

package/dist/components/SearchBox/SearchBox.js

@@ -31,6 +31,7 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     onSearch,
     onClear,
     placeholder = "Search",
+    shouldBlurOnSearch = true,
     shouldRefocusAfterReset,
     value,
     ...props
@@ -45,11 +46,13 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
     }
   };
   const triggerSearch = () => {
-    onSearch && onSearch();
+    onSearch === null || onSearch === void 0 || onSearch(externallyControlled ? value : internalRef.current.value);
   };
   const onKeyDown = e => {
     if (e.key === "Enter" && internalRef.current.checkValidity()) {
-      internalRef.current.blur();
+      if (shouldBlurOnSearch) {
+        internalRef.current.blur();
+      }
       triggerSearch();
     }
   };

package/package.json

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