@pingux/astro 1.10.1-alpha.1 → 1.10.1-alpha.2

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

@@ -32,7 +32,7 @@ var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _hooks = require("../../hooks");
 
-var _MultiselectBadge = _interopRequireDefault(require("../MultiselectListContainer/MultiselectBadge"));
+var _CollapsiblePanelBadge = _interopRequireDefault(require("../CollapsiblePanelContainer/CollapsiblePanelBadge"));
 
 var _index = require("../../index");
 
@@ -45,10 +45,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 /**
- * 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.
  */
-var MultiselectFilter = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var CollapsiblePanel = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
       className = props.className,
       closeAriaLabel = props.closeAriaLabel,
@@ -78,7 +78,7 @@ var MultiselectFilter = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
   }),
       classNames = _useStatusClasses.classNames;
 
-  return (0, _react2.jsx)(_index.MultiselectListContainer, {
+  return (0, _react2.jsx)(_index.CollapsiblePanelContainer, {
     closeAriaLabel: closeAriaLabel,
     isDefaultOpen: isDefaultOpen,
     isOpen: isOpen,
@@ -87,16 +87,16 @@ var MultiselectFilter = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     selectedFilterCount: selectedFilterCount
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     className: classNames,
-    "data-testid": "multiselect-filter",
+    "data-testid": "collapsible-panel",
     ref: ref,
     tabIndex: 0,
-    variant: "multiselectListContainer.multiselectListContent"
+    variant: "collapsiblePanel.collapsiblePanelContent"
   }, mergedProps, others), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    variant: "multiselectListContainer.multiselectListTitle"
+    variant: "collapsiblePanel.collapsiblePanelContainerTitle"
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "multiselectFilterTitle"
-  }, listTitle), selectedFilterCount && (0, _react2.jsx)(_MultiselectBadge["default"], {
+    variant: "collapsiblePanelTitle"
+  }, listTitle), selectedFilterCount && (0, _react2.jsx)(_CollapsiblePanelBadge["default"], {
     margin: "0",
     selectedFilterCount: selectedFilterCount
   })), (0, _react2.jsx)(_index.Box, {
@@ -112,7 +112,7 @@ var MultiselectFilter = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref
     pl: "md"
   }, children))));
 });
-MultiselectFilter.propTypes = {
+CollapsiblePanel.propTypes = {
   /** Amount of selected items indicator. */
   selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
 
@@ -145,9 +145,9 @@ MultiselectFilter.propTypes = {
   /** Defines a string value that labels the trigger icon when menu is closed. */
   openAriaLabel: _propTypes["default"].string
 };
-MultiselectFilter.defaultProps = {
+CollapsiblePanel.defaultProps = {
   isDefaultOpen: true
 };
-MultiselectFilter.displayName = 'MultiselectFilter';
-var _default = MultiselectFilter;
+CollapsiblePanel.displayName = 'CollapsiblePanel';
+var _default = CollapsiblePanel;
 exports["default"] = _default;

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

@@ -14,7 +14,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.MultiselectWithBadge = exports.Default = void 0;
+exports["default"] = exports.Default = exports.CollapsiblePanelWithBadge = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -32,7 +32,7 @@ var _SearchIcon = _interopRequireDefault(require("mdi-react/SearchIcon"));
 
 var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
 
-var _MultiselectFilter = _interopRequireDefault(require("./MultiselectFilter"));
+var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel"));
 
 var _hooks = require("../../hooks");
 
@@ -45,8 +45,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var _default = {
-  title: 'MultiselectFilter',
-  component: _MultiselectFilter["default"],
+  title: 'CollapsiblePanel',
+  component: _CollapsiblePanel["default"],
   argTypes: {
     listTitle: {
       defaultValue: 'Selected Groups'
@@ -152,12 +152,12 @@ var changeSelection = function changeSelection(selected) {
 };
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_MultiselectFilter["default"], args);
+  return (0, _react2.jsx)(_CollapsiblePanel["default"], args);
 };
 
 exports.Default = Default;
 
-var MultiselectWithBadge = function MultiselectWithBadge(args) {
+var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args) {
   var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
       state = _useOverlayPanelState.state,
       onClose = _useOverlayPanelState.onClose;
@@ -272,7 +272,7 @@ var MultiselectWithBadge = function MultiselectWithBadge(args) {
     })), (0, _react2.jsx)(_index.Text, {
       variant: "listSubtitle"
     }, item.subtitle))));
