@canonical/react-components 3.0.0 → 3.1.0

package/dist/components/Modal/Modal.js

@@ -64,18 +64,19 @@ const Modal = _ref => {
   (0, _react.useEffect)(() => {
     modalRef.current.focus();
   }, [modalRef]);
+  const hasCloseButton = !!close;
   (0, _react.useEffect)(() => {
     var _focusableModalElemen;
     focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
     let focusIndex = 0;
     // when the close button is rendered, focus on the 2nd content element and not the close btn.
-    if (close && focusableModalElements.current.length > 1) {
+    if (hasCloseButton && focusableModalElements.current.length > 1) {
       focusIndex = 1;
     }
     (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 || _focusableModalElemen.focus({
       preventScroll: true
     });
-  }, [close]);
+  }, [hasCloseButton]);
   (0, _react.useEffect)(() => {
     const keyDown = event => {
       const listener = keyListenersMap.get(event.code);
@@ -129,7 +130,7 @@ const Modal = _ref => {
   }, /*#__PURE__*/_react.default.createElement("h2", {
     className: "p-modal__title",
     id: titleId
-  }, title), !!close && /*#__PURE__*/_react.default.createElement("button", {
+  }, title), hasCloseButton && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "p-modal__close",
     "aria-label": "Close active modal",

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

@@ -28,6 +28,7 @@ export type MultiSelectProps = {
     scrollOverflow?: boolean;
     isSortedAlphabetically?: boolean;
     hasSelectedItemsFirst?: boolean;
+    id?: string;
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;

package/dist/components/MultiSelect/MultiSelect.js

@@ -178,7 +178,8 @@ const MultiSelect = _ref4 => {
     variant = "search",
     scrollOverflow = false,
     isSortedAlphabetically = true,
-    hasSelectedItemsFirst = true
+    hasSelectedItemsFirst = true,
+    id
   } = _ref4;
   const buttonRef = (0, _react.useRef)(null);
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
@@ -229,7 +230,7 @@ const MultiSelect = _ref4 => {
       externallyControlled: true,
       "aria-controls": dropdownId,
       "aria-expanded": isDropdownOpen,
-      id: inputId,
+      id: id !== null && id !== void 0 ? id : inputId,
       role: "combobox",
       "aria-label": label || placeholder || "Search",
       disabled: disabled,
@@ -268,7 +269,8 @@ const MultiSelect = _ref4 => {
           event.stopPropagation();
         }
       },
-      ref: buttonRef
+      ref: buttonRef,
+      id: id
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "multi-select__condensed-text"
     }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")),
@@ -323,5 +325,6 @@ MultiSelect.propTypes = {
   variant: _propTypes.default.oneOf(["condensed", "search"]),
   scrollOverflow: _propTypes.default.bool,
   isSortedAlphabetically: _propTypes.default.bool,
-  hasSelectedItemsFirst: _propTypes.default.bool
+  hasSelectedItemsFirst: _propTypes.default.bool,
+  id: _propTypes.default.string
 };

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

@@ -53,7 +53,8 @@ const SearchExample = exports.SearchExample = {
     items: [...CondensedExample.args.items.map((item, i) => ({
       ...item,
       group: i % 2 === 0 ? "Group 1" : "Group 2"
-    }))]
+    }))],
+    id: "search-id"
   }
 };
 const WithDisabledItems = exports.WithDisabledItems = {
@@ -104,6 +105,7 @@ const WithoutSorting = exports.WithoutSorting = {
     }],
     variant: "condensed",
     isSortedAlphabetically: false,
-    hasSelectedItemsFirst: false
+    hasSelectedItemsFirst: false,
+    id: "external-id"
   }
 };

package/dist/esm/components/Modal/Modal.js

@@ -58,18 +58,19 @@ export var Modal = _ref => {
   useEffect(() => {
     modalRef.current.focus();
   }, [modalRef]);
+  var hasCloseButton = !!close;
   useEffect(() => {
     var _focusableModalElemen;
     focusableModalElements.current = modalRef.current.querySelectorAll(focusableElementSelectors);
     var focusIndex = 0;
     // when the close button is rendered, focus on the 2nd content element and not the close btn.
-    if (close && focusableModalElements.current.length > 1) {
+    if (hasCloseButton && focusableModalElements.current.length > 1) {
       focusIndex = 1;
     }
     (_focusableModalElemen = focusableModalElements.current[focusIndex]) === null || _focusableModalElemen === void 0 || _focusableModalElemen.focus({
       preventScroll: true
     });
-  }, [close]);
+  }, [hasCloseButton]);
   useEffect(() => {
     var keyDown = event => {
       var listener = keyListenersMap.get(event.code);
@@ -123,7 +124,7 @@ export var Modal = _ref => {
   }, /*#__PURE__*/React.createElement("h2", {
     className: "p-modal__title",
     id: titleId
-  }, title), !!close && /*#__PURE__*/React.createElement("button", {
+  }, title), hasCloseButton && /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "p-modal__close",
     "aria-label": "Close active modal",

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

@@ -28,6 +28,7 @@ export type MultiSelectProps = {
     scrollOverflow?: boolean;
     isSortedAlphabetically?: boolean;
     hasSelectedItemsFirst?: boolean;
+    id?: string;
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;

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

@@ -171,7 +171,8 @@ export var MultiSelect = _ref4 => {
     variant = "search",
     scrollOverflow = false,
     isSortedAlphabetically = true,
-    hasSelectedItemsFirst = true
+    hasSelectedItemsFirst = true,
+    id
   } = _ref4;
   var buttonRef = useRef(null);
   var [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -222,7 +223,7 @@ export var MultiSelect = _ref4 => {
       externallyControlled: true,
       "aria-controls": dropdownId,
       "aria-expanded": isDropdownOpen,
-      id: inputId,
+      id: id !== null && id !== void 0 ? id : inputId,
       role: "combobox",
       "aria-label": label || placeholder || "Search",
       disabled: disabled,
@@ -261,7 +262,8 @@ export var MultiSelect = _ref4 => {
           event.stopPropagation();
         }
       },
-      ref: buttonRef
+      ref: buttonRef,
+      id: id
     }, /*#__PURE__*/React.createElement("span", {
       className: "multi-select__condensed-text"
     }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")),
@@ -315,5 +317,6 @@ MultiSelect.propTypes = {
   variant: _pt.oneOf(["condensed", "search"]),
   scrollOverflow: _pt.bool,
   isSortedAlphabetically: _pt.bool,
-  hasSelectedItemsFirst: _pt.bool
+  hasSelectedItemsFirst: _pt.bool,
+  id: _pt.string
 };

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

@@ -49,7 +49,8 @@ export var SearchExample = {
     variant: "search",
     items: [...CondensedExample.args.items.map((item, i) => _objectSpread(_objectSpread({}, item), {}, {
       group: i % 2 === 0 ? "Group 1" : "Group 2"
-    }))]
+    }))],
+    id: "search-id"
   })
 };
 export var WithDisabledItems = {
@@ -99,6 +100,7 @@ export var WithoutSorting = {
     }],
     variant: "condensed",
     isSortedAlphabetically: false,
-    hasSelectedItemsFirst: false
+    hasSelectedItemsFirst: false,
+    id: "external-id"
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.32.1",
+    "vanilla-framework": "4.34.1",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },