@pingux/astro 2.121.0 → 2.121.1-alpha.0

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

@@ -44,13 +44,13 @@ var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _ListBox = _interopRequireDefault(require("../ListBox"));
 var _react2 = require("@emotion/react");
-var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "scrollBoxProps", "status"];
+var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
 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); }
 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; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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 CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _listBoxRef$current, _selectionManager$sta3;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -77,6 +77,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     onSelectionChange = props.onSelectionChange,
     placeholder = props.placeholder,
     selectedKeys = props.selectedKeys,
+    selectedOptionTextProp = props.selectedOptionText,
     scrollBoxProps = props.scrollBoxProps,
     status = props.status,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -251,9 +252,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;
-  var checkboxSelected = ((_selectionManager$sta = selectionManager.state.selectedKeys) === null || _selectionManager$sta === void 0 ? void 0 : _selectionManager$sta.size) !== 0 && (0, _react2.jsx)(_.Text, {
+  var selectedOptionText = selectedOptionTextProp || "".concat(itemCount === selectedKeysSize ? 'All' : (_selectionManager$sta = selectionManager.state.selectedKeys) === null || _selectionManager$sta === void 0 ? void 0 : _selectionManager$sta.size, " Selected");
+  var checkboxSelected = ((_selectionManager$sta2 = selectionManager.state.selectedKeys) === null || _selectionManager$sta2 === void 0 ? void 0 : _selectionManager$sta2.size) !== 0 && (0, _react2.jsx)(_.Text, {
     color: "text.secondary"
-  }, itemCount === selectedKeysSize ? 'All' : (_selectionManager$sta2 = selectionManager.state.selectedKeys) === null || _selectionManager$sta2 === void 0 ? void 0 : _selectionManager$sta2.size, ' ', "Selected");
+  }, selectedOptionText);
   (0, _react.useEffect)(function () {
     if (selectedKeysSize < itemCount) {
       setSelectionState('Select All');
@@ -306,6 +308,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       id: "emptyKeysState"
     }, "Nothing Selected");
   };
+  var placeholderText = ((_selectionManager$sta3 = selectionManager.state.selectedKeys) === null || _selectionManager$sta3 === void 0 ? void 0 : _selectionManager$sta3.size) === 0 ? placeholder || 'Select' : '';
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
@@ -323,7 +326,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     isReadOnly: isReadOnly,
     isRequired: isRequired,
     label: label,
-    placeholder: ((_selectionManager$sta3 = selectionManager.state.selectedKeys) === null || _selectionManager$sta3 === void 0 ? void 0 : _selectionManager$sta3.size) === 0 ? 'Select' : '',
+    placeholder: placeholderText,
     wrapperProps: {
       ref: inputWrapperRef,
       variant: 'forms.input.multivaluesWrapper',

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

@@ -21,7 +21,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.OnLoadPrev = exports.IconSlotsInBadge = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = exports.CondensedWithSection = exports.Condensed = void 0;
+exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.OnLoadPrev = exports.IconSlotsInBadge = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = exports.CondensedWithSection = exports.CondensedWithCustomText = exports.Condensed = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
 var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
@@ -703,6 +703,45 @@ var CondensedWithSection = function CondensedWithSection(args) {
   }));
 };
 exports.CondensedWithSection = CondensedWithSection;
