@canonical/react-components 3.0.1 → 3.1.1

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,9 @@ const MultiSelect = _ref4 => {
           event.stopPropagation();
         }
       },
-      ref: buttonRef
+      ref: buttonRef,
+      id: id,
+      disabled: disabled
     }, /*#__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 +326,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.scss

@@ -149,4 +149,9 @@ $dropdown-max-height: 20rem;
       transform: translateY(-50%) rotate(0);
     }
   }
+
+  &[disabled],
+  &[disabled="disabled"] {
+    border-top: 0;
+  }
 }

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

@@ -7,3 +7,4 @@ export declare const CondensedExample: Story;
 export declare const SearchExample: Story;
 export declare const WithDisabledItems: Story;
 export declare const WithoutSorting: Story;
+export declare const Disabled: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithoutSorting = exports.WithDisabledItems = exports.SearchExample = exports.CondensedExample = void 0;
+exports.default = exports.WithoutSorting = exports.WithDisabledItems = exports.SearchExample = exports.Disabled = 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); }
@@ -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,13 @@ const WithoutSorting = exports.WithoutSorting = {
     }],
     variant: "condensed",
     isSortedAlphabetically: false,
-    hasSelectedItemsFirst: false
+    hasSelectedItemsFirst: false,
+    id: "external-id"
+  }
+};
+const Disabled = exports.Disabled = {
+  args: {
+    ...CondensedExample.args,
+    disabled: true
   }
 };

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,9 @@ export var MultiSelect = _ref4 => {
           event.stopPropagation();
         }
       },
-      ref: buttonRef
+      ref: buttonRef,
+      id: id,
+      disabled: disabled
     }, /*#__PURE__*/React.createElement("span", {
       className: "multi-select__condensed-text"
     }, listSelected && selectedItems.length > 0 ? selectedItemsLabel : placeholder !== null && placeholder !== void 0 ? placeholder : "Select items")),
@@ -315,5 +318,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.scss

@@ -149,4 +149,9 @@ $dropdown-max-height: 20rem;
       transform: translateY(-50%) rotate(0);
     }
   }
+
+  &[disabled],
+  &[disabled="disabled"] {
+    border-top: 0;
+  }
 }

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

@@ -7,3 +7,4 @@ export declare const CondensedExample: Story;
 export declare const SearchExample: Story;
 export declare const WithDisabledItems: Story;
 export declare const WithoutSorting: Story;
+export declare const Disabled: Story;

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,12 @@ export var WithoutSorting = {
     }],
     variant: "condensed",
     isSortedAlphabetically: false,
-    hasSelectedItemsFirst: false
+    hasSelectedItemsFirst: false,
+    id: "external-id"
   }
+};
+export var Disabled = {
+  args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
+    disabled: true
+  })
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "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.33.0",
+    "vanilla-framework": "4.34.1",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },