@pingux/astro 1.10.0 → 1.10.1-alpha.2

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -30,6 +30,8 @@ exports["default"] = void 0;
 
 var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
@@ -46,8 +48,12 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _utils = require("@react-aria/utils");
+
 var _uuid = require("uuid");
 
+var _label = require("@react-aria/label");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
 var _Button = _interopRequireDefault(require("../Button"));
@@ -56,13 +62,15 @@ var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
 
 var _Text = _interopRequireDefault(require("../Text"));
 
+var _Label = _interopRequireDefault(require("../Label"));
+
 var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
 
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 
 var _react2 = require("@emotion/react");
 
-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 _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); }
@@ -73,22 +81,23 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-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 = (0, _objectWithoutProperties2["default"])(_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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var isControlled = value !== undefined;
   var createEmptyField = (0, _react.useCallback)(function () {
     return {
@@ -133,8 +142,8 @@ var ArrayField = function ArrayField(_ref) {
       onDelete(fieldId);
     } else {
       setFieldValues(function (oldValues) {
-        return (0, _filter["default"])(oldValues).call(oldValues, function (_ref2) {
-          var id = _ref2.id;
+        return (0, _filter["default"])(oldValues).call(oldValues, function (_ref) {
+          var id = _ref.id;
           return id !== fieldId;
         });
       });
@@ -151,17 +160,21 @@ var ArrayField = function ArrayField(_ref) {
       return (0, _concat["default"])(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
   }, [createEmptyField, onAdd]);
+
+  var _useLabel = (0, _label.useLabel)(_objectSpread({}, props)),
+      raLabelProps = _useLabel.labelProps;
+
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
-  return (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Text["default"], {
-    variant: "label"
-  }, label), (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Label["default"], (0, _extends2["default"])({}, raLabelProps, (0, _utils.mergeProps)(labelProps, raLabelProps, {
+    children: label
+  }))), (0, _react2.jsx)(_Box["default"], {
     as: "ul",
     pl: "0"
-  }, (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref3) {
-    var id = _ref3.id,
-        onComponentRender = _ref3.onComponentRender,
-        fieldValue = _ref3.fieldValue,
-        otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref3, _excluded2);
+  }, (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+    var id = _ref2.id,
+        onComponentRender = _ref2.onComponentRender,
+        fieldValue = _ref2.fieldValue,
+        otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
     var isDisabled = (value || fieldValues).length === 1;
     return (0, _react2.jsx)(_Box["default"], {
       as: "li",
@@ -204,6 +217,9 @@ ArrayField.propTypes = {
   /** The rendered label for the field. */
   label: _propTypes["default"].node,
 
+  /** Props object that is spread directly into the label element. */
+  labelProps: _propTypes["default"].shape({}),
+
   /** Text to display before add button. Useful for errors or other info. */
   helperText: _propTypes["default"].node,
 

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

@@ -84,6 +84,15 @@ var Uncontrolled = function Uncontrolled(_ref) {
   var args = (0, _extends2["default"])({}, _ref);
   return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
     defaultValue: defaultData,
+    labelProps: {
+      hintText: 'Example Hint',
+      isRequired: true,
+      helpHintProps: {
+        tooltipProps: {
+          direction: 'top'
+        }
+      }
+    },
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {
       return (0, _react2.jsx)(_index.TextField, (0, _extends2["default"])({
         "aria-label": "Text field",

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

@@ -36,7 +36,9 @@ var defaultProps = {
 
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], (0, _extends2["default"])({
+    label: "test-label"
+  }, defaultProps, props)));
 };
 
 var renderField = function renderField(id, value, onFieldValueChange, onFieldDelete, otherFieldProps) {
@@ -194,6 +196,7 @@ test('onComponentRender displays fields correctly', function () {
     }
   }];
   (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "test-label",
     defaultValue: componentRenderData,
     onChange: onChange
   }));
@@ -202,6 +205,7 @@ test('onComponentRender displays fields correctly', function () {
 });
 test('creates empty field when no data passed', function () {
   (0, _testWrapper.render)((0, _react2.jsx)(_ArrayField["default"], {
+    label: "test-label",
     renderField: renderField
   }));
   expect(_testWrapper.screen.getByLabelText('Text field')).toBeInTheDocument();

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();
 });