@canonical/react-components 2.5.1 → 2.6.0

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

@@ -26,6 +26,8 @@ export type MultiSelectProps = {
     showDropdownFooter?: boolean;
     variant?: "condensed" | "search";
     scrollOverflow?: boolean;
+    isSortedAlphabetically?: boolean;
+    hasSelectedItemsFirst?: boolean;
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;
@@ -41,6 +43,7 @@ type MultiSelectDropdownProps = {
     footer?: ReactNode;
     groupFn?: GroupFn;
     sortFn?: SortFn;
+    hasSelectedItemsFirst?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 declare const sortAlphabetically: (a: MultiSelectItem, b: MultiSelectItem) => number;
 declare const getGroupedItems: (items: MultiSelectItem[]) => {

package/dist/components/MultiSelect/MultiSelect.js

@@ -56,6 +56,7 @@ const MultiSelectDropdown = _ref2 => {
     footer,
     sortFn = sortAlphabetically,
     groupFn = getGroupedItems,
+    hasSelectedItemsFirst = true,
     ...props
   } = _ref2;
   const selectedItemValues = (0, _react.useMemo)(() => new Set(selectedItems.map(item => item.value)), [selectedItems]);
@@ -109,7 +110,7 @@ const MultiSelectDropdown = _ref2 => {
     }, 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", {
+    }, items.toSorted(sortFn).toSorted(hasSelectedItemsFirst ? createSortSelectedItems(previouslySelectedItemValues) : () => 0).map(item => /*#__PURE__*/_react.default.createElement("li", {
       key: item.value,
       className: "multi-select__dropdown-item"
     }, /*#__PURE__*/_react.default.createElement(_index.CheckboxInput, {
@@ -155,7 +156,8 @@ MultiSelectDropdown.propTypes = {
   onSelectItem: _propTypes.default.func,
   footer: _propTypes.default.node,
   groupFn: _propTypes.default.func,
-  sortFn: _propTypes.default.any
+  sortFn: _propTypes.default.any,
+  hasSelectedItemsFirst: _propTypes.default.bool
 };
 const MultiSelect = _ref4 => {
   let {
@@ -174,7 +176,9 @@ const MultiSelect = _ref4 => {
     dropdownFooter,
     showDropdownFooter = true,
     variant = "search",
-    scrollOverflow = false
+    scrollOverflow = false,
+    isSortedAlphabetically = true,
+    hasSelectedItemsFirst = true
   } = _ref4;
   const buttonRef = (0, _react.useRef)(null);
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
@@ -280,7 +284,9 @@ const MultiSelect = _ref4 => {
     updateItems: updateItems,
     onSelectItem: onSelectItem,
     onDeselectItem: onDeselectItem,
-    footer: footer
+    footer: footer,
+    sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
+    hasSelectedItemsFirst: hasSelectedItemsFirst
   }));
 };
 exports.MultiSelect = MultiSelect;
@@ -315,5 +321,7 @@ MultiSelect.propTypes = {
   dropdownFooter: _propTypes.default.node,
   showDropdownFooter: _propTypes.default.bool,
   variant: _propTypes.default.oneOf(["condensed", "search"]),
-  scrollOverflow: _propTypes.default.bool
+  scrollOverflow: _propTypes.default.bool,
+  isSortedAlphabetically: _propTypes.default.bool,
+  hasSelectedItemsFirst: _propTypes.default.bool
 };

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof MultiSelect>;
 export declare const CondensedExample: Story;
 export declare const SearchExample: Story;
 export declare const WithDisabledItems: Story;
+export declare const WithoutSorting: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithDisabledItems = exports.SearchExample = exports.CondensedExample = void 0;
+exports.default = exports.WithoutSorting = 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); }
@@ -67,4 +67,43 @@ const WithDisabledItems = exports.WithDisabledItems = {
       value: 2
     }]
   }
+};
+const WithoutSorting = exports.WithoutSorting = {
+  args: {
+    items: [{
+      label: "Sunday",
+      value: 0
+    }, {
+      label: "Monday",
+      value: 1
+    }, {
+      label: "Tuesday",
+      value: 2
+    }, {
+      label: "Wednesday",
+      value: 3
+    }, {
+      label: "Thursday",
+      value: 4
+    }, {
+      label: "Friday",
+      value: 5
+    }, {
+      label: "Saturday",
+      value: 6
+    }],
+    selectedItems: [{
+      label: "Monday",
+      value: 1
+    }, {
+      label: "Wednesday",
+      value: 3
+    }, {
+      label: "Friday",
+      value: 5
+    }],
+    variant: "condensed",
+    isSortedAlphabetically: false,
+    hasSelectedItemsFirst: false
+  }
 };

package/dist/components/Notifications/ToastNotification/ToastNotificationList.js

