@canonical/react-components 1.1.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/MultiSelect/MultiSelect.d.ts

@@ -40,7 +40,6 @@ type MultiSelectDropdownProps = {
     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

@@ -155,8 +155,7 @@ MultiSelectDropdown.propTypes = {
   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 {
@@ -176,21 +175,9 @@ const MultiSelect = _ref4 => {
     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 => {
@@ -219,43 +206,69 @@ const MultiSelect = _ref4 => {
       type: "button"
     }, "Clear"));
   }
-  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);
+  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);
+      }
     },
-    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"
-  }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")), /*#__PURE__*/_react.default.createElement(MultiSelectDropdown, {
+    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,
@@ -266,7 +279,7 @@ const MultiSelect = _ref4 => {
     onSelectItem: onSelectItem,
     onDeselectItem: onDeselectItem,
     footer: footer
-  })));
+  }));
 };
 exports.MultiSelect = MultiSelect;
 MultiSelect.propTypes = {

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.1.0",
+  "version": "1.2.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {