@canonical/react-components 4.5.0 → 4.5.2

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

@@ -24,6 +24,9 @@ export type MultiSelectProps = {
     renderItem?: (item: MultiSelectItem) => ReactNode;
     dropdownHeader?: ReactNode;
     dropdownFooter?: ReactNode;
+    footerClassName?: string;
+    inputClassName?: string;
+    dropdownClassName?: string;
     emptyState?: ReactNode;
     emptyMessage?: string;
     showDropdownFooter?: boolean;
@@ -35,6 +38,7 @@ export type MultiSelectProps = {
     onSearchChange?: (value: string) => void;
     onOpen?: () => void;
     onClose?: () => void;
+    searchButtonType?: "submit" | "button";
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;
@@ -48,6 +52,8 @@ type MultiSelectDropdownProps = {
     onDeselectItem?: (item: MultiSelectItem) => void;
     onSelectItem?: (item: MultiSelectItem) => void;
     footer?: ReactNode;
+    footerClassName?: string;
+    dropdownClassName?: string;
     emptyState?: ReactNode;
     emptyMessage?: string;
     groupFn?: GroupFn;

package/dist/components/MultiSelect/MultiSelect.js

@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require("react"));
 require("./MultiSelect.scss");
 var _index = require("../../index");
 var _FadeInDown = require("./FadeInDown");
-const _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "emptyState", "emptyMessage", "sortFn", "groupFn", "hasSelectedItemsFirst"];
+const _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "dropdownClassName", "footerClassName", "emptyState", "emptyMessage", "sortFn", "groupFn", "hasSelectedItemsFirst"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -57,6 +57,8 @@ const MultiSelectDropdown = _ref2 => {
       onDeselectItem,
       isOpen,
       footer,
+      dropdownClassName,
+      footerClassName,
       emptyState,
       emptyMessage,
       sortFn = sortAlphabetically,
@@ -101,7 +103,7 @@ const MultiSelectDropdown = _ref2 => {
   return /*#__PURE__*/_react.default.createElement(_FadeInDown.FadeInDown, {
     isVisible: isOpen
   }, /*#__PURE__*/_react.default.createElement("div", _extends({
-    className: "multi-select__dropdown",
+    className: (0, _classnames.default)("multi-select__dropdown", dropdownClassName),
     role: "listbox"
   }, props), header ? header : null, hasItems ? groupedItems.map(_ref3 => {
     let {
@@ -130,7 +132,7 @@ const MultiSelectDropdown = _ref2 => {
   }) : emptyState !== null && emptyState !== void 0 ? emptyState : emptyMessage ? /*#__PURE__*/_react.default.createElement("p", {
     className: "multi-select__empty-state"
   }, emptyMessage) : null, footer ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "multi-select__footer"
+    className: (0, _classnames.default)("multi-select__footer", footerClassName)
   }, footer) : null));
 };
 
@@ -163,6 +165,8 @@ MultiSelectDropdown.propTypes = {
   onDeselectItem: _propTypes.default.func,
   onSelectItem: _propTypes.default.func,
   footer: _propTypes.default.node,
+  footerClassName: _propTypes.default.string,
+  dropdownClassName: _propTypes.default.string,
   emptyState: _propTypes.default.node,
   emptyMessage: _propTypes.default.string,
   groupFn: _propTypes.default.func,
@@ -184,8 +188,12 @@ const MultiSelect = _ref4 => {
     disabledItems = [],
     dropdownHeader,
     dropdownFooter,
+    footerClassName,
+    dropdownClassName,
+    inputClassName,
     emptyState,
     emptyMessage,
+    searchButtonType = "submit",
     showDropdownFooter = true,
     variant = "search",
     scrollOverflow = false,
@@ -271,6 +279,13 @@ const MultiSelect = _ref4 => {
       "aria-label": label || placeholder || "Search",
       disabled: disabled,
       autoComplete: "off",
+      onMouseDown: event => {
+        // When displayed as an input, clicking inside the input should not clear
+        // the text (e.g. if the user wants to edit what they've typed).
+        if (variant === "search") {
+          event.stopPropagation();
+        }
+      },
       onChange: value => {
         updateFilter(value);
         // reopen if dropdown has been closed via ESC
@@ -282,7 +297,8 @@ const MultiSelect = _ref4 => {
       required: required,
       type: "text",
       value: filter,
-      className: "multi-select__input"
+      searchButtonType: searchButtonType,
+      className: (0, _classnames.default)("multi-select__input", inputClassName)
     }) : /*#__PURE__*/_react.default.createElement("button", {
       role: "combobox",
       type: "button",
@@ -326,6 +342,8 @@ const MultiSelect = _ref4 => {
     onSelectItem: onSelectItem,
     onDeselectItem: onDeselectItem,
     footer: footer,
+    footerClassName: footerClassName,
+    dropdownClassName: dropdownClassName,
     emptyState: emptyState,
     emptyMessage: emptyMessage,
     sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
@@ -366,12 +384,12 @@ MultiSelect.propTypes = {
   renderItem: _propTypes.default.func,
   dropdownHeader: _propTypes.default.node,
   dropdownFooter: _propTypes.default.node,
+  footerClassName: _propTypes.default.string,
+  inputClassName: _propTypes.default.string,
+  dropdownClassName: _propTypes.default.string,
   emptyState: _propTypes.default.node,
   emptyMessage: _propTypes.default.string,
   showDropdownFooter: _propTypes.default.bool,
   variant: _propTypes.default.oneOf(["condensed", "search"]),
-  scrollOverflow: _propTypes.default.bool,
-  isSortedAlphabetically: _propTypes.default.bool,
-  hasSelectedItemsFirst: _propTypes.default.bool,
-  id: _propTypes.default.string
+  scrollOverflow: _propTypes.default.bool
 };

package/dist/components/SearchBox/SearchBox.d.ts

@@ -37,6 +37,10 @@ export type Props = PropsWithSpread<{
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * Whether the search button should be a button or submit type.
+     */
+    searchButtonType?: "submit" | "button";
     /**
      * Whether the search input should lose focus when searching.
      */

package/dist/components/SearchBox/SearchBox.js

@@ -7,7 +7,7 @@ exports.default = exports.Label = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../Icon"));
-const _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
+const _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "searchButtonType", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -34,6 +34,7 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
       onChange,
       onSearch,
       onClear,
+      searchButtonType = "submit",
       placeholder = "Search",
       shouldBlurOnSearch = true,
       shouldRefocusAfterReset,
@@ -102,7 +103,8 @@ const SearchBox = /*#__PURE__*/_react.default.forwardRef((_ref, forwardedRef) =>
   }, Label.Clear)), /*#__PURE__*/_react.default.createElement("button", {
     className: "p-search-box__button",
     disabled: disabled,
-    onClick: triggerSearch
+    onClick: triggerSearch,
+    type: searchButtonType
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     name: "search"
   }, Label.Search)));

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

@@ -24,6 +24,9 @@ export type MultiSelectProps = {
     renderItem?: (item: MultiSelectItem) => ReactNode;
     dropdownHeader?: ReactNode;
     dropdownFooter?: ReactNode;
+    footerClassName?: string;
+    inputClassName?: string;
+    dropdownClassName?: string;
     emptyState?: ReactNode;
     emptyMessage?: string;
     showDropdownFooter?: boolean;
@@ -35,6 +38,7 @@ export type MultiSelectProps = {
     onSearchChange?: (value: string) => void;
     onOpen?: () => void;
     onClose?: () => void;
+    searchButtonType?: "submit" | "button";
 };
 type GroupFn = (items: Parameters<typeof getGroupedItems>[0]) => ReturnType<typeof getGroupedItems>;
 type SortFn = typeof sortAlphabetically;
@@ -48,6 +52,8 @@ type MultiSelectDropdownProps = {
     onDeselectItem?: (item: MultiSelectItem) => void;
     onSelectItem?: (item: MultiSelectItem) => void;
     footer?: ReactNode;
+    footerClassName?: string;
+    dropdownClassName?: string;
     emptyState?: ReactNode;
     emptyMessage?: string;
     groupFn?: GroupFn;

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", "emptyState", "emptyMessage", "sortFn", "groupFn", "hasSelectedItemsFirst"];
+var _excluded = ["items", "selectedItems", "disabledItems", "header", "updateItems", "onSelectItem", "onDeselectItem", "isOpen", "footer", "dropdownClassName", "footerClassName", "emptyState", "emptyMessage", "sortFn", "groupFn", "hasSelectedItemsFirst"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -49,6 +49,8 @@ export var MultiSelectDropdown = _ref2 => {
       onDeselectItem,
       isOpen,
       footer,
+      dropdownClassName,
+      footerClassName,
       emptyState,
       emptyMessage,
       sortFn = sortAlphabetically,
@@ -93,7 +95,7 @@ export var MultiSelectDropdown = _ref2 => {
   return /*#__PURE__*/React.createElement(FadeInDown, {
     isVisible: isOpen
   }, /*#__PURE__*/React.createElement("div", _extends({
-    className: "multi-select__dropdown",
+    className: classNames("multi-select__dropdown", dropdownClassName),
     role: "listbox"
   }, props), header ? header : null, hasItems ? groupedItems.map(_ref3 => {
     var {
@@ -122,7 +124,7 @@ export var MultiSelectDropdown = _ref2 => {
   }) : emptyState !== null && emptyState !== void 0 ? emptyState : emptyMessage ? /*#__PURE__*/React.createElement("p", {
     className: "multi-select__empty-state"
   }, emptyMessage) : null, footer ? /*#__PURE__*/React.createElement("div", {
-    className: "multi-select__footer"
+    className: classNames("multi-select__footer", footerClassName)
   }, footer) : null));
 };
 
@@ -154,6 +156,8 @@ MultiSelectDropdown.propTypes = {
   onDeselectItem: _pt.func,
   onSelectItem: _pt.func,
   footer: _pt.node,
+  footerClassName: _pt.string,
+  dropdownClassName: _pt.string,
   emptyState: _pt.node,
   emptyMessage: _pt.string,
   groupFn: _pt.func,
@@ -175,8 +179,12 @@ export var MultiSelect = _ref4 => {
     disabledItems = [],
     dropdownHeader,
     dropdownFooter,
+    footerClassName,
+    dropdownClassName,
+    inputClassName,
     emptyState,
     emptyMessage,
+    searchButtonType = "submit",
     showDropdownFooter = true,
     variant = "search",
     scrollOverflow = false,
@@ -262,6 +270,13 @@ export var MultiSelect = _ref4 => {
       "aria-label": label || placeholder || "Search",
       disabled: disabled,
       autoComplete: "off",
+      onMouseDown: event => {
+        // When displayed as an input, clicking inside the input should not clear
+        // the text (e.g. if the user wants to edit what they've typed).
+        if (variant === "search") {
+          event.stopPropagation();
+        }
+      },
       onChange: value => {
         updateFilter(value);
         // reopen if dropdown has been closed via ESC
@@ -273,7 +288,8 @@ export var MultiSelect = _ref4 => {
       required: required,
       type: "text",
       value: filter,
-      className: "multi-select__input"
+      searchButtonType: searchButtonType,
+      className: classNames("multi-select__input", inputClassName)
     }) : /*#__PURE__*/React.createElement("button", {
       role: "combobox",
       type: "button",
@@ -317,6 +333,8 @@ export var MultiSelect = _ref4 => {
     onSelectItem: onSelectItem,
     onDeselectItem: onDeselectItem,
     footer: footer,
+    footerClassName: footerClassName,
+    dropdownClassName: dropdownClassName,
     emptyState: emptyState,
     emptyMessage: emptyMessage,
     sortFn: isSortedAlphabetically ? sortAlphabetically : () => 0,
@@ -356,12 +374,12 @@ MultiSelect.propTypes = {
   renderItem: _pt.func,
   dropdownHeader: _pt.node,
   dropdownFooter: _pt.node,
+  footerClassName: _pt.string,
+  inputClassName: _pt.string,
+  dropdownClassName: _pt.string,
   emptyState: _pt.node,
   emptyMessage: _pt.string,
   showDropdownFooter: _pt.bool,
   variant: _pt.oneOf(["condensed", "search"]),
-  scrollOverflow: _pt.bool,
-  isSortedAlphabetically: _pt.bool,
-  hasSelectedItemsFirst: _pt.bool,
-  id: _pt.string
+  scrollOverflow: _pt.bool
 };

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

@@ -37,6 +37,10 @@ export type Props = PropsWithSpread<{
      * A search input placeholder message.
      */
     placeholder?: string;
+    /**
+     * Whether the search button should be a button or submit type.
+     */
+    searchButtonType?: "submit" | "button";
     /**
      * Whether the search input should lose focus when searching.
      */

package/dist/esm/components/SearchBox/SearchBox.js

@@ -1,4 +1,4 @@
-var _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
+var _excluded = ["name", "id", "autocomplete", "className", "disabled", "externallyControlled", "onChange", "onSearch", "onClear", "searchButtonType", "placeholder", "shouldBlurOnSearch", "shouldRefocusAfterReset", "value"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -26,6 +26,7 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
       onChange: _onChange,
       onSearch,
       onClear,
+      searchButtonType = "submit",
       placeholder = "Search",
       shouldBlurOnSearch = true,
       shouldRefocusAfterReset,
@@ -94,7 +95,8 @@ var SearchBox = /*#__PURE__*/React.forwardRef((_ref, forwardedRef) => {
   }, Label.Clear)), /*#__PURE__*/React.createElement("button", {
     className: "p-search-box__button",
     disabled: disabled,
-    onClick: triggerSearch
+    onClick: triggerSearch,
+    type: searchButtonType
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "search"
   }, Label.Search)));

package/package.json

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