@canonical/react-components 0.60.0 → 1.1.0

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

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

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

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

package/dist/components/LoginPageLayout/LoginPageLayout.js

@@ -30,13 +30,20 @@ const LoginPageLayout = _ref => {
     title,
     logo = defaultLogo
   } = _ref;
-  (0, _react.useEffect)(() => {
-    document.title = title;
-  }, [title]);
   (0, _react.useLayoutEffect)(() => {
     var _document$querySelect;
-    (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 || _document$querySelect.classList.add("is-paper");
-  });
+    const bodyInitiallyContainsIsPaper = (_document$querySelect = document.querySelector("body")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.classList.contains("is-paper");
+    if (!bodyInitiallyContainsIsPaper) {
+      var _document$querySelect2;
+      (_document$querySelect2 = document.querySelector("body")) === null || _document$querySelect2 === void 0 || _document$querySelect2.classList.add("is-paper");
+    }
+    return () => {
+      if (!bodyInitiallyContainsIsPaper) {
+        var _document$querySelect3;
+        (_document$querySelect3 = document.querySelector("body")) === null || _document$querySelect3 === void 0 || _document$querySelect3.classList.remove("is-paper");
+      }
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_Row.default, {
     className: "p-strip page-row"
   }, /*#__PURE__*/_react.default.createElement(_Col.default, {

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

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

package/dist/components/MultiSelect/MultiSelect.js

@@ -50,6 +50,8 @@ const MultiSelectDropdown = _ref2 => {
     disabledItems,
     header,
     updateItems,
+    onSelectItem,
+    onDeselectItem,
     isOpen,
     footer,
     sortFn = sortAlphabetically,
@@ -82,6 +84,11 @@ const MultiSelectDropdown = _ref2 => {
       var _selectedItems$filter;
       const newSelectedItems = checked ? [...selectedItems, foundItem] : (_selectedItems$filter = selectedItems.filter(item => "".concat(item.value) !== value)) !== null && _selectedItems$filter !== void 0 ? _selectedItems$filter : [];
       updateItems(newSelectedItems);
+      if (checked) {
+        onSelectItem === null || onSelectItem === void 0 || onSelectItem(foundItem);
+      } else {
+        onDeselectItem === null || onDeselectItem === void 0 || onDeselectItem(foundItem);
+      }
     }
   };
   return /*#__PURE__*/_react.default.createElement(_FadeInDown.FadeInDown, {
@@ -144,6 +151,8 @@ MultiSelectDropdown.propTypes = {
   })).isRequired,
   header: _propTypes.default.node,
   updateItems: _propTypes.default.func.isRequired,
+  onDeselectItem: _propTypes.default.func,
+  onSelectItem: _propTypes.default.func,
   footer: _propTypes.default.node,
   groupFn: _propTypes.default.func,
   sortFn: _propTypes.default.any,
@@ -154,13 +163,17 @@ const MultiSelect = _ref4 => {
     disabled,
     selectedItems: externalSelectedItems = [],
     label,
+    listSelected = true,
     onItemsUpdate,
+    onSelectItem,
+    onDeselectItem,
     placeholder,
     required = false,
     items = [],
     disabledItems = [],
     dropdownHeader,
     dropdownFooter,
+    showDropdownFooter = true,
     variant = "search"
   } = _ref4;
   const wrapperRef = (0, _index.useClickOutside)(() => {
@@ -188,6 +201,24 @@ const MultiSelect = _ref4 => {
   const dropdownId = (0, _react.useId)();
   const inputId = (0, _react.useId)();
   const selectedItemsLabel = selectedItems.filter(selectedItem => items.some(item => item.value === selectedItem.value)).map(el => el.label).join(", ");
+  let footer = null;
+  if (showDropdownFooter) {
+    footer = dropdownFooter ? dropdownFooter : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.Button, {
+      appearance: "link",
+      onClick: () => {
+        const enabledItems = items.filter(item => !disabledItems.some(disabledItem => disabledItem.value === item.value));
+        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"));
+  }
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: wrapperRef
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -224,7 +255,7 @@ const MultiSelect = _ref4 => {
     }
   }, /*#__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, {
+  }, listSelected && 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,
@@ -232,21 +263,9 @@ const MultiSelect = _ref4 => {
     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"))
+    onSelectItem: onSelectItem,
+    onDeselectItem: onDeselectItem,
+    footer: footer
   })));
 };
 exports.MultiSelect = MultiSelect;
@@ -260,7 +279,10 @@ MultiSelect.propTypes = {
   })),
   help: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf([null])]),
+  listSelected: _propTypes.default.bool,
+  onDeselectItem: _propTypes.default.func,
   onItemsUpdate: _propTypes.default.func,
+  onSelectItem: _propTypes.default.func,
   placeholder: _propTypes.default.string,
   required: _propTypes.default.bool,
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -276,5 +298,6 @@ MultiSelect.propTypes = {
   renderItem: _propTypes.default.func,
   dropdownHeader: _propTypes.default.node,
   dropdownFooter: _propTypes.default.node,
+  showDropdownFooter: _propTypes.default.bool,
   variant: _propTypes.default.oneOf(["condensed", "search"])
 };

package/package.json

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