@pingux/astro 1.10.1-alpha.0 → 1.11.0-alpha.0

package/lib/components/ArrayField/ArrayField.js

@@ -6,13 +6,14 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "maxSize", "maxSizeText"],
+var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
     _excluded2 = ["id", "onComponentRender", "fieldValue"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -21,31 +22,35 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
 import { v4 as uuid } from 'uuid';
+import { useLabel } from '@react-aria/label';
 import Box from '../Box';
 import Button from '../Button';
 import FieldHelperText from '../FieldHelperText';
 import Text from '../Text';
+import Label from '../Label';
 import statuses from '../../utils/devUtils/constants/statuses';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var ArrayField = function ArrayField(_ref) {
+var ArrayField = function ArrayField(props) {
   var _context2;
 
-  var addButtonLabel = _ref.addButtonLabel,
-      defaultValue = _ref.defaultValue,
-      value = _ref.value,
-      label = _ref.label,
-      helperText = _ref.helperText,
-      status = _ref.status,
-      onAdd = _ref.onAdd,
-      onChange = _ref.onChange,
-      onDelete = _ref.onDelete,
-      renderField = _ref.renderField,
-      maxSize = _ref.maxSize,
-      maxSizeText = _ref.maxSizeText,
-      others = _objectWithoutProperties(_ref, _excluded);
+  var addButtonLabel = props.addButtonLabel,
+      defaultValue = props.defaultValue,
+      value = props.value,
+      label = props.label,
+      helperText = props.helperText,
+      status = props.status,
+      onAdd = props.onAdd,
+      onChange = props.onChange,
+      onDelete = props.onDelete,
+      renderField = props.renderField,
+      labelProps = props.labelProps,
+      maxSize = props.maxSize,
+      maxSizeText = props.maxSizeText,
+      others = _objectWithoutProperties(props, _excluded);
 
   var isControlled = value !== undefined;
   var createEmptyField = useCallback(function () {
@@ -91,8 +96,8 @@ var ArrayField = function ArrayField(_ref) {
       onDelete(fieldId);
     } else {
       setFieldValues(function (oldValues) {
-        return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
-          var id = _ref2.id;
+        return _filterInstanceProperty(oldValues).call(oldValues, function (_ref) {
+          var id = _ref.id;
           return id !== fieldId;
         });
       });
@@ -109,17 +114,21 @@ var ArrayField = function ArrayField(_ref) {
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
   }, [createEmptyField, onAdd]);
+
+  var _useLabel = useLabel(_objectSpread({}, props)),
+      raLabelProps = _useLabel.labelProps;
+
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
-  return ___EmotionJSX(Box, others, ___EmotionJSX(Text, {
-    variant: "label"
-  }, label), ___EmotionJSX(Box, {
+  return ___EmotionJSX(Box, others, ___EmotionJSX(Label, _extends({}, raLabelProps, mergeProps(labelProps, raLabelProps, {
+    children: label
+  }))), ___EmotionJSX(Box, {
     as: "ul",
     pl: "0"
-  }, _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref3) {
-    var id = _ref3.id,
-        onComponentRender = _ref3.onComponentRender,
-        fieldValue = _ref3.fieldValue,
-        otherFieldProps = _objectWithoutProperties(_ref3, _excluded2);
+  }, _mapInstanceProperty(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+    var id = _ref2.id,
+        onComponentRender = _ref2.onComponentRender,
+        fieldValue = _ref2.fieldValue,
+        otherFieldProps = _objectWithoutProperties(_ref2, _excluded2);
 
     var isDisabled = (value || fieldValues).length === 1;
     return ___EmotionJSX(Box, {
@@ -163,6 +172,9 @@ ArrayField.propTypes = {
   /** The rendered label for the field. */
   label: PropTypes.node,
 
+  /** Props object that is spread directly into the label element. */
+  labelProps: PropTypes.shape({}),
+
   /** Text to display before add button. Useful for errors or other info. */
   helperText: PropTypes.node,
 

package/lib/components/ArrayField/ArrayField.stories.js

@@ -62,6 +62,15 @@ export var Uncontrolled = function Uncontrolled(_ref) {
 
   return ___EmotionJSX(ArrayField, _extends({
     defaultValue: defaultData,
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        tooltipProps: {
+          direction: 'top'
+        }
+      }
+    },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return ___EmotionJSX(TextField, _extends({
         "aria-label": "Text field",

package/lib/components/ArrayField/ArrayField.test.js

@@ -25,7 +25,9 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(ArrayField, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(ArrayField, _extends({
+    label: "test-label"
+  }, defaultProps, props)));
 };
 
 var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
@@ -171,6 +173,7 @@ test('onComponentRender displays fields correctly', function () {
     }
   }];
   render(___EmotionJSX(ArrayField, {
+    label: "test-label",
     defaultValue: componentRenderData,
     onChange: onChange
   }));
@@ -179,6 +182,7 @@ test('onComponentRender displays fields correctly', function () {
 });
 test('creates empty field when no data passed', function () {
   render(___EmotionJSX(ArrayField, {
+    label: "test-label",
     renderField: renderField
   }));
   expect(screen.getByLabelText('Text field')).toBeInTheDocument();

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';

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

@@ -5,12 +5,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Chip from '../Chip';
 /**
- * The MultiselectBadge serves as a badge to display selected count.
+ * The CollapsiblePanelBadge serves as a badge to display selected count.
  */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-var MultiselectBadge = function MultiselectBadge(props) {
+var CollapsiblePanelBadge = function CollapsiblePanelBadge(props) {
   var selectedFilterCount = props.selectedFilterCount,
       others = _objectWithoutProperties(props, _excluded);
 
@@ -19,14 +19,14 @@ 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.oneOfType([PropTypes.string, PropTypes.number]),
   margin: PropTypes.string
 };
-MultiselectBadge.displayName = 'MultiselectBadge';
-export default MultiselectBadge;
+CollapsiblePanelBadge.displayName = 'CollapsiblePanelBadge';
+export default CollapsiblePanelBadge;

package/lib/components/{MultiselectListContainer/MultiselectBadge.test.js → CollapsiblePanelContainer/CollapsiblePanelBadge.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 MultiselectBadge from './MultiselectBadge';
+import CollapsiblePanelBadge from './CollapsiblePanelBadge';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'test-multiselectBadge';
+var testId = 'test-collapsiblePanelBadge';
 var defaultProps = {
   'data-testid': testId,
   selectedFilterCount: 9
@@ -12,7 +12,7 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(MultiselectBadge, _extends({}, defaultProps, props)));
+  return render(___EmotionJSX(CollapsiblePanelBadge, _extends({}, defaultProps, props)));
 };
 
 afterEach(function () {
@@ -20,15 +20,15 @@ afterEach(function () {
 }); // Need to be added to each test file to test accessibility using axe.
 
 axeTest(getComponent);
-test('default multiselectBadge', function () {
+test('default CollapsiblePanelBadge', function () {
   getComponent();
-  var multiselectBadge = screen.getByTestId(testId);
-  expect(multiselectBadge).toBeInTheDocument();
+  var collapsiblePanelBadge = screen.getByTestId(testId);
+  expect(collapsiblePanelBadge).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
-  var multiselectBadge = screen.getByTestId(testId);
-  expect(multiselectBadge).toHaveClass('testing-class');
+  var collapsiblePanelBadge = screen.getByTestId(testId);
+  expect(collapsiblePanelBadge).toHaveClass('testing-class');
 });

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

@@ -20,16 +20,16 @@ import PropTypes from 'prop-types';
 import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
 import { useOverlayTriggerState } from '@react-stately/overlays';
-import MultiselectBadge from './MultiselectBadge';
+import CollapsiblePanelBadge from './CollapsiblePanelBadge';
 import { Icon, IconButton, Box } from '../../index';
 import { useStatusClasses } from '../../hooks';
 /**
- * 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.
  */
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var MultiselectListContainer = /*#__PURE__*/forwardRef(function (props, ref) {
+var CollapsiblePanelContainer = /*#__PURE__*/forwardRef(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,
       className = props.className,
       children = props.children,
@@ -71,28 +71,28 @@ var MultiselectListContainer = /*#__PURE__*/forwardRef(function (props, ref) {
     className: classNames,
     onKeyUp: handleClose,
     ref: ref,
-    variant: "multiselectListContainer.multiselectListContainer",
+    variant: "collapsiblePanel.collapsiblePanelContainer",
     isRow: true
   }, others), ___EmotionJSX(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"
   }, ___EmotionJSX(Icon, {
     color: "active",
     icon: state.isOpen ? ChevronRightIcon : ChevronLeftIcon,
     role: "button",
     size: "30px"
-  }), !state.isOpen && selectedFilterCount && ___EmotionJSX(MultiselectBadge, {
-    "data-testid": "multiselect-list-badge",
+  }), !state.isOpen && selectedFilterCount && ___EmotionJSX(CollapsiblePanelBadge, {
+    "data-testid": "collapsible-panel-badge",
     margin: "auto",
     selectedFilterCount: selectedFilterCount
   })), state.isOpen && _objectSpread({}, children));
 });
-MultiselectListContainer.propTypes = {
+CollapsiblePanelContainer.propTypes = {
   /** Amount of selected items indicator. */
   selectedFilterCount: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
@@ -116,9 +116,9 @@ MultiselectListContainer.propTypes = {
   /** Defines a string value that labels the trigger icon when menu is closed. */
   openAriaLabel: PropTypes.string
 };
-MultiselectListContainer.defaultProps = {
+CollapsiblePanelContainer.defaultProps = {
   openAriaLabel: 'Open filter menu?',
   closeAriaLabel: 'Close filter menu?'
 };
-MultiselectListContainer.displayName = 'MultiselectListContainer';
-export default MultiselectListContainer;
+CollapsiblePanelContainer.displayName = 'CollapsiblePanelContainer';
+export default CollapsiblePanelContainer;

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

@@ -3,20 +3,20 @@ import React from 'react';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import MultiselectListContainer from './MultiselectListContainer';
+import CollapsiblePanelContainer from './CollapsiblePanelContainer';
 import { jsx as ___EmotionJSX } from "@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 render(___EmotionJSX(MultiselectListContainer, _extends({}, defaultProps, props), ___EmotionJSX("div", {
-    "data-testid": multiselectFilterId
+  return render(___EmotionJSX(CollapsiblePanelContainer, _extends({}, defaultProps, props), ___EmotionJSX("div", {
+    "data-testid": collapsiblePanelId
   })));
 };
 
@@ -25,17 +25,17 @@ afterEach(function () {
 }); // Need to be added to each test file to test accessibility using axe.
 
 axeTest(getComponent);
-test('default MultiselectListContainer', function () {
+test('default CollapsiblePanelContainer', function () {
   getComponent();
-  var multiselectListContainer = screen.getByTestId(testId);
-  expect(multiselectListContainer).toBeInTheDocument();
+  var collapsiblePanelContainer = screen.getByTestId(testId);
+  expect(collapsiblePanelContainer).toBeInTheDocument();
 });
 test('custom classname can be passed', function () {
   getComponent({
     className: 'testing-class'
   });
-  var multiselectListContainer = screen.getByTestId(testId);
-  expect(multiselectListContainer).toHaveClass('testing-class');
+  var collapsiblePanelContainer = screen.getByTestId(testId);
+  expect(collapsiblePanelContainer).toHaveClass('testing-class');
 });
 test('shows badge when container is closed', function () {
   getComponent({
@@ -44,7 +44,7 @@ test('shows badge when container is closed', function () {
       isOpen: false
     }
   });
-  var badge = screen.getByTestId(multiselectListBadgeId);
+  var badge = screen.getByTestId(collapsiblePanelBadgeId);
   expect(badge).toBeInTheDocument();
 });
 test('updates aria label when button is clicked', function () {
@@ -54,28 +54,28 @@ test('updates aria label when button is clicked', function () {
   getComponent({
     state: state
   });
-  var button = screen.getByTestId(multiselectListButtonId);
+  var button = screen.getByTestId(collapsiblePanelButtonId);
   userEvent.click(button);
-  var multiSelect = screen.queryByTestId(multiselectFilterId);
+  var collapsiblePanel = screen.queryByTestId(collapsiblePanelId);
   expect(button).toHaveAttribute('aria-label', 'Close filter menu?');
-  expect(multiSelect).toBeInTheDocument();
+  expect(collapsiblePanel).toBeInTheDocument();
   userEvent.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 = screen.getByTestId(multiselectFilterId);
-  expect(multiselectFilter).toBeInTheDocument();
+  var collapsiblePanel = screen.getByTestId(collapsiblePanelId);
+  expect(collapsiblePanel).toBeInTheDocument();
 });
 test('should hide children when pressing the escape key', function () {
   getComponent();
-  var button = screen.getByTestId(multiselectListButtonId);
+  var button = screen.getByTestId(collapsiblePanelButtonId);
   userEvent.click(button);
-  var multiSelect = screen.queryByTestId(multiselectFilterId);
-  expect(multiSelect).toBeInTheDocument();
+  var collapsiblePanel = screen.queryByTestId(collapsiblePanelId);
+  expect(collapsiblePanel).toBeInTheDocument();
   userEvent.type(button, '{esc}');
-  expect(multiSelect).not.toBeInTheDocument();
+  expect(collapsiblePanel).not.toBeInTheDocument();
 });

package/lib/components/CollapsiblePanelContainer/index.js

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

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

@@ -2,25 +2,25 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { Box, Icon, IconButton, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var MultiselectFilterItem = /*#__PURE__*/forwardRef(function (props, ref) {
+var CollapsiblePanelItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var text = props.text,
       icon = props.icon,
       isDefaultSelected = props.isDefaultSelected,
       onPress = props.onPress;
 
   var iconElement = icon && ___EmotionJSX(Icon, {
-    "data-testid": "multiselect-filter-data-icon",
+    "data-testid": "collapsible-panel-data-icon",
     icon: icon,
     color: isDefaultSelected ? 'neutral.10' : 'active',
     size: 13
   });
 
   return ___EmotionJSX(Box, {
-    "data-testid": "multiselect-filter-item",
+    "data-testid": "collapsible-panel-item",
     isRow: true,
     ref: ref
   }, ___EmotionJSX(Text, {
-    variant: "multiselectFilterItem"
+    variant: "collapsiblePanellItem"
   }, text), iconElement && (isDefaultSelected ? iconElement : ___EmotionJSX(IconButton, {
     sx: {
       width: 13,
@@ -33,7 +33,7 @@ var MultiselectFilterItem = /*#__PURE__*/forwardRef(function (props, ref) {
     onPress: onPress
   }, iconElement)));
 });
-MultiselectFilterItem.propTypes = {
+CollapsiblePanelItem.propTypes = {
   /**
      * Display text.
      */
@@ -55,5 +55,5 @@ MultiselectFilterItem.propTypes = {
    */
   onPress: PropTypes.func
 };
-MultiselectFilterItem.displayName = 'MultiselectFilterItem';
-export default MultiselectFilterItem;
+CollapsiblePanelItem.displayName = 'CollapsiblePanelItem';
+export default CollapsiblePanelItem;