@canonical/react-components 0.47.4 → 0.49.0

package/README.md

@@ -1,5 +1,5 @@
 # React components for Vanilla Framework
-![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main) ![Cypress chrome headless](https://github.com/canonical/react-components/workflows/Cypress%20chrome%20headless/badge.svg)
+![CI](https://github.com/canonical/react-components/workflows/CI/badge.svg?branch=main)
 
 This is a collection of components designed to be the way to consume [Vanilla Framework](http://vanillaframework.io) when using React.
 

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

@@ -30,7 +30,7 @@ let Label = exports.Label = /*#__PURE__*/function (Label) {
  * @param positionCoords - The coordinates of the position node.
  * @param constrainPanelWidth - Whether the menu width should be constrained to the position width.
  */
-const getPositionStyle = (position, positionCoords, constrainPanelWidth) => {
+const getPositionStyle = (position, verticalPosition, positionCoords, constrainPanelWidth) => {
   if (!positionCoords) {
     return null;
   }
@@ -40,7 +40,7 @@ const getPositionStyle = (position, positionCoords, constrainPanelWidth) => {
     top,
     width
   } = positionCoords;
-  const topPos = top + height + (window.scrollY || 0);
+  const topPos = verticalPosition === "bottom" ? top + height + (window.scrollY || 0) : top + (window.scrollY || 0);
   let leftPos = left;
   switch (position) {
     case "left":
@@ -120,6 +120,20 @@ const generateLink = (link, key, handleClose) => {
     } : null
   }, props), children);
 };
+const getClosestScrollableParent = node => {
+  let currentNode = node;
+  while (currentNode && currentNode !== document.body) {
+    const {
+      overflowY,
+      overflowX
+    } = window.getComputedStyle(currentNode);
+    if (["auto", "scroll", "overlay"].includes(overflowY) && ["auto", "scroll", "overlay"].includes(overflowX)) {
+      return currentNode;
+    }
+    currentNode = currentNode.parentElement;
+  }
+  return document.body;
+};
 const ContextualMenuDropdown = _ref => {
   let {
     adjustedPosition,
@@ -140,23 +154,46 @@ const ContextualMenuDropdown = _ref => {
     ...props
   } = _ref;
   const dropdown = (0, _react.useRef)();
-  const [positionStyle, setPositionStyle] = (0, _react.useState)(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth));
+  const [verticalPosition, setVerticalPosition] = (0, _react.useState)("bottom");
+  const [positionStyle, setPositionStyle] = (0, _react.useState)(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
   const [maxHeight, setMaxHeight] = (0, _react.useState)();
-
   // Update the styles to position the menu.
   const updatePositionStyle = (0, _react.useCallback)(() => {
-    setPositionStyle(getPositionStyle(adjustedPosition, positionCoords, constrainPanelWidth));
-  }, [adjustedPosition, positionCoords, constrainPanelWidth]);
+    setPositionStyle(getPositionStyle(adjustedPosition, verticalPosition, positionCoords, constrainPanelWidth));
+  }, [adjustedPosition, positionCoords, verticalPosition, constrainPanelWidth]);
+  const updateVerticalPosition = (0, _react.useCallback)(() => {
+    if (!positionNode) {
+      return null;
+    }
+    const scrollableParent = getClosestScrollableParent(positionNode);
+    if (!scrollableParent) {
+      return null;
+    }
+    const scrollableParentRect = scrollableParent.getBoundingClientRect();
+    const rect = 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 spaceBelow = scrollableParentRect.height - relativeRect.bottom;
+    const spaceAbove = relativeRect.top;
+    const dropdownHeight = relativeRect.height;
+    setVerticalPosition(spaceBelow >= dropdownHeight || spaceBelow > spaceAbove ? "bottom" : "top");
+  }, [positionNode]);
 
   // Update the position when the window fitment info changes.
   const onUpdateWindowFitment = (0, _react.useCallback)(fitsWindow => {
     if (autoAdjust) {
       setAdjustedPosition(adjustForWindow(position, fitsWindow));
+      updateVerticalPosition();
     }
     if (scrollOverflow) {
       setMaxHeight(fitsWindow.fromBottom.spaceBelow - 16);
     }
-  }, [autoAdjust, position, scrollOverflow, setAdjustedPosition]);
+  }, [autoAdjust, position, scrollOverflow, setAdjustedPosition, updateVerticalPosition]);
 
   // Handle adjusting the horizontal position and scrolling of the dropdown so that it remains on screen.
   (0, _hooks.useWindowFitment)(dropdown.current, positionNode, onUpdateWindowFitment, 0, isOpen && (autoAdjust || scrollOverflow));
@@ -165,6 +202,9 @@ const ContextualMenuDropdown = _ref => {
   (0, _react.useEffect)(() => {
     updatePositionStyle();
   }, [adjustedPosition, updatePositionStyle]);
+  (0, _react.useEffect)(() => {
+    updateVerticalPosition();
+  }, [updateVerticalPosition]);
   return (
     /*#__PURE__*/
     // Vanilla Framework uses .p-contextual-menu parent modifier classnames to determine the correct position of the .p-contextual-menu__dropdown dropdown (left, center, right).
@@ -188,6 +228,9 @@ const ContextualMenuDropdown = _ref => {
           maxHeight,
           minHeight: "2rem",
           overflowX: "auto"
+        } : {}),
+        ...(verticalPosition === "top" ? {
+          bottom: "0"
         } : {})
       }
     }, props), dropdownContent ? typeof dropdownContent === "function" ? dropdownContent(handleClose) : dropdownContent : links.map((item, i) => {

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

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from "react";
+import "./FadeInDown.scss";
+export interface FadeInDownProps extends PropsWithChildren {
+    isVisible: boolean;
+    className?: string;
+}
+/**
+ * EXPERIMENTAL: This component is experimental and should be used internally only.
+ */
+export declare const FadeInDown: FC<FadeInDownProps>;

package/dist/components/MultiSelect/FadeInDown/FadeInDown.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FadeInDown = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./FadeInDown.scss");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/**
+ * EXPERIMENTAL: This component is experimental and should be used internally only.
+ */
+const FadeInDown = _ref => {
+  let {
+    children,
+    className,
+    isVisible
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("fade-in--down", className),
+    "aria-hidden": isVisible ? "false" : "true",
+    style: {
+      visibility: isVisible ? "visible" : "hidden"
+    }
+  }, children);
+};
+exports.FadeInDown = FadeInDown;
+FadeInDown.propTypes = {
+  isVisible: _propTypes.default.bool.isRequired,
+  className: _propTypes.default.string
+};

package/dist/components/MultiSelect/FadeInDown/FadeInDown.scss

@@ -0,0 +1,22 @@
+@import "vanilla-framework";
+
+.fade-in--down {
+  @include vf-transition(#{transform, opacity, visibility}, fast);
+
+  position: relative;
+  z-index: 1;
+
+  &[aria-hidden="true"] {
+    height: 0;
+    opacity: 0;
+    transform: translate3d(0, -0.5rem, 0);
+    visibility: hidden;
+  }
+
+  &[aria-hidden="false"] {
+    height: auto;
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+    visibility: visible;
+  }
+}

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

@@ -0,0 +1 @@
+export * from "./FadeInDown";

package/dist/components/MultiSelect/FadeInDown/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FadeInDown = require("./FadeInDown");
+Object.keys(_FadeInDown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FadeInDown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FadeInDown[key];
+    }
+  });
+});

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

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import React from "react";
+import "./MultiSelect.scss";
+export type MultiSelectItem = {
+    label: string;
+    value: string | number;
+    group?: string;
+};
+export type MultiSelectProps = {
+    disabled?: boolean;
+    error?: string;
+    selectedItems?: MultiSelectItem[];
+    help?: string;
+    label?: string | null;
+    onItemsUpdate?: (items: MultiSelectItem[]) => void;
+    placeholder?: string;
+    required?: boolean;
+    items: MultiSelectItem[];
+    disabledItems?: MultiSelectItem[];
+    renderItem?: (item: MultiSelectItem) => ReactNode;
+    dropdownHeader?: ReactNode;
+    dropdownFooter?: ReactNode;
+    variant?: "condensed" | "search";
+};
+type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
+type SortFn = typeof sortAlphabetically;
+type MultiSelectDropdownProps = {
+    isOpen: boolean;
+    items: MultiSelectItem[];
+    selectedItems: MultiSelectItem[];
+    disabledItems: MultiSelectItem[];
+    header?: ReactNode;
+    updateItems: (newItems: 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[]) => {
+    group: string;
+    items: MultiSelectItem[];
+}[];
+export declare const MultiSelectDropdown: React.FC<MultiSelectDropdownProps>;
+/**
+ * Component allowing to select multiple items from a list of options.
+ *
+ * `MultiSelectDropdown` displays the dropdown with options which are grouped and sorted alphabetically.
+ * `SearchBox` or `Button` is used to trigger the dropdown depending on the variant.
+ */
+export declare const MultiSelect: React.FC<MultiSelectProps>;
+export {};

package/dist/components/MultiSelect/MultiSelect.js

@@ -0,0 +1,280 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MultiSelectDropdown = exports.MultiSelect = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireWildcard(require("react"));
+require("./MultiSelect.scss");
+var _index = require("../../index");
+var _FadeInDown = require("./FadeInDown");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const sortAlphabetically = (a, b) => {
+  return a.label.localeCompare(b.label, "en", {
+    numeric: true
+  });
+};
+const createSortSelectedItems = previouslySelectedItemValues => (a, b) => {
+  if (previouslySelectedItemValues) {
+    const aIsPreviouslySelected = previouslySelectedItemValues.has(a.value);
+    const bIsPreviouslySelected = previouslySelectedItemValues.has(b.value);
+    if (aIsPreviouslySelected && !bIsPreviouslySelected) return -1;
+    if (!aIsPreviouslySelected && bIsPreviouslySelected) return 1;
+  }
+  return 0;
+};
+const getGroupedItems = items => {
+  const groups = new Map();
+  items.forEach(item => {
+    const group = item.group || "Ungrouped";
+    const groupItems = groups.get(group) || [];
+    groupItems.push(item);
+    groups.set(group, groupItems);
+  });
+  return Array.from(groups, _ref => {
+    let [group, items] = _ref;
+    return {
+      group,
+      items
+    };
+  });
+};
+const MultiSelectDropdown = _ref2 => {
+  let {
+    items,
+    selectedItems,
+    disabledItems,
+    header,
+    updateItems,
+    isOpen,
+    footer,
+    sortFn = sortAlphabetically,
+    groupFn = getGroupedItems,
+    ...props
+  } = _ref2;
+  const selectedItemValues = (0, _react.useMemo)(() => new Set(selectedItems.map(item => item.value)), [selectedItems]);
+  const disabledItemValues = (0, _react.useMemo)(() => new Set(disabledItems.map(item => item.value)), [disabledItems]);
+  const [previouslySelectedItemValues, setPreviouslySelectedItemValues] = (0, _react.useState)(new Set(selectedItemValues));
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      setPreviouslySelectedItemValues(new Set(selectedItemValues));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+  const hasGroup = (0, _react.useMemo)(() => items.some(item => item.group), [items]);
+  const groupedItems = (0, _react.useMemo)(() => hasGroup ? groupFn(items) : [{
+    group: "Ungrouped",
+    items
+  }],
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [items, groupFn]);
+  const handleOnChange = event => {
+    const {
+      checked,
+      value
+    } = event.target;
+    const foundItem = items.find(item => "".concat(item.value) === value);
+    if (foundItem) {
+      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);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_FadeInDown.FadeInDown, {
+    isVisible: isOpen
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: "multi-select__dropdown",
+    role: "listbox"
+  }, props), header ? header : null, groupedItems.map(_ref3 => {
+    let {
+      group,
+      items
+    } = _ref3;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "multi-select__group",
+      key: group
+    }, hasGroup ? /*#__PURE__*/_react.default.createElement("h5", {
+      className: "multi-select__dropdown-header"
+    }, group) : null, /*#__PURE__*/_react.default.createElement("ul", {
+      className: "multi-select__dropdown-list",
+      "aria-label": group
+    }, items.sort(sortFn).sort(createSortSelectedItems(previouslySelectedItemValues)).map(item => /*#__PURE__*/_react.default.createElement("li", {
+      key: item.value,
+      className: "multi-select__dropdown-item"
+    }, /*#__PURE__*/_react.default.createElement(_index.CheckboxInput, {
+      disabled: disabledItemValues.has(item.value),
+      label: item.label,
+      checked: selectedItemValues.has(item.value),
+      value: item.value,
+      onChange: handleOnChange,
+      key: item.value
+    })))));
+  }), footer ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "multi-select__footer"
+  }, footer) : null));
+};
+
+/**
+ * Component allowing to select multiple items from a list of options.
+ *
+ * `MultiSelectDropdown` displays the dropdown with options which are grouped and sorted alphabetically.
+ * `SearchBox` or `Button` is used to trigger the dropdown depending on the variant.
+ */
+exports.MultiSelectDropdown = MultiSelectDropdown;
+MultiSelectDropdown.propTypes = {
+  isOpen: _propTypes.default.bool.isRequired,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    group: _propTypes.default.string
+  })).isRequired,
+  selectedItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    group: _propTypes.default.string
+  })).isRequired,
+  disabledItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    group: _propTypes.default.string
+  })).isRequired,
+  header: _propTypes.default.node,
+  updateItems: _propTypes.default.func.isRequired,
+  footer: _propTypes.default.node,
+  groupFn: _propTypes.default.func,
+  sortFn: _propTypes.default.any,
+  shouldPinSelectedItems: _propTypes.default.bool
+};
+const MultiSelect = _ref4 => {
+  let {
+    disabled,
+    selectedItems: externalSelectedItems = [],
+    label,
+    onItemsUpdate,
+    placeholder,
+    required = false,
+    items = [],
+    disabledItems = [],
+    dropdownHeader,
+    dropdownFooter,
+    variant = "search"
+  } = _ref4;
+  const wrapperRef = (0, _index.useClickOutside)(() => {
+    setIsDropdownOpen(false);
+    setFilter("");
+  });
+  (0, _index.useOnEscapePressed)(() => {
+    setIsDropdownOpen(false);
+    setFilter("");
+  });
+  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 => {
+    const uniqueItems = Array.from(new Set(newItems));
+    setInternalSelectedItems(uniqueItems);
+    onItemsUpdate && onItemsUpdate(uniqueItems);
+  };
+  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, {
+      appearance: "link",
+      onClick: () => {
+        const enabledItems = items.filter(item => !disabledItems.some(disabledItem => disabledItem.value === item.value));
+        updateItems([...selectedItems, ...enabledItems]);
+      },
+      type: "button"
+    }, "Select all"), /*#__PURE__*/_react.default.createElement(_index.Button, {
+      appearance: "link",
+      onClick: () => {
+        const disabledSelectedItems = selectedItems.filter(item => disabledItems.some(disabledItem => disabledItem.value === item.value));
+        updateItems(disabledSelectedItems);
+      },
+      type: "button"
+    }, "Clear"))
+  })));
+};
+exports.MultiSelect = MultiSelect;
+MultiSelect.propTypes = {
+  disabled: _propTypes.default.bool,
+  error: _propTypes.default.string,
+  selectedItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    group: _propTypes.default.string
+  })),
+  help: _propTypes.default.string,
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf([null])]),
+  onItemsUpdate: _propTypes.default.func,
+  placeholder: _propTypes.default.string,
+  required: _propTypes.default.bool,
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    group: _propTypes.default.string
+  })).isRequired,
+  disabledItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    group: _propTypes.default.string
+  })),
+  renderItem: _propTypes.default.func,
+  dropdownHeader: _propTypes.default.node,
+  dropdownFooter: _propTypes.default.node,
+  variant: _propTypes.default.oneOf(["condensed", "search"])
+};

package/dist/components/MultiSelect/MultiSelect.scss

@@ -0,0 +1,158 @@
+@use "sass:map";
+@import "vanilla-framework";
+@include vf-base;
+@include vf-p-lists;
+
+$dropdown-max-height: 20rem;
+
+.multi-select {
+  position: relative;
+}
+
+.multi-select .p-form-validation__message {
+  margin-top: 0;
+}
+
+.multi-select__condensed-text {
+  margin-right: $sph--large + $sph--x-small;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-select__input {
+  cursor: pointer;
+  position: relative;
+
+  &.items-selected {
+    border-top: 0;
+    box-shadow: none;
+    top: -#{$border-radius};
+  }
+
+  &[disabled],
+  &[disabled="disabled"] {
+    opacity: 1;
+  }
+}
+
+.multi-select__dropdown {
+  @extend %vf-bg--x-light;
+  @extend %vf-has-box-shadow;
+  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;
+}
+
+.multi-select__group {
+  flex: 1 0 auto;
+}
+
+.multi-select__dropdown-list {
+  @extend %vf-list;
+
+  margin-bottom: $sph--x-small;
+}
+
+.multi-select__footer {
+  background: white;
+  border-top: 1px solid $color-mid-light;
+  bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: $sph--small $sph--large 0 $sph--large;
+  position: sticky;
+}
+
+.multi-select__dropdown-header {
+  font-size: #{map.get($font-sizes, small)}rem;
+  letter-spacing: #{map.get($font-sizes, small)}px;
+  margin-bottom: 0;
+  padding: $spv--x-small $sph--large;
+  position: relative;
+  text-transform: uppercase;
+}
+
+.multi-select__dropdown-item {
+  padding: 0 $sph--large;
+
+  .p-checkbox {
+    padding-top: $sph--x-small;
+  }
+
+  &,
+  .p-checkbox {
+    width: 100%;
+  }
+}
+
+.multi-select__dropdown-item-description {
+  @extend %small-text;
+
+  color: $color-mid-dark;
+}
+
+.multi-select__dropdown-button {
+  border: 0;
+  margin-bottom: 0;
+  padding-left: $sph--small;
+  padding-right: $sph--small;
+  text-align: left;
+  width: 100%;
+}
+
+.multi-select__selected-list {
+  background-color: $colors--light-theme--background-inputs;
+  border-bottom: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: $spv--x-small $sph--small;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.multi-select__select-button {
+  @extend %vf-input-elements;
+  align-items: center;
+  display: inline-flex;
+  height: 2.5rem;
+  justify-content: space-between;
+  overflow: auto;
+
+  position: relative;
+  z-index: 0;
+
+  &::after {
+    content: "";
+    margin-left: $sph--large;
+    position: absolute;
+    right: $sph--small;
+    top: 50%;
+    transform: translateY(-50%) rotate(-180deg);
+
+    @extend %icon;
+    @include vf-icon-chevron($color-mid-dark);
+    @include vf-transition($property: transform, $duration: fast);
+  }
+
+  &[aria-expanded="true"] {
+    background-color: $colors--light-theme--background-hover;
+  }
+
+  &[aria-expanded="false"] {
+    &::after {
+      transform: translateY(-50%) rotate(0);
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+import { Meta } from "@storybook/react";
+import { MultiSelect } from "./MultiSelect";
+declare const meta: Meta<typeof MultiSelect>;
+export default meta;
+export declare const CondensedExample: {
+    args: {
+        items: ({
+            label: string;
+            value: string;
+        } | {
+            label: string;
+            value: number;
+        })[];
+        selectedItems: ({
+            label: string;
+            value: string;
+        } | {
+            label: string;
+            value: number;
+        })[];
+        variant: string;
+    };
+};
+export declare const SearchExample: {
+    args: {
+        variant: string;
+        items: ({
+            group: string;
+            label: string;
+            value: string;
+        } | {
+            group: string;
+            label: string;
+            value: number;
+        })[];
+        selectedItems: ({
+            label: string;
+            value: string;
+        } | {
+            label: string;
+            value: number;
+        })[];
+    };
+};
+export declare const WithDisabledItems: {
+    args: {
+        disabledItems: {
+            label: string;
+            value: number;
+        }[];
+        items: ({
+            label: string;
+            value: string;
+        } | {
+            label: string;
+            value: number;
+        })[];
+        selectedItems: ({
+            label: string;
+            value: string;
+        } | {
+            label: string;
+            value: number;
+        })[];
+        variant: string;
+    };
+};

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

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithDisabledItems = exports.SearchExample = exports.CondensedExample = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MultiSelect = require("./MultiSelect");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const Template = props => {
+  const [selectedItems, setSelectedItems] = (0, _react.useState)(props.selectedItems || []);
+  return /*#__PURE__*/_react.default.createElement(_MultiSelect.MultiSelect, _extends({}, props, {
+    selectedItems: selectedItems,
+    onItemsUpdate: setSelectedItems
+  }));
+};
+const meta = {
+  title: "MultiSelect",
+  component: _MultiSelect.MultiSelect,
+  render: Template,
+  tags: ["autodocs"],
+  parameters: {}
+};
+var _default = exports.default = meta;
+const CondensedExample = exports.CondensedExample = {
+  args: {
+    items: [...Array.from({
+      length: 26
+    }, (_, i) => ({
+      label: "".concat(String.fromCharCode(i + 65)),
+      value: "".concat(String.fromCharCode(i + 65))
+    })), ...Array.from({
+      length: 26
+    }, (_, i) => ({
+      label: "Item ".concat(i + 1),
+      value: i + 1
+    }))],
+    selectedItems: [{
+      label: "A",
+      value: "A"
+    }, {
+      label: "Item 2",
+      value: 2
+    }],
+    variant: "condensed"
+  }
+};
+const SearchExample = exports.SearchExample = {
+  args: {
+    ...CondensedExample.args,
+    variant: "search",
+    items: [...CondensedExample.args.items.map((item, i) => ({
+      ...item,
+      group: i % 2 === 0 ? "Group 1" : "Group 2"
+    }))]
+  }
+};
+const WithDisabledItems = exports.WithDisabledItems = {
+  args: {
+    ...CondensedExample.args,
+    disabledItems: [{
+      label: "Item 1",
+      value: 1
+    }, {
+      label: "Item 2",
+      value: 2
+    }]
+  }
+};

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

@@ -0,0 +1 @@
+export * from "./MultiSelect";

package/dist/components/MultiSelect/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _MultiSelect = require("./MultiSelect");
+Object.keys(_MultiSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MultiSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MultiSelect[key];
+    }
+  });
+});

package/dist/index.d.ts

@@ -25,6 +25,7 @@ export { default as MainTable } from "./components/MainTable";
 export { default as ModularTable } from "./components/ModularTable";
 export { default as Navigation } from "./components/Navigation";
 export { default as Modal } from "./components/Modal";
+export * from "./components/MultiSelect";
 export { default as Notification, NotificationSeverity, } from "./components/Notification";
 export { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as Pagination } from "./components/Pagination";

package/dist/index.js

@@ -3,6 +3,81 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  Accordion: true,
+  ActionButton: true,
+  ArticlePagination: true,
+  Badge: true,
+  Button: true,
+  ButtonAppearance: true,
+  Card: true,
+  CheckboxInput: true,
+  Chip: true,
+  Code: true,
+  CodeSnippet: true,
+  CodeSnippetBlockAppearance: true,
+  Col: true,
+  ConfirmationButton: true,
+  ConfirmationModal: true,
+  ContextualMenu: true,
+  EmptyState: true,
+  Field: true,
+  Form: true,
+  Icon: true,
+  ICONS: true,
+  Input: true,
+  Label: true,
+  Link: true,
+  List: true,
+  Loader: true,
+  MainTable: true,
+  ModularTable: true,
+  Navigation: true,
+  Modal: true,
+  Notification: true,
+  NotificationSeverity: true,
+  NotificationConsumer: true,
+  NotificationProvider: true,
+  useNotify: true,
+  info: true,
+  success: true,
+  failure: true,
+  queue: true,
+  Pagination: true,
+  PasswordToggle: true,
+  RadioInput: true,
+  Row: true,
+  SearchAndFilter: true,
+  SearchBox: true,
+  Select: true,
+  Slider: true,
+  Switch: true,
+  Spinner: true,
+  StatusLabel: true,
+  StatusLabelAppearance: true,
+  Strip: true,
+  SummaryButton: true,
+  Table: true,
+  TableCell: true,
+  TableHeader: true,
+  TableRow: true,
+  Tabs: true,
+  Textarea: true,
+  Tooltip: true,
+  TablePagination: true,
+  useOnClickOutside: true,
+  useClickOutside: true,
+  useId: true,
+  useListener: true,
+  useOnEscapePressed: true,
+  usePagination: true,
+  usePrevious: true,
+  useThrottle: true,
+  useWindowFitment: true,
+  isNavigationAnchor: true,
+  isNavigationButton: true,
+  Theme: true
+};
 Object.defineProperty(exports, "Accordion", {
   enumerable: true,
   get: function () {
@@ -468,6 +543,18 @@ var _MainTable = _interopRequireDefault(require("./components/MainTable"));
 var _ModularTable = _interopRequireDefault(require("./components/ModularTable"));
 var _Navigation = _interopRequireDefault(require("./components/Navigation"));
 var _Modal = _interopRequireDefault(require("./components/Modal"));
+var _MultiSelect = require("./components/MultiSelect");
+Object.keys(_MultiSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _MultiSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MultiSelect[key];
+    }
+  });
+});
 var _Notification = _interopRequireWildcard(require("./components/Notification"));
 var _NotificationProvider = require("./components/NotificationProvider");
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.47.4",
+  "version": "0.49.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -26,7 +26,7 @@
     "@babel/eslint-parser": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@percy/cli": "1.27.6",