+var CondensedWithCustomText = function CondensedWithCustomText(args) {
+  var _useState27 = (0, _react.useState)(false),
+    _useState28 = (0, _slicedToArray2["default"])(_useState27, 2),
+    isOpen = _useState28[0],
+    setIsOpen = _useState28[1];
+  var _useState29 = (0, _react.useState)([]),
+    _useState30 = (0, _slicedToArray2["default"])(_useState29, 2),
+    selectedKeys = _useState30[0],
+    setSelectedKeys = _useState30[1];
+  var direction = args.direction;
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+  return (0, _react2.jsx)(_index.OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the right place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({
+    items: withSection
+  }, args, {
+    mode: "condensed",
+    onOpenChange: onOpenChange,
+    placeholder: "Select your animal",
+    selectedOptionText: "".concat(selectedKeys.size, " Selected Animals"),
+    onSelectionChange: setSelectedKeys,
+    selectedKeys: selectedKeys
+  }), function (section) {
+    return (0, _react2.jsx)(_index.Section, {
+      key: section.key,
+      items: section.children,
+      title: section.name
+    }, function (item) {
+      return (0, _react2.jsx)(_index.Item, {
+        key: item.name
+      }, item.name);
+    });
+  }));
+};
+exports.CondensedWithCustomText = CondensedWithCustomText;
 var OnLoadPrev = function OnLoadPrev() {
   var _context, _context2;
   var initialItems = (0, _map["default"])(_context = (0, _fill["default"])(_context2 = new Array(10)).call(_context2, {
@@ -715,26 +754,26 @@ var OnLoadPrev = function OnLoadPrev() {
       id: index
     };
   });
-  var _useState27 = (0, _react.useState)(0),
-    _useState28 = (0, _slicedToArray2["default"])(_useState27, 2),
-    minNum = _useState28[0],
-    setMinNum = _useState28[1];
-  var _useState29 = (0, _react.useState)(10),
-    _useState30 = (0, _slicedToArray2["default"])(_useState29, 2),
-    maxNum = _useState30[0],
-    setMaxNum = _useState30[1];
-  var _useState31 = (0, _react.useState)(initialItems),
+  var _useState31 = (0, _react.useState)(0),
     _useState32 = (0, _slicedToArray2["default"])(_useState31, 2),
-    listItems = _useState32[0],
-    setListItems = _useState32[1];
-  var _useState33 = (0, _react.useState)(false),
+    minNum = _useState32[0],
+    setMinNum = _useState32[1];
+  var _useState33 = (0, _react.useState)(10),
     _useState34 = (0, _slicedToArray2["default"])(_useState33, 2),
-    isOpen = _useState34[0],
-    setIsOpen = _useState34[1];
-  var _useState35 = (0, _react.useState)(_loadingStates["default"].IDLE),
+    maxNum = _useState34[0],
+    setMaxNum = _useState34[1];
+  var _useState35 = (0, _react.useState)(initialItems),
     _useState36 = (0, _slicedToArray2["default"])(_useState35, 2),
-    loadingState = _useState36[0],
-    setLoadingState = _useState36[1];
+    listItems = _useState36[0],
+    setListItems = _useState36[1];
+  var _useState37 = (0, _react.useState)(false),
+    _useState38 = (0, _slicedToArray2["default"])(_useState37, 2),
+    isOpen = _useState38[0],
+    setIsOpen = _useState38[1];
+  var _useState39 = (0, _react.useState)(_loadingStates["default"].IDLE),
+    _useState40 = (0, _slicedToArray2["default"])(_useState39, 2),
+    loadingState = _useState40[0],
+    setLoadingState = _useState40[1];
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };

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

@@ -78,16 +78,19 @@ var withSection = [{
     key: 'Option B3'
   }]
 }];
+var labelText = 'Field Label';
 var defaultProps = {
   items: items,
-  label: 'Field Label'
+  label: labelText
 };
 var defaultSectionProps = {
   items: withSection,
-  label: 'Field Label'
+  label: labelText
 };
 var onLoadMoreFunc = jest.fn();
 var onLoadPrevFunc = jest.fn();
+var placeholder = 'Select Animals';
+var selectedOptionText = 'Animals Selected';
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -966,6 +969,20 @@ test('in condensed mode selects and deselects ', function () {
   });
   expect(button).toHaveTextContent('Select All');
 });
