@pingux/astro 2.113.0 → 2.114.0-alpha.0

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

@@ -44,7 +44,7 @@ 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", "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", "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; }
@@ -57,6 +57,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
     containerProps = props.containerProps,
     hasAutoFocus = props.hasAutoFocus,
+    hasNoSelectAll = props.hasNoSelectAll,
     hasNoStatusIndicator = props.hasNoStatusIndicator,
     helperText = props.helperText,
     customInputProps = props.inputProps,
@@ -263,8 +264,8 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       var allItemNames = (0, _flatMap["default"])(arrayItems).call(arrayItems, function (obj) {
         var _context2;
         return obj.children ? (0, _map["default"])(_context2 = obj.children).call(_context2, function (child) {
-          return child.name;
-        }) : obj.name;
+          return child.key;
+        }) : obj.key;
       });
       selectionManager.setSelectedKeys(allItemNames);
       setSelectionState('Deselect All');
@@ -273,7 +274,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       setSelectionState('Select All');
     }
   };
-  var listbox = (0, _react2.jsx)(_reactAria.FocusScope, null, filterString === '' && (0, _react2.jsx)(_.Button, {
+  var listbox = (0, _react2.jsx)(_reactAria.FocusScope, null, filterString === '' && !hasNoSelectAll && (0, _react2.jsx)(_.Button, {
     onPress: handleSelection,
     ref: buttonRef,
     variant: "link",
@@ -298,7 +299,7 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     id: "selectedKeysState"
   }, "Selected options:", (0, _from["default"])(selectionManager.selectedKeys).join(' '));
 
-  // the reason we are using two different visually hiddens, rather than one that updates it's value
+  // the reason we are using two different visually hiddens, rather than one that updates its value
   // is because there are tests that break if an empty visually hidden is rendered in the TextField
   var EmptyVisuallyHidden = function EmptyVisuallyHidden() {
     return (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
@@ -411,6 +412,8 @@ CondensedMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread(
   disabledKeys: _isIterable.isIterableProp,
   /** Whether the element should receive focus on render. */
   hasAutoFocus: _propTypes["default"].bool,
+  /** Whether the field has the select all button. */
+  hasNoSelectAll: _propTypes["default"].bool,
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: _propTypes["default"].bool,
   /** Text rendered below the input. */

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

@@ -83,6 +83,11 @@ var _default = {
       control: {
         type: 'text'
       }
+    },
+    hasNoSelectAll: {
+      control: {
+        tyle: 'boolean'
+      }
     }
   }, _statusProp.statusArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes), _fieldAttributes.inputFieldAttributeBaseArgTypes),
   args: {
@@ -268,25 +273,33 @@ var withSection = [{
   name: 'Animals',
   key: 'Animals',
   children: [{
-    name: 'Option A1'
+    name: 'Option A1',
+    key: 'Option A1'
   }, {
-    name: 'Option A2'
+    name: 'Option A2',
+    key: 'Option A2'
   }, {
-    name: 'Option A3'
+    name: 'Option A3',
+    key: 'Option A3'
   }, {
-    name: 'Option A4'
+    name: 'Option A4',
+    key: 'Option A4'
   }, {
-    name: 'Option A5'
+    name: 'Option A5',
+    key: 'Option A5'
   }]
 }, {
   name: 'People',
   key: 'People',
   children: [{
-    name: 'Option B1'
+    name: 'Option B1',
+    key: 'Option B1'
   }, {
-    name: 'Option B2'
+    name: 'Option B2',
+    key: 'Option B2'
   }, {
-    name: 'Option B3'
+    name: 'Option B3',
+    key: 'Option B3'
   }]
 }];
 var itemsWithSlots = [{

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

@@ -48,19 +48,24 @@ var withSection = [{
   name: 'Animals',
   key: 'Animals',
   children: [{
-    name: 'Option A1'
+    name: 'Option A1',
+    key: 'Option A1'
   }, {
-    name: 'Option A2'
+    name: 'Option A2',
+    key: 'Option A2'
   }]
 }, {
   name: 'People',
   key: 'People',
   children: [{
-    name: 'Option B1'
+    name: 'Option B1',
+    key: 'Option B1'
   }, {
-    name: 'Option B2'
+    name: 'Option B2',
+    key: 'Option B2'
   }, {
-    name: 'Option B3'
+    name: 'Option B3',
+    key: 'Option B3'
   }]
 }];
 var defaultProps = {
@@ -885,6 +890,16 @@ test('in non-restrictive mode the partial string values should be accepted', fun
   expect(input).not.toHaveValue('');
   expect(input).toHaveValue(value);
 });
+test('in condensed mode, hasNoSelectAll hides the select all button', function () {
+  getComponent({
+    mode: 'condensed',
+    hasNoSelectAll: true
+  });
+  _userEvent["default"].tab();
+  var buttons = _testWrapper.screen.getAllByRole('button');
+  var button = buttons[1];
+  expect(button).not.toHaveTextContent('Select All');
+});
 test('in condensed mode selects and deselects ', function () {
   getComponent({
     mode: 'condensed'

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", "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", "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";
@@ -45,6 +45,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     disabledKeys = _props$disabledKeys === void 0 ? [] : _props$disabledKeys,
     containerProps = props.containerProps,
     hasAutoFocus = props.hasAutoFocus,
+    hasNoSelectAll = props.hasNoSelectAll,
     hasNoStatusIndicator = props.hasNoStatusIndicator,
     helperText = props.helperText,
     customInputProps = props.inputProps,
@@ -251,8 +252,8 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       var allItemNames = _flatMapInstanceProperty(arrayItems).call(arrayItems, function (obj) {
         var _context2;
         return obj.children ? _mapInstanceProperty(_context2 = obj.children).call(_context2, function (child) {
-          return child.name;
-        }) : obj.name;
+          return child.key;
+        }) : obj.key;
       });
       selectionManager.setSelectedKeys(allItemNames);
       setSelectionState('Deselect All');
@@ -261,7 +262,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       setSelectionState('Select All');
     }
   };
-  var listbox = ___EmotionJSX(FocusScope, null, filterString === '' && ___EmotionJSX(Button, {
+  var listbox = ___EmotionJSX(FocusScope, null, filterString === '' && !hasNoSelectAll && ___EmotionJSX(Button, {
     onPress: handleSelection,
     ref: buttonRef,
     variant: "link",
@@ -286,7 +287,7 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     id: "selectedKeysState"
   }, "Selected options:", _Array$from(selectionManager.selectedKeys).join(' '));
 
-  // the reason we are using two different visually hiddens, rather than one that updates it's value
+  // the reason we are using two different visually hiddens, rather than one that updates its value
   // is because there are tests that break if an empty visually hidden is rendered in the TextField
   var EmptyVisuallyHidden = function EmptyVisuallyHidden() {
     return ___EmotionJSX(VisuallyHidden, {
@@ -399,6 +400,8 @@ CondensedMultivaluesField.propTypes = _objectSpread(_objectSpread(_objectSpread(
   disabledKeys: isIterableProp,
   /** Whether the element should receive focus on render. */
   hasAutoFocus: PropTypes.bool,
+  /** Whether the field has the select all button. */
+  hasNoSelectAll: PropTypes.bool,
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
   /** Text rendered below the input. */

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

@@ -72,6 +72,11 @@ export default {
       control: {
         type: 'text'
       }
+    },
+    hasNoSelectAll: {
+      control: {
+        tyle: 'boolean'
+      }
     }
   }, statusArgTypes), ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes),
   args: {
@@ -256,25 +261,33 @@ var withSection = [{
   name: 'Animals',
   key: 'Animals',
   children: [{
-    name: 'Option A1'
+    name: 'Option A1',
+    key: 'Option A1'
   }, {
-    name: 'Option A2'
+    name: 'Option A2',
+    key: 'Option A2'
   }, {
-    name: 'Option A3'
+    name: 'Option A3',
+    key: 'Option A3'
   }, {
-    name: 'Option A4'
+    name: 'Option A4',
+    key: 'Option A4'
   }, {
-    name: 'Option A5'
+    name: 'Option A5',
+    key: 'Option A5'
   }]
 }, {
   name: 'People',
   key: 'People',
   children: [{
-    name: 'Option B1'
+    name: 'Option B1',
+    key: 'Option B1'
   }, {
-    name: 'Option B2'
+    name: 'Option B2',
+    key: 'Option B2'
   }, {
-    name: 'Option B3'
+    name: 'Option B3',
+    key: 'Option B3'
   }]
 }];
 var itemsWithSlots = [{

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

@@ -40,19 +40,24 @@ var withSection = [{
   name: 'Animals',
   key: 'Animals',
   children: [{
-    name: 'Option A1'
+    name: 'Option A1',
+    key: 'Option A1'
   }, {
-    name: 'Option A2'
+    name: 'Option A2',
+    key: 'Option A2'
   }]
 }, {
   name: 'People',
   key: 'People',
   children: [{
-    name: 'Option B1'
+    name: 'Option B1',
+    key: 'Option B1'
   }, {
-    name: 'Option B2'
+    name: 'Option B2',
+    key: 'Option B2'
   }, {
-    name: 'Option B3'
+    name: 'Option B3',
+    key: 'Option B3'
   }]
 }];
 var defaultProps = {
@@ -877,6 +882,16 @@ test('in non-restrictive mode the partial string values should be accepted', fun
   expect(input).not.toHaveValue('');
   expect(input).toHaveValue(value);
 });
+test('in condensed mode, hasNoSelectAll hides the select all button', function () {
+  getComponent({
+    mode: 'condensed',
+    hasNoSelectAll: true
+  });
+  userEvent.tab();
+  var buttons = screen.getAllByRole('button');
+  var button = buttons[1];
+  expect(button).not.toHaveTextContent('Select All');
+});
 test('in condensed mode selects and deselects ', function () {
   getComponent({
     mode: 'condensed'

package/package.json

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