@canonical/react-components 0.48.0 → 0.50.0

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/components/TablePagination/TablePagination.d.ts

@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, PropsWithChildren, ReactNode } from "react";
 import "./TablePagination.scss";
-export type Props = PropsWithChildren<{
+export type BasePaginationProps = {
     /**
      * list of data elements to be paginated. This component is un-opinionated about
      * the structure of the data but it should be identical to the data structure
@@ -9,7 +9,7 @@ export type Props = PropsWithChildren<{
     data: unknown[];
     /**
      * prop name of the child table component that receives paginated data.
-     * default value is set to @constant rows, which is the data prop for the @func MainTable component
+     * default value is set to `rows`, which is the data prop for the `MainTable` component
      */
     dataForwardProp?: string;
     /**
@@ -32,6 +32,46 @@ export type Props = PropsWithChildren<{
      * place the pagination component above or below the table?
      */
     position?: "above" | "below";
-}> & HTMLAttributes<HTMLDivElement>;
-declare const TablePagination: ({ data, className, itemName, description, position, dataForwardProp, pageLimits, children, ...divProps }: Props) => React.JSX.Element;
+};
+export type ExternalControlProps = BasePaginationProps & {
+    /**
+     * Whether the component will be controlled via external state.
+     */
+    externallyControlled?: true;
+    /**
+     * the total number of items available within the data. This prop is only relevant
+     * and will be required if `externallyControlled` is set to `true`.
+     */
+    totalItems: number;
+    /**
+     * the current page that's showing. This prop is only relevant and will be required
+     * if `externallyControlled` is set to `true`.
+     */
+    currentPage: number;
+    /**
+     * size per page. This prop is only relevant and will be required if
+     * `externallyControlled` is set to `true`.
+     */
+    pageSize: number;
+    /**
+     * callback indicating a page change event to the parent component.
+     * This prop is only relevant and will be required if `externallyControlled` is set
+     * to `true`.
+     */
+    onPageChange: (page: number) => void;
+    /**
+     * callback indicating a page size change event to the parent component.
+     * This prop is only relevant and will be required if `externallyControlled` is set
+     * to `true`.
+     */
+    onPageSizeChange: (pageSize: number) => void;
+};
+export type InternalControlProps = BasePaginationProps & {
+    /**
+     * Whether the component will be controlled via external state.
+     */
+    externallyControlled?: false;
+};
+export type Props = PropsWithChildren<ExternalControlProps | InternalControlProps> & HTMLAttributes<HTMLDivElement>;
+declare const TablePagination: (props: Props) => React.JSX.Element;
 export default TablePagination;

package/dist/components/TablePagination/TablePagination.js

@@ -5,121 +5,85 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _hooks = require("../../hooks");
-var _Select = _interopRequireDefault(require("../Select"));
-var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
 require("./TablePagination.scss");