+test('in condensed mode custom text props work ', function () {
+  getComponent({
+    mode: 'condensed',
+    placeholder: 'Select Animals',
+    selectedOptionText: selectedOptionText
+  });
+  expect(_testWrapper.screen.getByLabelText(labelText)).toHaveAttribute('placeholder', placeholder);
+  _userEvent["default"].tab();
+  var listbox = _testWrapper.screen.getByRole('listbox');
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  _userEvent["default"].click(firstOption);
+  expect(_testWrapper.screen.getByText('Animals Selected')).toBeInTheDocument();
+});
 test('in condensed mode "onSelectionChange" is called', function () {
   var onSelectionChange = jest.fn();
   getComponent({

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "scrollBoxProps", "status"];
+var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
 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; }
 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) { _defineProperty(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; }
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
@@ -38,7 +38,7 @@ import { statusDefaultProp, statusPropTypes } from '../../utils/docUtils/statusP
 import ListBox from '../ListBox';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _selectionManager$sta, _selectionManager$sta2, _listBoxRef$current, _selectionManager$sta3;
+  var _selectionManager$sta, _selectionManager$sta2, _selectionManager$sta3, _listBoxRef$current;
   var defaultSelectedKeys = props.defaultSelectedKeys,
     direction = props.direction,
     _props$disabledKeys = props.disabledKeys,
@@ -65,6 +65,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelectionChange = props.onSelectionChange,
     placeholder = props.placeholder,
     selectedKeys = props.selectedKeys,
+    selectedOptionTextProp = props.selectedOptionText,
     scrollBoxProps = props.scrollBoxProps,
     status = props.status,
     others = _objectWithoutProperties(props, _excluded);
@@ -239,9 +240,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;
-  var checkboxSelected = ((_selectionManager$sta = selectionManager.state.selectedKeys) === null || _selectionManager$sta === void 0 ? void 0 : _selectionManager$sta.size) !== 0 && ___EmotionJSX(Text, {
+  var selectedOptionText = selectedOptionTextProp || "".concat(itemCount === selectedKeysSize ? 'All' : (_selectionManager$sta = selectionManager.state.selectedKeys) === null || _selectionManager$sta === void 0 ? void 0 : _selectionManager$sta.size, " Selected");
+  var checkboxSelected = ((_selectionManager$sta2 = selectionManager.state.selectedKeys) === null || _selectionManager$sta2 === void 0 ? void 0 : _selectionManager$sta2.size) !== 0 && ___EmotionJSX(Text, {
     color: "text.secondary"
-  }, itemCount === selectedKeysSize ? 'All' : (_selectionManager$sta2 = selectionManager.state.selectedKeys) === null || _selectionManager$sta2 === void 0 ? void 0 : _selectionManager$sta2.size, ' ', "Selected");
+  }, selectedOptionText);
   useEffect(function () {
     if (selectedKeysSize < itemCount) {
       setSelectionState('Select All');
@@ -294,6 +296,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       id: "emptyKeysState"
     }, "Nothing Selected");
   };
+  var placeholderText = ((_selectionManager$sta3 = selectionManager.state.selectedKeys) === null || _selectionManager$sta3 === void 0 ? void 0 : _selectionManager$sta3.size) === 0 ? placeholder || 'Select' : '';
   var inputProps = _objectSpread(_objectSpread({}, customInputProps), {}, {
     controlProps: {
       'aria-activedescendant': activeDescendant,
@@ -311,7 +314,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     isReadOnly: isReadOnly,
     isRequired: isRequired,
     label: label,
-    placeholder: ((_selectionManager$sta3 = selectionManager.state.selectedKeys) === null || _selectionManager$sta3 === void 0 ? void 0 : _selectionManager$sta3.size) === 0 ? 'Select' : '',
+    placeholder: placeholderText,
     wrapperProps: {
       ref: inputWrapperRef,
       variant: 'forms.input.multivaluesWrapper',

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

@@ -680,6 +680,44 @@ export var CondensedWithSection = function CondensedWithSection(args) {
     });
   }));
 };
+export var CondensedWithCustomText = function CondensedWithCustomText(args) {
+  var _useState27 = useState(false),
+    _useState28 = _slicedToArray(_useState27, 2),
+    isOpen = _useState28[0],
+    setIsOpen = _useState28[1];
+  var _useState29 = useState([]),
+    _useState30 = _slicedToArray(_useState29, 2),
+    selectedKeys = _useState30[0],
+    setSelectedKeys = _useState30[1];
+  var direction = args.direction;
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the right place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    items: withSection
+  }, args, {
+    mode: "condensed",
+    onOpenChange: onOpenChange,
+    placeholder: "Select your animal",
+    selectedOptionText: "".concat(selectedKeys.size, " Selected Animals"),
+    onSelectionChange: setSelectedKeys,
+    selectedKeys: selectedKeys
+  }), function (section) {
+    return ___EmotionJSX(Section, {
+      key: section.key,
+      items: section.children,
+      title: section.name
+    }, function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.name
+      }, item.name);
+    });
+  }));
+};
 export var OnLoadPrev = function OnLoadPrev() {
   var _context, _context2;
   var initialItems = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = new Array(10)).call(_context2, {
@@ -692,26 +730,26 @@ export var OnLoadPrev = function OnLoadPrev() {
       id: index
     };
   });
