@canonical/react-components 3.1.0 → 3.2.0

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

@@ -10,7 +10,8 @@ export type MultiSelectProps = {
     disabled?: boolean;
     error?: string;
     selectedItems?: MultiSelectItem[];
-    help?: string;
+    help?: ReactNode;
+    helpClassName?: string;
     label?: string | null;
     listSelected?: boolean;
     onDeselectItem?: (item: MultiSelectItem) => void;

package/dist/components/MultiSelect/MultiSelect.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.MultiSelectDropdown = exports.MultiSelect = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 require("./MultiSelect.scss");
 var _index = require("../../index");
@@ -179,13 +180,16 @@ const MultiSelect = _ref4 => {
     scrollOverflow = false,
     isSortedAlphabetically = true,
     hasSelectedItemsFirst = true,
-    id
+    id,
+    help,
+    helpClassName
   } = _ref4;
   const buttonRef = (0, _react.useRef)(null);
   const [isDropdownOpen, setIsDropdownOpen] = (0, _react.useState)(false);
   const [filter, setFilter] = (0, _react.useState)("");
   const [internalSelectedItems, setInternalSelectedItems] = (0, _react.useState)([]);
   const selectedItems = externalSelectedItems || internalSelectedItems;
+  const helpId = (0, _react.useId)();
   const updateItems = newItems => {
     const uniqueItems = Array.from(new Set(newItems));
     setInternalSelectedItems(uniqueItems);
@@ -212,7 +216,7 @@ const MultiSelect = _ref4 => {
       type: "button"
     }, "Clear"));
   }
-  return /*#__PURE__*/_react.default.createElement(_index.ContextualMenu, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index.ContextualMenu, {
     className: "multi-select",
     onToggleMenu: isOpen => {
       if (!isOpen) {
@@ -270,12 +274,14 @@ const MultiSelect = _ref4 => {
         }
       },
       ref: buttonRef,
-      id: id
+      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")),
     visible: isDropdownOpen,
-    scrollOverflow: scrollOverflow
+    scrollOverflow: scrollOverflow,
+    "aria-describedby": help ? helpId : undefined
   }, /*#__PURE__*/_react.default.createElement(MultiSelectDropdown, {
     id: dropdownId,
     isOpen: isDropdownOpen,
@@ -289,7 +295,10 @@ const MultiSelect = _ref4 => {
     footer: footer,
     sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
     hasSelectedItemsFirst: hasSelectedItemsFirst
-  }));
+  })), help && /*#__PURE__*/_react.default.createElement("p", {
+    className: (0, _classnames.default)("p-form-help-text", helpClassName),
+    id: helpId
+  }, help));
 };
 exports.MultiSelect = MultiSelect;
 MultiSelect.propTypes = {
@@ -300,7 +309,8 @@ MultiSelect.propTypes = {
     value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
     group: _propTypes.default.string
   })),
-  help: _propTypes.default.string,
+  help: _propTypes.default.node,
+  helpClassName: _propTypes.default.string,
   label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOf([null])]),
   listSelected: _propTypes.default.bool,
   onDeselectItem: _propTypes.default.func,

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,5 @@ 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;
+export declare const HelpText: 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.HelpText = 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); }
@@ -108,4 +108,16 @@ const WithoutSorting = exports.WithoutSorting = {
     hasSelectedItemsFirst: false,
     id: "external-id"
   }
+};
+const Disabled = exports.Disabled = {
+  args: {
+    ...CondensedExample.args,
+    disabled: true
+  }
+};
+const HelpText = exports.HelpText = {
+  args: {
+    ...CondensedExample.args,
+    help: /*#__PURE__*/_react.default.createElement("span", null, "This is a help text, that should appear underneath the component.")
+  }
 };

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

@@ -10,7 +10,8 @@ export type MultiSelectProps = {
     disabled?: boolean;
     error?: string;
     selectedItems?: MultiSelectItem[];
-    help?: string;
+    help?: ReactNode;
+    helpClassName?: string;
     label?: string | null;
     listSelected?: boolean;
     onDeselectItem?: (item: MultiSelectItem) => void;

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

@@ -3,6 +3,7 @@ var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateIte
 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; }
+import classNames from "classnames";
 import React, { useEffect, useId, useMemo, useRef, useState } from "react";
 import "./MultiSelect.scss";
 import { Button, CheckboxInput, ContextualMenu, SearchBox } from "../../index";
@@ -172,13 +173,16 @@ export var MultiSelect = _ref4 => {
     scrollOverflow = false,
     isSortedAlphabetically = true,
     hasSelectedItemsFirst = true,
-    id
+    id,
+    help,
+    helpClassName
   } = _ref4;
   var buttonRef = useRef(null);
   var [isDropdownOpen, setIsDropdownOpen] = useState(false);
   var [filter, setFilter] = useState("");
   var [internalSelectedItems, setInternalSelectedItems] = useState([]);
   var selectedItems = externalSelectedItems || internalSelectedItems;
+  var helpId = useId();
   var updateItems = newItems => {
     var uniqueItems = Array.from(new Set(newItems));
     setInternalSelectedItems(uniqueItems);
@@ -205,7 +209,7 @@ export var MultiSelect = _ref4 => {
       type: "button"
     }, "Clear"));
   }
-  return /*#__PURE__*/React.createElement(ContextualMenu, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContextualMenu, {
     className: "multi-select",
     onToggleMenu: isOpen => {
       if (!isOpen) {
@@ -263,12 +267,14 @@ export var MultiSelect = _ref4 => {
         }
       },
       ref: buttonRef,
-      id: id
+      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")),
     visible: isDropdownOpen,
-    scrollOverflow: scrollOverflow
+    scrollOverflow: scrollOverflow,
+    "aria-describedby": help ? helpId : undefined
   }, /*#__PURE__*/React.createElement(MultiSelectDropdown, {
     id: dropdownId,
     isOpen: isDropdownOpen,
@@ -282,7 +288,10 @@ export var MultiSelect = _ref4 => {
     footer: footer,
     sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
     hasSelectedItemsFirst: hasSelectedItemsFirst
-  }));
+  })), help && /*#__PURE__*/React.createElement("p", {
+    className: classNames("p-form-help-text", helpClassName),
+    id: helpId
+  }, help));
 };
 MultiSelect.propTypes = {
   disabled: _pt.bool,
@@ -292,7 +301,8 @@ MultiSelect.propTypes = {
     value: _pt.oneOfType([_pt.string, _pt.number]).isRequired,
     group: _pt.string
   })),
-  help: _pt.string,
+  help: _pt.node,
+  helpClassName: _pt.string,
   label: _pt.oneOfType([_pt.string, _pt.oneOf([null])]),
   listSelected: _pt.bool,
   onDeselectItem: _pt.func,

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,5 @@ 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;
+export declare const HelpText: Story;

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

@@ -103,4 +103,14 @@ export var WithoutSorting = {
     hasSelectedItemsFirst: false,
     id: "external-id"
   }
+};
+export var Disabled = {
+  args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
+    disabled: true
+  })
+};
+export var HelpText = {
+  args: _objectSpread(_objectSpread({}, CondensedExample.args), {}, {
+    help: /*#__PURE__*/React.createElement("span", null, "This is a help text, that should appear underneath the component.")
+  })
 };

package/package.json

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