@@ -155,6 +155,12 @@ const ToastNotificationList = _ref => {
 
   // Only filter input data if there are filters present
   const filteredNotifications = hasFilters ? notifications.filter(notification => filters.has(notification.type)) : notifications;
+  (0, _react.useEffect)(() => {
+    if (hasFilters && filteredNotifications.length === 0) {
+      // if there are no filtered notifications, reset the filters
+      setFilters(new Set());
+    }
+  }, [hasFilters, filteredNotifications]);
 
   // Don't assign alert role for notifications when expanded since we don't want
   // screen readers to announce every existing notification

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

@@ -26,6 +26,8 @@ export type MultiSelectProps = {
     showDropdownFooter?: boolean;
     variant?: "condensed" | "search";
     scrollOverflow?: boolean;
+    isSortedAlphabetically?: boolean;
+    hasSelectedItemsFirst?: boolean;
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;
@@ -41,6 +43,7 @@ type MultiSelectDropdownProps = {
     footer?: ReactNode;
     groupFn?: GroupFn;
     sortFn?: SortFn;
+    hasSelectedItemsFirst?: boolean;
 } & React.HTMLAttributes<HTMLDivElement>;
 declare const sortAlphabetically: (a: MultiSelectItem, b: MultiSelectItem) => number;
 declare const getGroupedItems: (items: MultiSelectItem[]) => {

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

@@ -1,5 +1,5 @@
 import _pt from "prop-types";
-var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "sortFn", "groupFn"];
+var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "sortFn", "groupFn", "hasSelectedItemsFirst"];
 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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -49,7 +49,8 @@ export var MultiSelectDropdown = _ref2 => {
       isOpen,
       footer,
       sortFn = sortAlphabetically,
-      groupFn = getGroupedItems
+      groupFn = getGroupedItems,
+      hasSelectedItemsFirst = true
     } = _ref2,
     props = _objectWithoutProperties(_ref2, _excluded);
   var selectedItemValues = useMemo(() => new Set(selectedItems.map(item => item.value)), [selectedItems]);
@@ -103,7 +104,7 @@ export var MultiSelectDropdown = _ref2 => {
     }, group) : null, /*#__PURE__*/React.createElement("ul", {
       className: "multi-select__dropdown-list",
       "aria-label": group
-    }, items.sort(sortFn).sort(createSortSelectedItems(previouslySelectedItemValues)).map(item => /*#__PURE__*/React.createElement("li", {
+    }, items.toSorted(sortFn).toSorted(hasSelectedItemsFirst ? createSortSelectedItems(previouslySelectedItemValues) : () => 0).map(item => /*#__PURE__*/React.createElement("li", {
       key: item.value,
       className: "multi-select__dropdown-item"
     }, /*#__PURE__*/React.createElement(CheckboxInput, {
@@ -148,7 +149,8 @@ MultiSelectDropdown.propTypes = {
   onSelectItem: _pt.func,
   footer: _pt.node,
   groupFn: _pt.func,
-  sortFn: _pt.any
+  sortFn: _pt.any,
+  hasSelectedItemsFirst: _pt.bool
 };
 export var MultiSelect = _ref4 => {
   var {
@@ -167,7 +169,9 @@ export var MultiSelect = _ref4 => {
     dropdownFooter,
     showDropdownFooter = true,
     variant = "search",
-    scrollOverflow = false
+    scrollOverflow = false,
+    isSortedAlphabetically = true,
+    hasSelectedItemsFirst = true
   } = _ref4;
   var buttonRef = useRef(null);
   var [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -273,7 +277,9 @@ export var MultiSelect = _ref4 => {
     updateItems: updateItems,
     onSelectItem: onSelectItem,
     onDeselectItem: onDeselectItem,
-    footer: footer
+    footer: footer,
+    sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
+    hasSelectedItemsFirst: hasSelectedItemsFirst
   }));
 };
 MultiSelect.propTypes = {
@@ -307,5 +313,7 @@ MultiSelect.propTypes = {
   dropdownFooter: _pt.node,
   showDropdownFooter: _pt.bool,
   variant: _pt.oneOf(["condensed", "search"]),
-  scrollOverflow: _pt.bool
+  scrollOverflow: _pt.bool,
+  isSortedAlphabetically: _pt.bool,
+  hasSelectedItemsFirst: _pt.bool
 };

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

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof MultiSelect>;
 export declare const CondensedExample: Story;
 export declare const SearchExample: Story;
 export declare const WithDisabledItems: Story;
+export declare const WithoutSorting: Story;

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

@@ -62,4 +62,43 @@ export var WithDisabledItems = {
       value: 2
     }]
   })
+};
+export var WithoutSorting = {
+  args: {
+    items: [{
+      label: "Sunday",
+      value: 0
+    }, {
+      label: "Monday",
+      value: 1
+    }, {
+      label: "Tuesday",
+      value: 2
+    }, {
+      label: "Wednesday",
+      value: 3
+    }, {
+      label: "Thursday",
+      value: 4
+    }, {
+      label: "Friday",
+      value: 5
+    }, {
+      label: "Saturday",
+      value: 6
+    }],
+    selectedItems: [{
+      label: "Monday",
+      value: 1
+    }, {
+      label: "Wednesday",
+      value: 3
+    }, {
+      label: "Friday",
+      value: 5
+    }],
+    variant: "condensed",
+    isSortedAlphabetically: false,
+    hasSelectedItemsFirst: false
+  }
 };

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationList.js

@@ -3,7 +3,7 @@ import Button from "../../Button";
 import Icon from "../../Icon";
 import Notification from "../Notification";
 import { DefaultTitles } from "../Notification/Notification";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useLayoutEffect, useRef, useState, useEffect } from "react";
 import { createPortal } from "react-dom";
 import Animate from "./Animate";
 import { usePrefersReducedMotion } from "../../../hooks";
@@ -148,6 +148,12 @@ var ToastNotificationList = _ref => {
 
   // Only filter input data if there are filters present
   var filteredNotifications = hasFilters ? notifications.filter(notification => filters.has(notification.type)) : notifications;
+  useEffect(() => {
+    if (hasFilters && filteredNotifications.length === 0) {
+      // if there are no filtered notifications, reset the filters
+      setFilters(new Set());
+    }
+  }, [hasFilters, filteredNotifications]);
 
   // Don't assign alert role for notifications when expanded since we don't want
   // screen readers to announce every existing notification

package/package.json

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