-  var _useState27 = useState(0),
-    _useState28 = _slicedToArray(_useState27, 2),
-    minNum = _useState28[0],
-    setMinNum = _useState28[1];
-  var _useState29 = useState(10),
-    _useState30 = _slicedToArray(_useState29, 2),
-    maxNum = _useState30[0],
-    setMaxNum = _useState30[1];
-  var _useState31 = useState(initialItems),
+  var _useState31 = useState(0),
     _useState32 = _slicedToArray(_useState31, 2),
-    listItems = _useState32[0],
-    setListItems = _useState32[1];
-  var _useState33 = useState(false),
+    minNum = _useState32[0],
+    setMinNum = _useState32[1];
+  var _useState33 = useState(10),
     _useState34 = _slicedToArray(_useState33, 2),
-    isOpen = _useState34[0],
-    setIsOpen = _useState34[1];
-  var _useState35 = useState(loadingStates.IDLE),
+    maxNum = _useState34[0],
+    setMaxNum = _useState34[1];
+  var _useState35 = useState(initialItems),
     _useState36 = _slicedToArray(_useState35, 2),
-    loadingState = _useState36[0],
-    setLoadingState = _useState36[1];
+    listItems = _useState36[0],
+    setListItems = _useState36[1];
+  var _useState37 = useState(false),
+    _useState38 = _slicedToArray(_useState37, 2),
+    isOpen = _useState38[0],
+    setIsOpen = _useState38[1];
+  var _useState39 = useState(loadingStates.IDLE),
+    _useState40 = _slicedToArray(_useState39, 2),
+    loadingState = _useState40[0],
+    setLoadingState = _useState40[1];
   var onOpenChange = function onOpenChange() {
     setIsOpen(true);
   };

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

@@ -71,16 +71,19 @@ var withSection = [{
     key: 'Option B3'
   }]
 }];
+var labelText = 'Field Label';
 var defaultProps = {
   items: items,
-  label: 'Field Label'
+  label: labelText
 };
 var defaultSectionProps = {
   items: withSection,
-  label: 'Field Label'
+  label: labelText
 };
 var onLoadMoreFunc = jest.fn();
 var onLoadPrevFunc = jest.fn();
+var placeholder = 'Select Animals';
+var selectedOptionText = 'Animals Selected';
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
@@ -959,6 +962,20 @@ test('in condensed mode selects and deselects ', function () {
   });
   expect(button).toHaveTextContent('Select All');
 });
+test('in condensed mode custom text props work ', function () {
+  getComponent({
+    mode: 'condensed',
+    placeholder: 'Select Animals',
+    selectedOptionText: selectedOptionText
+  });
+  expect(screen.getByLabelText(labelText)).toHaveAttribute('placeholder', placeholder);
+  userEvent.tab();
+  var listbox = screen.getByRole('listbox');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  userEvent.click(firstOption);
+  expect(screen.getByText('Animals Selected')).toBeInTheDocument();
+});
 test('in condensed mode "onSelectionChange" is called', function () {
   var onSelectionChange = jest.fn();
   getComponent({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.121.0",
+  "version": "2.121.1-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",