-    "@percy/storybook": "4.3.7",
+    "@percy/storybook": "5.0.1",
     "@semantic-release/changelog": "6.0.3",
     "@semantic-release/git": "10.0.1",
     "@storybook/addon-a11y": "7.6.7",
@@ -38,64 +38,65 @@
     "@storybook/blocks": "7.6.7",
     "@storybook/react": "7.6.7",
     "@storybook/react-webpack5": "7.6.7",
-    "@testing-library/cypress": "9.0.0",
+    "@testing-library/cypress": "10.0.1",
     "@testing-library/dom": "9.3.3",
-    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/jest-dom": "6.2.1",
     "@testing-library/react": "14.1.2",
     "@testing-library/user-event": "14.5.2",
-    "@typescript-eslint/eslint-plugin": "5.62.0",
-    "@typescript-eslint/parser": "5.62.0",
-    "babel-jest": "27.5.1",
+    "@typescript-eslint/eslint-plugin": "6.19.1",
+    "@typescript-eslint/parser": "6.19.1",
+    "babel-jest": "29.7.0",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "8.2.2",
     "css-loader": "6.8.1",
-    "cypress": "12.17.4",
+    "cypress": "13.6.3",
     "deepmerge": "4.3.1",
     "eslint": "8.56.0",
-    "eslint-config-prettier": "8.10.0",
+    "eslint-config-prettier": "9.1.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-cypress": "2.15.1",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
-    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-prettier": "5.1.3",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "eslint-plugin-storybook": "0.6.15",
-    "eslint-plugin-testing-library": "5.11.1",
-    "jest": "27.5.1",
-    "npm-package-json-lint": "5.4.2",
-    "prettier": "2.8.8",
+    "eslint-plugin-testing-library": "6.2.0",
+    "jest": "29.7.0",
+    "npm-package-json-lint": "7.1.0",
+    "prettier": "3.2.4",
     "react": "18.2.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.2.0",
     "sass": "1.69.7",
