@pingux/astro 1.10.1-alpha.1 → 1.11.0

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -114,6 +114,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       onOpenChange = props.onOpenChange,
       onSelectionChange = props.onSelectionChange,
       placeholder = props.placeholder,
+      _props$readOnlyKeys = props.readOnlyKeys,
+      readOnlyKeys = _props$readOnlyKeys === void 0 ? [] : _props$readOnlyKeys,
       selectedKeys = props.selectedKeys,
       scrollBoxProps = props.scrollBoxProps;
   var hasCustomValue = mode === 'non-restrictive';
@@ -162,7 +164,10 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
         return contains(item.textValue, filterString);
       });
     },
-    items: items,
+    items: (0, _filter["default"])(items).call(items, function (_ref) {
+      var key = _ref.key;
+      return !(0, _includes["default"])(readOnlyKeys).call(readOnlyKeys, key);
+    }),
     onSelectionChange: toggleItems,
     selectionMode: 'multiple'
   }));
@@ -309,10 +314,8 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     selectionManager.toggleSelection(key);
   };
 
-  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context4 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context4, function (key) {
-    var _context5, _context6;
-
-    var item = (0, _find["default"])(_context5 = (0, _concat["default"])(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+  var readOnlyItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(readOnlyKeys).call(readOnlyKeys, function (key) {
+    var item = (0, _find["default"])(initialItems).call(initialItems, function (el) {
       return el.key === key;
     });
 
@@ -320,25 +323,33 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       return (0, _react2.jsx)(_.Chip, {
         key: item.key,
         role: "presentation",
-        bg: "active",
-        color: "white",
         label: item.name,
-        sx: {
-          alignSelf: 'center',
-          cursor: 'default',
-          height: '100%',
-          m: 5,
-          mr: 10,
-          ml: 0,
-          py: 3,
-          pr: 0
-        },
+        variant: "boxes.readOnlyChip",
+        bg: "white",
         textProps: {
           sx: {
-            fontWeight: 500,
-            textTransform: 'none'
+            color: 'text.primary'
           }
         }
+      });
+    }
+
+    return null;
+  }));
+  var selectedItems = (0, _react2.jsx)(_react["default"].Fragment, null, (0, _map["default"])(_context4 = (0, _from["default"])(selectionManager.selectedKeys)).call(_context4, function (key) {
+    var _context5, _context6;
+
+    var item = (0, _find["default"])(_context5 = (0, _concat["default"])(_context6 = []).call(_context6, initialItems, customItems)).call(_context5, function (el) {
+      return el.key === key;
+    });
+
+    if (item) {
+      return (0, _react2.jsx)(_.Chip, {
+        key: item.key,
+        role: "presentation",
+        variant: "boxes.selectedItemChip",
+        bg: "active",
+        label: item.name
       }, (0, _react2.jsx)(_.IconButton, {
         "aria-label": "delete",
         onPress: function onPress() {
@@ -406,7 +417,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       return _onKeyUp && _onKeyUp(e.nativeEvent);
     },
     slots: {
-      beforeInput: selectedItems
+      beforeInput: (0, _react2.jsx)(_react["default"].Fragment, null, readOnlyItems, " ", selectedItems)
     },
     value: filterString
   }, inputProps)), (0, _react2.jsx)(_.PopoverContainer, {
@@ -517,6 +528,11 @@ MultivaluesField.propTypes = {
   /** Temporary text that occupies the text input when it is empty. */
   placeholder: _propTypes["default"].string,
 
+  /**
+   * The item keys that are readonly. These items cannot be changed or selected.
+   */
+  readOnlyKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
+
   /** The currently selected keys in the collection (controlled). */
   selectedKeys: _isIterable.isIterableProp,
   // /** Props object that is spread directly into the ScrollBox element. */

package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Default = exports.Controlled = void 0;
+exports["default"] = exports.WithReadOnlyValues = exports.WithDisabledKeys = exports.WithCustomValues = exports.WithCustomSize = exports.Uncontrolled = exports.Default = exports.Controlled = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 
@@ -217,4 +217,18 @@ var WithCustomSize = function WithCustomSize(args) {
   }))));
 };
 
-exports.WithCustomSize = WithCustomSize;
+exports.WithCustomSize = WithCustomSize;
+
+var WithReadOnlyValues = function WithReadOnlyValues(args) {
+  return (0, _react2.jsx)(_.OverlayProvider, null, (0, _react2.jsx)(_.MultivaluesField, (0, _extends2["default"])({
+    readOnlyKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args), function (item) {
+    return (0, _react2.jsx)(_.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+exports.WithReadOnlyValues = WithReadOnlyValues;

package/lib/cjs/components/MultivaluesField/MultivaluesField.test.js

@@ -458,4 +458,25 @@ test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerat
       }
     }
   }, _callee);
-})));
+})));
+test('read only keys', function () {
+  getComponent({
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
+
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
+  expect(deleteButton1).toBeNull();
+
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
+
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
+  expect(deleteButton2).toBeNull();
+});

package/lib/cjs/index.js

@@ -60,9 +60,9 @@ var _exportNames = {
   Menu: true,
   Messages: true,
   Modal: true,
-  MultiselectFilter: true,
-  MultiselectFilterItem: true,
-  MultiselectListContainer: true,
+  CollapsiblePanel: true,
+  CollapsiblePanelItem: true,
+  CollapsiblePanelContainer: true,
   NavBar: true,
   NavBarSection: true,
   MultivaluesField: true,
@@ -210,6 +210,27 @@ _Object$defineProperty(exports, "CodeView", {
   }
 });
 
+_Object$defineProperty(exports, "CollapsiblePanel", {
+  enumerable: true,
+  get: function get() {
+    return _CollapsiblePanel["default"];
+  }
+});
+
+_Object$defineProperty(exports, "CollapsiblePanelContainer", {
+  enumerable: true,
+  get: function get() {
+    return _CollapsiblePanelContainer["default"];
+  }
+});
+
+_Object$defineProperty(exports, "CollapsiblePanelItem", {
+  enumerable: true,
+  get: function get() {
+    return _CollapsiblePanelItem["default"];
+  }
+});
+
 _Object$defineProperty(exports, "ColorField", {
   enumerable: true,
   get: function get() {
@@ -378,27 +399,6 @@ _Object$defineProperty(exports, "Modal", {
   }
 });
 
-_Object$defineProperty(exports, "MultiselectFilter", {
-  enumerable: true,
-  get: function get() {
-    return _MultiselectFilter["default"];
-  }
-});
-
-_Object$defineProperty(exports, "MultiselectFilterItem", {
-  enumerable: true,
-  get: function get() {
-    return _MultiselectFilterItem["default"];
-  }
-});
-
-_Object$defineProperty(exports, "MultiselectListContainer", {
-  enumerable: true,
-  get: function get() {
-    return _MultiselectListContainer["default"];
-  }
-});
-
 _Object$defineProperty(exports, "MultivaluesField", {
   enumerable: true,
   get: function get() {
@@ -1173,47 +1173,47 @@ _forEachInstanceProperty(_context32 = _Object$keys(_Modal)).call(_context32, fun
   });
 });
 
-var _MultiselectFilter = _interopRequireWildcard(require("./components/MultiselectFilter"));
+var _CollapsiblePanel = _interopRequireWildcard(require("./components/CollapsiblePanel"));
 
-_forEachInstanceProperty(_context33 = _Object$keys(_MultiselectFilter)).call(_context33, function (key) {
+_forEachInstanceProperty(_context33 = _Object$keys(_CollapsiblePanel)).call(_context33, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _MultiselectFilter[key]) return;
+  if (key in exports && exports[key] === _CollapsiblePanel[key]) return;
 
   _Object$defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _MultiselectFilter[key];
+      return _CollapsiblePanel[key];
     }
   });
 });
 
-var _MultiselectFilterItem = _interopRequireWildcard(require("./components/MultiselectFilterItem"));
+var _CollapsiblePanelItem = _interopRequireWildcard(require("./components/CollapsiblePanelItem"));
 
-_forEachInstanceProperty(_context34 = _Object$keys(_MultiselectFilterItem)).call(_context34, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_CollapsiblePanelItem)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _MultiselectFilterItem[key]) return;
+  if (key in exports && exports[key] === _CollapsiblePanelItem[key]) return;
 
   _Object$defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _MultiselectFilterItem[key];