-  })), (0, _react2.jsx)(_MultiselectFilter["default"], (0, _extends2["default"])({
+  })), (0, _react2.jsx)(_CollapsiblePanel["default"], (0, _extends2["default"])({
     items: mockData,
     onSelectionChange: changeSelection,
     selectedFilterCount: "1000+"
@@ -281,11 +281,11 @@ var MultiselectWithBadge = function MultiselectWithBadge(args) {
       key: item.key,
       textValue: item.name,
       "data-id": item.key
-    }, (0, _react2.jsx)(_index.MultiselectFilterItem, {
+    }, (0, _react2.jsx)(_index.CollapsiblePanelItem, {
       text: item.name,
       icon: _FilterIcon["default"]
     }));
   })))));
 };
 
-exports.MultiselectWithBadge = MultiselectWithBadge;
+exports.CollapsiblePanelWithBadge = CollapsiblePanelWithBadge;

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

@@ -10,11 +10,11 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
-var _MultiselectFilter = _interopRequireDefault(require("./MultiselectFilter"));
+var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel"));
 
 var _react2 = require("@emotion/react");
 
-var testId = 'multiselect-filter-item';
+var testId = 'collapsible-panel-item';
 var onSelectionChange = jest.fn();
 var defaultProps = {
   'data-testid': testId,
@@ -29,7 +29,7 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectFilter["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_CollapsiblePanel["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
 
 beforeAll(function () {
@@ -65,19 +65,19 @@ afterAll(function () {
     }
   }
 });
-test('default multiselectFilter', function () {
+test('default CollapsiblePanel', function () {
   getComponent();
 
-  var multiselectFilter = _testWrapper.screen.getByTestId(testId);
+  var collapsiblePanel = _testWrapper.screen.getByTestId(testId);
 
-  expect(multiselectFilter).toBeInTheDocument();
+  expect(collapsiblePanel).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
 
-  var multiselectFilter = _testWrapper.screen.getByTestId(testId);
+  var collapsiblePanel = _testWrapper.screen.getByTestId(testId);
 
-  expect(multiselectFilter).toHaveClass('testing-class');
+  expect(collapsiblePanel).toHaveClass('testing-class');
 });

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

@@ -11,8 +11,8 @@ _Object$defineProperty(exports, "__esModule", {
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _MultiselectFilter["default"];
+    return _CollapsiblePanel["default"];
   }
 });
 
-var _MultiselectFilter = _interopRequireDefault(require("./MultiselectFilter"));
+var _CollapsiblePanel = _interopRequireDefault(require("./CollapsiblePanel"));

package/lib/cjs/components/{MultiselectListContainer/MultiselectBadge.js → CollapsiblePanelContainer/CollapsiblePanelBadge.js}

@@ -25,9 +25,9 @@ var _react2 = require("@emotion/react");
 var _excluded = ["selectedFilterCount"];
 
 /**
- * The MultiselectBadge serves as a badge to display selected count.
+ * The CollapsiblePanelBadge serves as a badge to display selected count.
  */
-var MultiselectBadge = function MultiselectBadge(props) {
+var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
   var selectedFilterCount = props.selectedFilterCount,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (0, _react2.jsx)(_Chip["default"], (0, _extends2["default"])({
@@ -35,15 +35,15 @@ var MultiselectBadge = function MultiselectBadge(props) {
     bg: "neutral.90",
     label: selectedFilterCount.toString(),
     textColor: "neutral.30",
-    variant: "multiselectListContainer.multiselectListBadge",
+    variant: "collapsiblePanel.collapsiblePanelBadge",
     isUppercase: true
   }, others));
 };
 
-MultiselectBadge.propTypes = {
+CollapsiblePanelBadge.propTypes = {
   selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   margin: _propTypes["default"].string
 };
-MultiselectBadge.displayName = 'MultiselectBadge';
-var _default = MultiselectBadge;
+CollapsiblePanelBadge.displayName = 'CollapsiblePanelBadge';
+var _default = CollapsiblePanelBadge;
 exports["default"] = _default;

package/lib/cjs/components/{MultiselectListContainer/MultiselectBadge.test.js → CollapsiblePanelContainer/CollapsiblePanelBadge.test.js}

@@ -10,11 +10,11 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
-var _MultiselectBadge = _interopRequireDefault(require("./MultiselectBadge"));
+var _CollapsiblePanelBadge = _interopRequireDefault(require("./CollapsiblePanelBadge"));
 
 var _react2 = require("@emotion/react");
 
-var testId = 'test-multiselectBadge';
+var testId = 'test-collapsiblePanelBadge';
 var defaultProps = {
   'data-testid': testId,
   selectedFilterCount: 9
@@ -22,7 +22,7 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectBadge["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_CollapsiblePanelBadge["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
 
 afterEach(function () {
@@ -30,19 +30,19 @@ afterEach(function () {
 }); // Need to be added to each test file to test accessibility using axe.
 
 (0, _testAxe["default"])(getComponent);
-test('default multiselectBadge', function () {
+test('default CollapsiblePanelBadge', function () {
   getComponent();
 
-  var multiselectBadge = _testWrapper.screen.getByTestId(testId);
+  var collapsiblePanelBadge = _testWrapper.screen.getByTestId(testId);
 
-  expect(multiselectBadge).toBeInTheDocument();
+  expect(collapsiblePanelBadge).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
 
-  var multiselectBadge = _testWrapper.screen.getByTestId(testId);
+  var collapsiblePanelBadge = _testWrapper.screen.getByTestId(testId);
 
-  expect(multiselectBadge).toHaveClass('testing-class');
+  expect(collapsiblePanelBadge).toHaveClass('testing-class');
 });

package/lib/cjs/components/{MultiselectListContainer/MultiselectListContainer.js → CollapsiblePanelContainer/CollapsiblePanelContainer.js}

@@ -44,7 +44,7 @@ var _ChevronLeftIcon = _interopRequireDefault(require("mdi-react/ChevronLeftIcon
 
 var _overlays = require("@react-stately/overlays");
 
-var _MultiselectBadge = _interopRequireDefault(require("./MultiselectBadge"));
+var _CollapsiblePanelBadge = _interopRequireDefault(require("./CollapsiblePanelBadge"));
 
 var _index = require("../../index");
 
@@ -63,10 +63,10 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /**
- * The MultiselectListContainer serves as a wrapper around a list and its associated trigger,
+ * The CollapsiblePanelContainer serves as a wrapper around a list and its associated trigger,
  * linking the list's open state with the trigger's press state and providing necessary context.
  */
-var MultiselectListContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var CollapsiblePanelContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
       className = props.className,
       children = props.children,
@@ -109,28 +109,28 @@ var MultiselectListContainer = /*#__PURE__*/(0, _react.forwardRef)(function (pro
     className: classNames,
     onKeyUp: handleClose,
     ref: ref,
-    variant: "multiselectListContainer.multiselectListContainer",
+    variant: "collapsiblePanel.collapsiblePanelContainer",
     isRow: true
   }, others), (0, _react2.jsx)(_index.IconButton, {
     isRow: true,
     "aria-label": state.isOpen ? closeAriaLabel : openAriaLabel,
-    "data-testid": "multiselect-list-button",
+    "data-testid": "collapsible-panel-button",
     onPress: handleButtonPress,
     ref: triggerRef,
-    variant: "multiselectToggle",
+    variant: "collapsiblePanelToggle",
     pr: "sm"
   }, (0, _react2.jsx)(_index.Icon, {
     color: "active",
     icon: state.isOpen ? _ChevronRightIcon["default"] : _ChevronLeftIcon["default"],
     role: "button",
     size: "30px"
-  }), !state.isOpen && selectedFilterCount && (0, _react2.jsx)(_MultiselectBadge["default"], {
-    "data-testid": "multiselect-list-badge",
+  }), !state.isOpen && selectedFilterCount && (0, _react2.jsx)(_CollapsiblePanelBadge["default"], {
+    "data-testid": "collapsible-panel-badge",
     margin: "auto",
     selectedFilterCount: selectedFilterCount
   })), state.isOpen && _objectSpread({}, children));
 });
-MultiselectListContainer.propTypes = {
+CollapsiblePanelContainer.propTypes = {
   /** Amount of selected items indicator. */
   selectedFilterCount: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
 
@@ -154,10 +154,10 @@ MultiselectListContainer.propTypes = {
   /** Defines a string value that labels the trigger icon when menu is closed. */
   openAriaLabel: _propTypes["default"].string
 };
-MultiselectListContainer.defaultProps = {
+CollapsiblePanelContainer.defaultProps = {
   openAriaLabel: 'Open filter menu?',
   closeAriaLabel: 'Close filter menu?'
 };
-MultiselectListContainer.displayName = 'MultiselectListContainer';
-var _default = MultiselectListContainer;
+CollapsiblePanelContainer.displayName = 'CollapsiblePanelContainer';
+var _default = CollapsiblePanelContainer;
 exports["default"] = _default;

package/lib/cjs/components/{MultiselectListContainer/MultiselectListContainer.test.js → CollapsiblePanelContainer/CollapsiblePanelContainer.test.js}

@@ -12,22 +12,22 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
-var _MultiselectListContainer = _interopRequireDefault(require("./MultiselectListContainer"));
+var _CollapsiblePanelContainer = _interopRequireDefault(require("./CollapsiblePanelContainer"));
 
 var _react2 = require("@emotion/react");
 
-var testId = 'test-multiselectListContainer';
-var multiselectListBadgeId = 'multiselect-list-badge';
-var multiselectListButtonId = 'multiselect-list-button';
-var multiselectFilterId = 'multiselect-filter';
+var testId = 'test-collapsiblePanelContainer';
+var collapsiblePanelBadgeId = 'collapsible-panel-badge';
+var collapsiblePanelButtonId = 'collapsible-panel-button';
+var collapsiblePanelId = 'collapsible-panel';
 var defaultProps = {
   'data-testid': testId
 };
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectListContainer["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("div", {
-    "data-testid": multiselectFilterId
+  return (0, _testWrapper.render)((0, _react2.jsx)(_CollapsiblePanelContainer["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("div", {
+    "data-testid": collapsiblePanelId
   })));
 };
 
@@ -36,21 +36,21 @@ afterEach(function () {
 }); // Need to be added to each test file to test accessibility using axe.
 
 (0, _testAxe["default"])(getComponent);
-test('default MultiselectListContainer', function () {
+test('default CollapsiblePanelContainer', function () {
   getComponent();
 
-  var multiselectListContainer = _testWrapper.screen.getByTestId(testId);
+  var collapsiblePanelContainer = _testWrapper.screen.getByTestId(testId);
 
-  expect(multiselectListContainer).toBeInTheDocument();
+  expect(collapsiblePanelContainer).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
 
-  var multiselectListContainer = _testWrapper.screen.getByTestId(testId);
+  var collapsiblePanelContainer = _testWrapper.screen.getByTestId(testId);
 
-  expect(multiselectListContainer).toHaveClass('testing-class');
+  expect(collapsiblePanelContainer).toHaveClass('testing-class');
 });
 test('shows badge when container is closed', function () {
   getComponent({
@@ -60,7 +60,7 @@ test('shows badge when container is closed', function () {
     }
   });
 
-  var badge = _testWrapper.screen.getByTestId(multiselectListBadgeId);
+  var badge = _testWrapper.screen.getByTestId(collapsiblePanelBadgeId);
 
   expect(badge).toBeInTheDocument();
 });
@@ -72,41 +72,41 @@ test('updates aria label when button is clicked', function () {
     state: state
   });
 
-  var button = _testWrapper.screen.getByTestId(multiselectListButtonId);
+  var button = _testWrapper.screen.getByTestId(collapsiblePanelButtonId);
 
   _userEvent["default"].click(button);
 
-  var multiSelect = _testWrapper.screen.queryByTestId(multiselectFilterId);
+  var collapsiblePanel = _testWrapper.screen.queryByTestId(collapsiblePanelId);
 
   expect(button).toHaveAttribute('aria-label', 'Close filter menu?');
-  expect(multiSelect).toBeInTheDocument();
+  expect(collapsiblePanel).toBeInTheDocument();
 
   _userEvent["default"].click(button);
 
   expect(button).toHaveAttribute('aria-label', 'Open filter menu?');
-  expect(multiSelect).not.toBeInTheDocument();
+  expect(collapsiblePanel).not.toBeInTheDocument();
 });
 test('shows children when isOpen is true', function () {
   getComponent({
     isOpen: true
   });
 
-  var multiselectFilter = _testWrapper.screen.getByTestId(multiselectFilterId);
+  var collapsiblePanel = _testWrapper.screen.getByTestId(collapsiblePanelId);
 
-  expect(multiselectFilter).toBeInTheDocument();
+  expect(collapsiblePanel).toBeInTheDocument();
 });
 test('should hide children when pressing the escape key', function () {
   getComponent();
 
-  var button = _testWrapper.screen.getByTestId(multiselectListButtonId);
+  var button = _testWrapper.screen.getByTestId(collapsiblePanelButtonId);
 
   _userEvent["default"].click(button);
 
-  var multiSelect = _testWrapper.screen.queryByTestId(multiselectFilterId);
+  var collapsiblePanel = _testWrapper.screen.queryByTestId(collapsiblePanelId);
 
-  expect(multiSelect).toBeInTheDocument();
+  expect(collapsiblePanel).toBeInTheDocument();
 
   _userEvent["default"].type(button, '{esc}');
 
-  expect(multiSelect).not.toBeInTheDocument();
+  expect(collapsiblePanel).not.toBeInTheDocument();
 });

package/lib/cjs/components/{MultiselectListContainer → CollapsiblePanelContainer}/index.js

@@ -11,8 +11,8 @@ _Object$defineProperty(exports, "__esModule", {
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _MultiselectListContainer["default"];
+    return _CollapsiblePanelContainer["default"];
   }
 });
 
-var _MultiselectListContainer = _interopRequireDefault(require("./MultiselectListContainer"));
+var _CollapsiblePanelContainer = _interopRequireDefault(require("./CollapsiblePanelContainer"));

package/lib/cjs/components/{MultiselectFilterItem/MultiselectFilterItem.js → CollapsiblePanelItem/CollapsiblePanelItem.js}

@@ -28,23 +28,23 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var MultiselectFilterItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var CollapsiblePanelItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var text = props.text,
       icon = props.icon,
       isDefaultSelected = props.isDefaultSelected,
       onPress = props.onPress;
   var iconElement = icon && (0, _react2.jsx)(_index.Icon, {
-    "data-testid": "multiselect-filter-data-icon",
+    "data-testid": "collapsible-panel-data-icon",
     icon: icon,
     color: isDefaultSelected ? 'neutral.10' : 'active',
     size: 13
   });
   return (0, _react2.jsx)(_index.Box, {
-    "data-testid": "multiselect-filter-item",
+    "data-testid": "collapsible-panel-item",
     isRow: true,
     ref: ref
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "multiselectFilterItem"
+    variant: "collapsiblePanellItem"
   }, text), iconElement && (isDefaultSelected ? iconElement : (0, _react2.jsx)(_index.IconButton, {
     sx: {
       width: 13,
@@ -57,7 +57,7 @@ var MultiselectFilterItem = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     onPress: onPress
   }, iconElement)));
 });
-MultiselectFilterItem.propTypes = {
+CollapsiblePanelItem.propTypes = {
   /**
      * Display text.
      */
@@ -79,6 +79,6 @@ MultiselectFilterItem.propTypes = {
    */
   onPress: _propTypes["default"].func
 };
-MultiselectFilterItem.displayName = 'MultiselectFilterItem';
-var _default = MultiselectFilterItem;
+CollapsiblePanelItem.displayName = 'CollapsiblePanelItem';
+var _default = CollapsiblePanelItem;
 exports["default"] = _default;

package/lib/cjs/components/{MultiselectFilterItem/MultiselectFilterItem.test.js → CollapsiblePanelItem/CollapsiblePanelItem.test.js}

@@ -12,19 +12,19 @@ var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 
-var _MultiselectFilterItem = _interopRequireDefault(require("./MultiselectFilterItem"));
+var _CollapsiblePanelItem = _interopRequireDefault(require("./CollapsiblePanelItem"));
 
 var _react2 = require("@emotion/react");
 
-var testId = 'multiselect-filter-item';
-var iconId = 'multiselect-filter-data-icon';
+var testId = 'collapsible-panel-item';
+var iconId = 'collapsible-panel-data-icon';
 var defaultProps = {
   text: 'Item name'
 };
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_MultiselectFilterItem["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_CollapsiblePanelItem["default"], (0, _extends2["default"])({}, defaultProps, props)));
 };
 
 afterEach(function () {
@@ -32,15 +32,15 @@ afterEach(function () {
 }); // Need to be added to each test file to test accessibility using axe.
 
 (0, _testAxe["default"])(getComponent);
-test('default multiselectFilter', function () {
+test('default collapsiblePanel', function () {
   getComponent();
 
-  var multiselectFilterItem = _testWrapper.screen.getByTestId(testId);
+  var collapsiblePanelItem = _testWrapper.screen.getByTestId(testId);
 
   var icon = _testWrapper.screen.queryByTestId(iconId);
 
   expect(icon).not.toBeInTheDocument();
-  expect(multiselectFilterItem).toBeInTheDocument();
+  expect(collapsiblePanelItem).toBeInTheDocument();
 });
 test('icon button displays when icon prop is present', function () {
   getComponent({

package/lib/cjs/components/{MultiselectFilterItem → CollapsiblePanelItem}/index.js

@@ -11,8 +11,8 @@ _Object$defineProperty(exports, "__esModule", {
 _Object$defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _MultiselectFilterItem["default"];
+    return _CollapsiblePanelItem["default"];
   }
 });
 
-var _MultiselectFilterItem = _interopRequireDefault(require("./MultiselectFilterItem"));
+var _CollapsiblePanelItem = _interopRequireDefault(require("./CollapsiblePanelItem"));