-    "sass-loader": "10.5.1",
+    "sass-loader": "14.0.0",
     "semantic-release": "23.0.0",
     "storybook": "7.6.7",
     "style-loader": "3.3.3",
-    "stylelint": "15.11.0",
+    "stylelint": "16.2.0",
     "stylelint-config-prettier": "9.0.5",
-    "stylelint-config-recommended-scss": "5.0.2",
-    "stylelint-order": "5.0.0",
-    "stylelint-prettier": "2.0.0",
-    "ts-jest": "27.1.5",
+    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-order": "6.0.4",
+    "stylelint-prettier": "5.0.0",
+    "ts-jest": "29.1.2",
     "tsc-alias": "1.8.8",
-    "typescript": "4.9.5",
+    "typescript": "5.3.3",
     "vanilla-framework": "4.6.0",
-    "wait-on": "5.3.0",
+    "wait-on": "7.2.0",
     "webpack": "5.89.0"
   },
   "dependencies": {
-    "@types/jest": "27.5.2",
+    "@types/jest": "29.5.11",
     "@types/node": "18.19.4",
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "@types/react-table": "7.7.19",
     "classnames": "2.5.1",
-    "nanoid": "3.3.7",
+    "jest-environment-jsdom": "29.7.0",
+    "nanoid": "5.0.4",
     "prop-types": "15.8.1",
     "react-table": "7.8.0",
     "react-useportal": "1.0.19"
@@ -104,10 +105,7 @@
     "@types/react": "18.2.46",
     "@types/react-dom": "18.2.18",
     "postcss": "^8.3.11",
-    "string-width": "^4",
-    "jackspeak": "^2",
-    "strip-ansi": "^6.0.0",
-    "strip-ansi-cjs": "^8.0.0"
+    "jackspeak": "2.1.1"
   },
   "peerDependencies": {
     "@types/react": "^17.0.2 || ^18.0.0",