+      return _CollapsiblePanelItem[key];
     }
   });
 });
 
-var _MultiselectListContainer = _interopRequireWildcard(require("./components/MultiselectListContainer"));
+var _CollapsiblePanelContainer = _interopRequireWildcard(require("./components/CollapsiblePanelContainer"));
 
-_forEachInstanceProperty(_context35 = _Object$keys(_MultiselectListContainer)).call(_context35, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_CollapsiblePanelContainer)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _MultiselectListContainer[key]) return;
+  if (key in exports && exports[key] === _CollapsiblePanelContainer[key]) return;
 
   _Object$defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _MultiselectListContainer[key];
+      return _CollapsiblePanelContainer[key];
     }
   });
 });

package/lib/cjs/recipes/{MultiselectListContainer.stories.js → CollapsiblePanel.stories.js}

@@ -69,7 +69,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var _default = {
-  title: 'Recipes/MultiselectListContainer'
+  title: 'Recipes/CollapsiblePanel with List'
 };
 exports["default"] = _default;
 var data = [{
@@ -327,7 +327,7 @@ var Default = function Default() {
         return el.key === item.key;
       })
     }));
-  })), (0, _react2.jsx)(_.MultiselectFilter, {
+  })), (0, _react2.jsx)(_.CollapsiblePanel, {
     items: selectedItems,
     selectedFilterCount: selectedItems.length.toString(),
     listTitle: "Selected Groups",
@@ -338,7 +338,7 @@ var Default = function Default() {
       key: item.key,
       textValue: item.name,
       "data-id": item.key
-    }, (0, _react2.jsx)(_.MultiselectFilterItem, {
+    }, (0, _react2.jsx)(_.CollapsiblePanelItem, {
       text: item.name,
       icon: item.isDefaultSelected ? _CheckIcon["default"] : _CloseIcon["default"],
       isDefaultSelected: item.isDefaultSelected,

package/lib/cjs/styles/variants/boxes.js

@@ -133,6 +133,27 @@ var chip = {
   }
 };
 exports.chip = chip;
+
+var multivaluesChip = _objectSpread(_objectSpread({}, chip), {}, {
+  alignSelf: 'center',
+  cursor: 'default',
+  height: '100%',
+  m: 5,
+  mr: 10,
+  ml: 0
+});
+
+var selectedItemChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  py: 3,
+  pr: 0
+});
+
+var readOnlyChip = _objectSpread(_objectSpread({}, multivaluesChip), {}, {
+  p: 3,
+  border: '1px solid',
+  borderColor: 'neutral.80'
+});
+
 var inputInContainerSlot = {
   position: 'absolute',
   bg: 'transparent',
@@ -309,6 +330,8 @@ var _default = {
   base: base,
   card: card,
   chip: chip,
+  selectedItemChip: selectedItemChip,
+  readOnlyChip: readOnlyChip,
   copy: copy,
   datePicker: datePicker,
   environmentChip: environmentChip,

package/lib/cjs/styles/variants/buttons.js

@@ -146,7 +146,7 @@ var modalCloseButton = _objectSpread(_objectSpread({}, iconButton), {}, {
   right: 10
 });
 
-var multiselectToggle = _objectSpread(_objectSpread({}, square), {}, {
+var collapsiblePanelToggle = _objectSpread(_objectSpread({}, square), {}, {
   bg: 'accent.99',
   height: '40px',
   minWidth: 'max-content',
@@ -720,7 +720,7 @@ var _default = {
   tooltipInline: tooltipInline,
   colorBlock: colorBlock,
   menuTab: menuTab,
-  multiselectToggle: multiselectToggle,
+  collapsiblePanelToggle: collapsiblePanelToggle,
   neutralText: neutralText
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/{multiselectListContainer.js → collapsiblePanel.js}

@@ -7,13 +7,13 @@ _Object$defineProperty(exports, "__esModule", {
 });
 
 exports["default"] = void 0;
-var multiselectListContainer = {
+var collapsiblePanelContainer = {
   overflowX: 'hidden',
   pr: 'sm',
   transition: 'right 500ms',
   minHeight: '80vh'
 };
-var multiselectListContent = {
+var collapsiblePanelContent = {
   bg: 'accent.99',
   fontSize: 'sm',
   height: '100%',
@@ -32,7 +32,7 @@ var multiselectListContent = {
     justifyContent: 'space-between'
   }
 };
-var multiselectListTitle = {
+var collapsiblePanelContainerTitle = {
   alignContent: 'center',
   bg: 'accent.99',
   display: 'flex',
@@ -44,7 +44,7 @@ var multiselectListTitle = {
   maxWidth: 'max-content !important',
   margin: '0'
 };
-var multiselectListBadge = {
+var collapsiblePanelBadge = {
   borderRadius: '5px',
   display: 'flex',
   height: '17px',
@@ -57,15 +57,15 @@ var multiselectListBadge = {
   alignItems: 'center',
   fontWeight: 500
 };
-var multiselectFilterItem = {
+var collapsiblePanellItem = {
   minHeight: '45px',
   margin: 'auto'
 };
 var _default = {
-  multiselectListContainer: multiselectListContainer,
-  multiselectListContent: multiselectListContent,
-  multiselectListTitle: multiselectListTitle,
-  multiselectListBadge: multiselectListBadge,
-  multiselectFilterItem: multiselectFilterItem
+  collapsiblePanelContainer: collapsiblePanelContainer,
+  collapsiblePanelContent: collapsiblePanelContent,
+  collapsiblePanelContainerTitle: collapsiblePanelContainerTitle,
+  collapsiblePanelBadge: collapsiblePanelBadge,
+  collapsiblePanellItem: collapsiblePanellItem
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/text.js

@@ -187,7 +187,7 @@ var navBarHeaderText = _objectSpread(_objectSpread({}, wordWrap), {}, {
   maxWidth: '150px'
 });
 
-var multiselectFilterItem = _objectSpread(_objectSpread({}, wordWrap), {}, {
+var collapsiblePanellItem = _objectSpread(_objectSpread({}, wordWrap), {}, {
   color: 'neutral.30',
   fontSize: 'sm',
   fontWeight: 500,
@@ -197,7 +197,7 @@ var multiselectFilterItem = _objectSpread(_objectSpread({}, wordWrap), {}, {
   whiteSpace: 'nowrap'
 });
 
-var multiselectFilterTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
+var collapsiblePanelTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontSize: 'sm',
   fontWeight: 500,
   color: 'text.secondary',
@@ -324,8 +324,8 @@ var text = {
   }),
   maskedValue: maskedValue,
   expandableRow: expandableRow,
-  multiselectFilterItem: multiselectFilterItem,
-  multiselectFilterTitle: multiselectFilterTitle,
+  collapsiblePanellItem: collapsiblePanellItem,
+  collapsiblePanelTitle: collapsiblePanelTitle,
   navBarHeaderText: navBarHeaderText,
   navBarSubtitle: navBarSubtitle,
   placeholder: {

package/lib/cjs/styles/variants/variants.js

@@ -74,7 +74,7 @@ var tabs = _interopRequireWildcard(require("./tabs"));
 
 var _tooltip = _interopRequireDefault(require("./tooltip"));
 
-var _multiselectListContainer = _interopRequireDefault(require("./multiselectListContainer"));
+var _collapsiblePanel = _interopRequireDefault(require("./collapsiblePanel"));
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -97,7 +97,7 @@ var _default = _objectSpread(_objectSpread({
   menuItem: _menuItem["default"],
   messages: _messages["default"],
   modal: _modal["default"],
-  multiselectListContainer: _multiselectListContainer["default"],
+  collapsiblePanel: _collapsiblePanel["default"],
   navBar: _navBar["default"],
   numberField: _numberField["default"],
   overlayPanel: _overlayPanel["default"],

package/lib/components/{MultiselectFilter/MultiselectFilter.js → CollapsiblePanel/CollapsiblePanel.js}

@@ -7,15 +7,15 @@ import { useFocusRing } from '@react-aria/focus';
 import { mergeProps } from '@react-aria/utils';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { useStatusClasses } from '../../hooks';
-import MultiselectBadge from '../MultiselectListContainer/MultiselectBadge';
-import { Box, ListView, MultiselectListContainer, Text } from '../../index';
+import CollapsiblePanelBadge from '../CollapsiblePanelContainer/CollapsiblePanelBadge';
+import { Box, ListView, CollapsiblePanelContainer, Text } from '../../index';
 /**
- * The MultiselectFilter serves as a filter menu with a menu title
+ * The CollapsiblePanel serves as a filter menu with a menu title
  * and selected count displayed in a badge.
  */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var MultiselectFilter = /*#__PURE__*/forwardRef(function (props, ref) {
+var CollapsiblePanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
       className = props.className,
       closeAriaLabel = props.closeAriaLabel,
@@ -45,7 +45,7 @@ var MultiselectFilter = /*#__PURE__*/forwardRef(function (props, ref) {
   }),
       classNames = _useStatusClasses.classNames;
 
-  return ___EmotionJSX(MultiselectListContainer, {
+  return ___EmotionJSX(CollapsiblePanelContainer, {
     closeAriaLabel: closeAriaLabel,
     isDefaultOpen: isDefaultOpen,
     isOpen: isOpen,
@@ -54,16 +54,16 @@ var MultiselectFilter = /*#__PURE__*/forwardRef(function (props, ref) {
     selectedFilterCount: selectedFilterCount
   }, ___EmotionJSX(Box, _extends({
     className: classNames,
-    "data-testid": "multiselect-filter",
+    "data-testid": "collapsible-panel",
     ref: ref,
     tabIndex: 0,
-    variant: "multiselectListContainer.multiselectListContent"
+    variant: "collapsiblePanel.collapsiblePanelContent"
   }, mergedProps, others), ___EmotionJSX(Box, {
     isRow: true,
-    variant: "multiselectListContainer.multiselectListTitle"
+    variant: "collapsiblePanel.collapsiblePanelContainerTitle"
   }, ___EmotionJSX(Text, {
-    variant: "multiselectFilterTitle"
-  }, listTitle), selectedFilterCount && ___EmotionJSX(MultiselectBadge, {
+    variant: "collapsiblePanelTitle"
+  }, listTitle), selectedFilterCount && ___EmotionJSX(CollapsiblePanelBadge, {
     margin: "0",
     selectedFilterCount: selectedFilterCount
   })), ___EmotionJSX(Box, {
@@ -79,7 +79,7 @@ var MultiselectFilter = /*#__PURE__*/forwardRef(function (props, ref) {
     pl: "md"
   }, children))));
 });
-MultiselectFilter.propTypes = {
+CollapsiblePanel.propTypes = {
   /** Amount of selected items indicator. */
   selectedFilterCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -112,8 +112,8 @@ MultiselectFilter.propTypes = {
   /** Defines a string value that labels the trigger icon when menu is closed. */
   openAriaLabel: PropTypes.string
 };
-MultiselectFilter.defaultProps = {
+CollapsiblePanel.defaultProps = {
   isDefaultOpen: true
 };
-MultiselectFilter.displayName = 'MultiselectFilter';
-export default MultiselectFilter;
+CollapsiblePanel.displayName = 'CollapsiblePanel';
+export default CollapsiblePanel;

package/lib/components/{MultiselectFilter/MultiselectFilter.stories.js → CollapsiblePanel/CollapsiblePanel.stories.js}

@@ -6,13 +6,13 @@ import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import FilterIcon from 'mdi-react/FilterIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
 import AccountIcon from 'mdi-react/AccountIcon';
-import MultiselectFilter from './MultiselectFilter';
+import CollapsiblePanel from './CollapsiblePanel';
 import { useOverlayPanelState } from '../../hooks';
-import { Breadcrumbs, Box, Button, Chip, ListView, Item, Icon, IconButton, MultiselectFilterItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
+import { Breadcrumbs, Box, Button, Chip, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'MultiselectFilter',
-  component: MultiselectFilter,
+  title: 'CollapsiblePanel',
+  component: CollapsiblePanel,
   argTypes: {
     listTitle: {
       defaultValue: 'Selected Groups'
@@ -117,9 +117,9 @@ var changeSelection = function changeSelection(selected) {
 };
 
 export var Default = function Default(args) {
-  return ___EmotionJSX(MultiselectFilter, args);
+  return ___EmotionJSX(CollapsiblePanel, args);
 };
-export var MultiselectWithBadge = function MultiselectWithBadge(args) {
+export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
   var _useOverlayPanelState = useOverlayPanelState(),
       state = _useOverlayPanelState.state,
       onClose = _useOverlayPanelState.onClose;
@@ -234,7 +234,7 @@ export var MultiselectWithBadge = function MultiselectWithBadge(args) {
     })), ___EmotionJSX(Text, {
       variant: "listSubtitle"
     }, item.subtitle))));
-  })), ___EmotionJSX(MultiselectFilter, _extends({
+  })), ___EmotionJSX(CollapsiblePanel, _extends({
     items: mockData,
     onSelectionChange: changeSelection,
     selectedFilterCount: "1000+"
@@ -243,7 +243,7 @@ export var MultiselectWithBadge = function MultiselectWithBadge(args) {
       key: item.key,
       textValue: item.name,
       "data-id": item.key
-    }, ___EmotionJSX(MultiselectFilterItem, {
+    }, ___EmotionJSX(CollapsiblePanelItem, {
       text: item.name,
       icon: FilterIcon
     }));

package/lib/components/{MultiselectFilter/MultiselectFilter.test.js → CollapsiblePanel/CollapsiblePanel.test.js}

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import MultiselectFilter from './MultiselectFilter';
+import CollapsiblePanel from './CollapsiblePanel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'multiselect-filter-item';
+var testId = 'collapsible-panel-item';
 var onSelectionChange = jest.fn();
 var defaultProps = {
   'data-testid': testId,
@@ -19,7 +19,7 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(MultiselectFilter, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(CollapsiblePanel, _extends({}, defaultProps, props)));
 };
 
 beforeAll(function () {
@@ -55,15 +55,15 @@ axeTest(getComponent, {
     }
   }
 });
-test('default multiselectFilter', function () {
+test('default CollapsiblePanel', function () {
   getComponent();
-  var multiselectFilter = screen.getByTestId(testId);
-  expect(multiselectFilter).toBeInTheDocument();
+  var collapsiblePanel = screen.getByTestId(testId);
+  expect(collapsiblePanel).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
-  var multiselectFilter = screen.getByTestId(testId);
-  expect(multiselectFilter).toHaveClass('testing-class');
+  var collapsiblePanel = screen.getByTestId(testId);
+  expect(collapsiblePanel).toHaveClass('testing-class');
 });

package/lib/components/CollapsiblePanel/index.js

@@ -0,0 +1 @@
+export { default } from './CollapsiblePanel';