+var _TablePaginationControls = _interopRequireDefault(require("./TablePaginationControls"));
+var _utils = require("./utils");
+var _hooks = require("../../hooks");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
-/**
- * Determine if we are working with a small screen.
- * 'small screen' in this case is relative to the width of the description div
- */
-const figureSmallScreen = descriptionRef => {
-  const descriptionElement = descriptionRef.current;
-  if (!descriptionElement) {
-    return true;
-  }
-  return descriptionElement.getBoundingClientRect().width < 230;
-};
-
-/**
- * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
- * for those child components.
- * @param children - react node children to iterate
- * @param dataForwardProp - the name of the prop from the children components to override
- * @param data - actual data to be passed to the prop specified by @param dataForwardProp
- */
-const renderChildren = (children, dataForwardProp, data) => {
-  return _react.Children.map(children, child => {
-    return /*#__PURE__*/(0, _react.cloneElement)(child, {
-      [dataForwardProp]: data
-    });
-  });
-};
-const DEFAULT_PAGE_LIMITS = [50, 100, 200];
-const generatePagingOptions = pageLimits => {
-  return pageLimits.map(limit => ({
-    value: limit,
-    label: "".concat(limit, "/page")
-  }));
-};
-const TablePagination = _ref => {
-  let {
+const TablePagination = props => {
+  const {
     data,
-    className,
+    dataForwardProp = "rows",
     itemName = "item",
+    className,
     description,
+    pageLimits = _utils.DEFAULT_PAGE_LIMITS,
     position = "above",
-    dataForwardProp = "rows",
-    pageLimits = DEFAULT_PAGE_LIMITS,
+    externallyControlled,
     children,
     ...divProps
-  } = _ref;
-  const descriptionRef = (0, _react.useRef)(null);
-  const [isSmallScreen, setSmallScreen] = (0, _react.useState)(false);
-  const [pageSize, setPageSize] = (0, _react.useState)(() => {
-    return generatePagingOptions(pageLimits)[0].value;
+  } = props;
+
+  // Safety check to ensure pageSize is a valid option in
+  // pageLimits if the component is externally controlled
+  if (externallyControlled) {
+    let pageSizeFound = false;
+    for (const limit of pageLimits) {
+      if (limit === Number(props.pageSize)) {
+        pageSizeFound = true;
+        break;
+      }
+    }
+    if (!pageSizeFound) {
+      throw new Error("pageSize must be a valid option in pageLimits, pageLimits is set to [".concat(pageLimits, "]"));
+    }
+  }
+  const [internalPageSize, setInternalPageSize] = (0, _react.useState)(() => {
+    return (0, _utils.generatePagingOptions)(pageLimits)[0].value;
   });
   const {
     paginate,
-    currentPage,
-    pageData,
-    totalItems
-  } = (0, _hooks.usePagination)(data, {
-    itemsPerPage: pageSize,
+    currentPage: internalCurrentPage,
+    pageData: internalData
+  } = (0, _hooks.usePagination)(externallyControlled ? [] : data, {
+    itemsPerPage: internalPageSize,
     autoResetPage: true
   });
-  (0, _react.useEffect)(() => {
-    const handleResize = () => {
-      setSmallScreen(figureSmallScreen(descriptionRef));
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [isSmallScreen]);
-  const handlePageSizeChange = e => {
-    paginate(1);
-    setPageSize(parseInt(e.target.value));
-  };
-  const getDescription = () => {
-    if (description) {
-      return description;
-    }
-    const visibleCount = pageData.length;
-    if (isSmallScreen) {
-      return "".concat(visibleCount, " out of ").concat(totalItems);
+  const controlData = externallyControlled ? data : internalData;
+  const controlPageSize = externallyControlled ? props.pageSize : internalPageSize;
+  const controlTotalItems = externallyControlled ? props.totalItems : data.length;
+  const controlCurrentPage = externallyControlled ? props.currentPage : internalCurrentPage;
+  const handlePageChange = page => {
+    if (externallyControlled) {
+      props.onPageChange(page);
+      return;
     }
-    if (visibleCount === totalItems && visibleCount > 1) {
-      return "Showing all ".concat(totalItems, " ").concat(itemName, "s");
+    paginate(page);
+  };
+  const handlePageSizeChange = pageSize => {
+    if (externallyControlled) {
+      props.onPageSizeChange(pageSize);
+      return;
     }
-    return "Showing ".concat(visibleCount, " out of ").concat(totalItems, " ").concat(itemName).concat(totalItems !== 1 ? "s" : "");
+    paginate(1);
+    setInternalPageSize(pageSize);
   };
-  const totalPages = Math.ceil(data.length / pageSize);
-  const clonedChildren = renderChildren(children, dataForwardProp, pageData);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, position === "below" && clonedChildren, /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: (0, _classnames.default)("pagination", className)
-  }, divProps, {
-    role: "navigation"
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "description",
-    ref: descriptionRef
-  }, getDescription()), /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, {
-    onPageChange: paginate,
-    currentPage: currentPage,
-    totalPages: totalPages
-  }), /*#__PURE__*/_react.default.createElement(_Select.default, {
-    className: "items-per-page",
-    label: "Items per page",
-    labelClassName: "u-off-screen",
-    id: "itemsPerPage",
-    options: generatePagingOptions(pageLimits),
-    onChange: handlePageSizeChange,
-    value: pageSize
-  })), position === "above" && clonedChildren);
+  const clonedChildren = (0, _utils.renderChildren)(children, dataForwardProp, controlData);
+  const controls = /*#__PURE__*/_react.default.createElement(_TablePaginationControls.default, _extends({}, divProps, {
+    data: controlData,
+    className: className,
+    itemName: itemName,
+    description: description,
+    pageLimits: pageLimits,
+    totalItems: controlTotalItems,
+    currentPage: controlCurrentPage,
+    pageSize: controlPageSize,
+    onPageChange: handlePageChange,
+    onPageSizeChange: handlePageSizeChange
+  }));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, position === "above" && controls, clonedChildren, position === "below" && controls);
 };
 var _default = exports.default = TablePagination;

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.d.ts

@@ -1,16 +1,6 @@
-export type Props = {
-    /**
-     * Callback function to handle a change in page number
-     */
-    onPageChange: (pageNumber: number) => void;
-    /**
-     * The current page of the data
-     */
-    currentPage: number;
-    /**
-     * The total number of pages that exists within the data
-     */
-    totalPages: number;
-};
-declare const TablePaginationControls: ({ onPageChange, currentPage, totalPages, }: Props) => JSX.Element;
+import { HTMLAttributes } from "react";
+import { BasePaginationProps, ExternalControlProps, InternalControlProps } from "../TablePagination";
+export type AllProps = BasePaginationProps & InternalControlProps & ExternalControlProps;
+export type Props = Omit<AllProps, "externallyControlled" | "dataForwardProp" | "position"> & HTMLAttributes<HTMLDivElement>;
+declare const TablePaginationControls: ({ data, className, itemName, description, pageLimits, totalItems, currentPage, pageSize, onPageChange, onPageSizeChange, ...divProps }: Props) => JSX.Element;
 export default TablePaginationControls;

package/dist/components/TablePagination/TablePaginationControls/TablePaginationControls.js

@@ -4,18 +4,43 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Button = _interopRequireDefault(require("../../Button"));
 var _Icon = _interopRequireDefault(require("../../Icon"));
 var _Input = _interopRequireDefault(require("../../Input"));
-var _react = _interopRequireDefault(require("react"));
+var _Select = _interopRequireDefault(require("../../Select"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _utils = require("../utils");
+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 TablePaginationControls = _ref => {
   let {
-    onPageChange,
+    data,
+    className,
+    itemName,
+    description,
+    pageLimits,
+    totalItems,
     currentPage,
-    totalPages
+    pageSize,
+    onPageChange,
+    onPageSizeChange,
+    ...divProps
   } = _ref;
+  const descriptionRef = (0, _react.useRef)(null);
+  const isSmallScreen = (0, _utils.useFigureSmallScreen)({
+    descriptionRef
+  });
+  const totalPages = Math.ceil(totalItems / pageSize);
+  const descriptionDisplay = (0, _utils.getDescription)({
+    description,
+    data,
+    isSmallScreen,
+    totalItems,
+    itemName
+  });
   const handleDecrementPage = currentPage => {
     if (currentPage > 1) {
       onPageChange(currentPage - 1);
@@ -30,7 +55,17 @@ const TablePaginationControls = _ref => {
     const newPage = Math.min(totalPages, Math.max(1, parseInt(e.target.value)));
     onPageChange(newPage);
   };
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  const handlePageSizeChange = e => {
+    onPageSizeChange(parseInt(e.target.value));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: (0, _classnames.default)("pagination", className)
+  }, divProps, {
+    role: "navigation"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "description",
+    ref: descriptionRef
+  }, descriptionDisplay), /*#__PURE__*/_react.default.createElement(_Button.default, {
     "aria-label": "Previous page",
     className: "back",
     appearance: "base",
@@ -56,11 +91,14 @@ const TablePaginationControls = _ref => {
     onClick: () => handleIncrementPage(currentPage, totalPages)
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "chevron-down"
-  })));
-};
-TablePaginationControls.propTypes = {
-  onPageChange: _propTypes.default.func.isRequired,
-  currentPage: _propTypes.default.number.isRequired,
-  totalPages: _propTypes.default.number.isRequired
+  })), /*#__PURE__*/_react.default.createElement(_Select.default, {
+    className: "items-per-page",
+    label: "Items per page",
+    labelClassName: "u-off-screen",
+    id: "itemsPerPage",
+    options: (0, _utils.generatePagingOptions)(pageLimits),
+    onChange: handlePageSizeChange,
+    value: pageSize
+  }));
 };
 var _default = exports.default = TablePaginationControls;

package/dist/components/TablePagination/utils.d.ts

@@ -0,0 +1,29 @@
+import { ReactElement, ReactNode, RefObject } from "react";
+/**
+ * Determine if we are working with a small screen.
+ * 'small screen' in this case is relative to the width of the description div
+ */
+export declare const figureSmallScreen: (descriptionRef: RefObject<HTMLDivElement>) => boolean;
+/**
+ * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
+ * for those child components.
+ * @param children - react node children to iterate
+ * @param dataForwardProp - the name of the prop from the children components to override
+ * @param data - actual data to be passed to the prop specified by @param dataForwardProp
+ */
+export declare const renderChildren: (children: ReactNode, dataForwardProp: string, data: unknown[]) => ReactElement<any, string | import("react").JSXElementConstructor<any>>[];
+export declare const DEFAULT_PAGE_LIMITS: number[];
+export declare const generatePagingOptions: (pageLimits: number[]) => {
+    value: number;
+    label: string;
+}[];
+export declare const getDescription: ({ description, data, isSmallScreen, totalItems, itemName, }: {
+    description: ReactNode;
+    data: unknown[];
+    isSmallScreen: boolean;
+    totalItems: number;
+    itemName: string;
+}) => string | number | true | ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode>;
+export declare const useFigureSmallScreen: (args: {
+    descriptionRef: RefObject<HTMLDivElement>;
+}) => boolean;

package/dist/components/TablePagination/utils.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFigureSmallScreen = exports.renderChildren = exports.getDescription = exports.generatePagingOptions = exports.figureSmallScreen = exports.DEFAULT_PAGE_LIMITS = void 0;
+var _react = require("react");
+/**
+ * Determine if we are working with a small screen.
+ * 'small screen' in this case is relative to the width of the description div
+ */
+const figureSmallScreen = descriptionRef => {
+  const descriptionElement = descriptionRef.current;
+  if (!descriptionElement) {
+    return true;
+  }
+  return descriptionElement.getBoundingClientRect().width < 230;
+};
+
+/**
+ * Iterate direct react child components and override the value of the prop specified by @param dataForwardProp
+ * for those child components.
+ * @param children - react node children to iterate
+ * @param dataForwardProp - the name of the prop from the children components to override
+ * @param data - actual data to be passed to the prop specified by @param dataForwardProp
+ */
+exports.figureSmallScreen = figureSmallScreen;
+const renderChildren = (children, dataForwardProp, data) => {
+  return _react.Children.map(children, child => {
+    return /*#__PURE__*/(0, _react.cloneElement)(child, {
+      [dataForwardProp]: data
+    });
+  });
+};
+exports.renderChildren = renderChildren;
+const DEFAULT_PAGE_LIMITS = exports.DEFAULT_PAGE_LIMITS = [50, 100, 200];
+const generatePagingOptions = pageLimits => {
+  return pageLimits.map(limit => ({
+    value: limit,
+    label: "".concat(limit, "/page")
+  }));
+};
+exports.generatePagingOptions = generatePagingOptions;
+const getDescription = _ref => {
+  let {
+    description,
+    data,
+    isSmallScreen,
+    totalItems,
+    itemName
+  } = _ref;
+  if (description) {
+    return description;
+  }
+  const visibleCount = data.length;
+  if (isSmallScreen) {
+    return "".concat(visibleCount, " out of ").concat(totalItems);
+  }
+  if (visibleCount === totalItems && visibleCount > 1) {
+    return "Showing all ".concat(totalItems, " ").concat(itemName, "s");
+  }
+  return "Showing ".concat(visibleCount, " out of ").concat(totalItems, " ").concat(itemName).concat(totalItems !== 1 ? "s" : "");
+};
+exports.getDescription = getDescription;
+const useFigureSmallScreen = args => {
+  const {
+    descriptionRef
+  } = args;
+  const [isSmallScreen, setSmallScreen] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      setSmallScreen(figureSmallScreen(descriptionRef));
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [isSmallScreen, descriptionRef]);
+  return isSmallScreen;
+};
+exports.useFigureSmallScreen = useFigureSmallScreen;

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.48.0",
+  "version": "0.50.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",