@pingux/astro 2.139.0-alpha.1 → 2.139.0-alpha.3

package/lib/cjs/components/DataTable/DataTable.js

@@ -352,20 +352,15 @@ var TableRow = function TableRow(_ref4) {
   var isSelectable = state.selectionManager.selectionMode !== 'none';
   var isSelected = state.selectionManager.isSelected(item.key);
   var isDisabled = state.disabledKeys.has(item.key);
-  var _useFocusRing2 = (0, _reactAria.useFocusRing)({
-      within: true
-    }),
-    isFocusVisibleWithin = _useFocusRing2.isFocusVisible,
-    focusWithinProps = _useFocusRing2.focusProps;
-  var _useFocusRing3 = (0, _reactAria.useFocusRing)(),
-    isFocusVisible = _useFocusRing3.isFocusVisible,
-    focusProps = _useFocusRing3.focusProps;
+  var _useFocusRing2 = (0, _reactAria.useFocusRing)(),
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
   var _useHover = (0, _interactions.useHover)({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
-  var props = (0, _reactAria.mergeProps)(otherProps, focusWithinProps, focusProps, rowProps, hoverProps);
+  var props = (0, _reactAria.mergeProps)(otherProps, focusProps, rowProps, hoverProps);
   var _useStatusClasses3 = (0, _hooks.useStatusClasses)('', {
-      'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin,
+      'is-row-focus-visible': isFocusVisible,
       isSelectable: isSelectable,
       isSelected: isSelected,
       isHovered: isHovered,
@@ -373,11 +368,13 @@ var TableRow = function TableRow(_ref4) {
     }),
     classNames = _useStatusClasses3.classNames;
   var variant = isSelectable ? 'dataTable.selectableTableRow' : 'dataTable.tableRow';
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, props, {
+  return (0, _react2.jsx)(_reactAria.FocusRing, {
+    focusRingClass: "is-row-focus-visible"
+  }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, props, {
     ref: ref,
     variant: variant,
     className: classNames
-  }), children);
+  }), children));
 };
 var TableHeaderRow = function TableHeaderRow(_ref5) {
   var item = _ref5.item,

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

@@ -101,10 +101,14 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     hasFocusWithin = _useState6[0],
     setFocusWithin = _useState6[1];
-  var _useState7 = (0, _react.useState)(''),
+  var _useState7 = (0, _react.useState)([]),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    activeDescendant = _useState8[0],
-    setActiveDescendant = _useState8[1];
+    initialItems = _useState8[0],
+    setInitialItems = _useState8[1];
+  var _useState9 = (0, _react.useState)(''),
+    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+    activeDescendant = _useState10[0],
+    setActiveDescendant = _useState10[1];
   var inputWrapperRef = (0, _react.useRef)();
   var inputRef = (0, _react.useRef)();
   var buttonRef = (0, _react.useRef)();
@@ -117,6 +121,9 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
       inputValue: filterString
     }),
     showLoading = _useInputLoader.showLoading;
+  (0, _react.useEffect)(function () {
+    setInitialItems((0, _from["default"])(items));
+  }, []);
   var toggleItems = function toggleItems(keys) {
     if (onSelectionChange) onSelectionChange(keys);
   };
@@ -195,10 +202,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState9 = (0, _react.useState)(null),
-    _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    menuWidth = _useState10[0],
-    setMenuWidth = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+    menuWidth = _useState12[0],
+    setMenuWidth = _useState12[1];
   var onResize = (0, _react.useCallback)(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -271,12 +278,12 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     setFilterString('');
     setIsOpen(false);
   };
-  var _useState11 = (0, _react.useState)('Select All'),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    selectionState = _useState12[0],
-    setSelectionState = _useState12[1];
+  var _useState13 = (0, _react.useState)('Select All'),
+    _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
+    selectionState = _useState14[0],
+    setSelectionState = _useState14[1];
   var arrayItems = (0, _from["default"])(items);
-  var itemCount = (0, _reduce["default"])(arrayItems).call(arrayItems, function (count, obj) {
+  var itemCount = (0, _reduce["default"])(initialItems).call(initialItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;

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

@@ -1113,6 +1113,22 @@ test('default selected keys in condensed mode ', function () {
   expect(listbox).not.toBeInTheDocument();
   expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
 });
+test('when filtered to one item in condensed mode, it still shows the correct amount of selected items ', function () {
+  var onInputChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    defaultSelectedKeys: [items[1].key, items[2].key],
+    onInputChange: onInputChange
+  });
+  var input = _testWrapper.screen.getByRole('combobox');
+  var value = 'Aardvark';
+  _userEvent["default"].type(input, value);
+  var listbox = _testWrapper.screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(_testWrapper.screen.getByText('2 Selected')).toBeInTheDocument();
+});
 test('onInputChange is called in condensed mode ', function () {
   var onInputChange = jest.fn();
   getComponent({

package/lib/components/DataTable/DataTable.js

@@ -341,20 +341,15 @@ var TableRow = function TableRow(_ref4) {
   var isSelectable = state.selectionManager.selectionMode !== 'none';
   var isSelected = state.selectionManager.isSelected(item.key);
   var isDisabled = state.disabledKeys.has(item.key);
-  var _useFocusRing2 = useFocusRing({
-      within: true
-    }),
-    isFocusVisibleWithin = _useFocusRing2.isFocusVisible,
-    focusWithinProps = _useFocusRing2.focusProps;
-  var _useFocusRing3 = useFocusRing(),
-    isFocusVisible = _useFocusRing3.isFocusVisible,
-    focusProps = _useFocusRing3.focusProps;
+  var _useFocusRing2 = useFocusRing(),
+    isFocusVisible = _useFocusRing2.isFocusVisible,
+    focusProps = _useFocusRing2.focusProps;
   var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
     isHovered = _useHover.isHovered;
-  var props = mergeProps(otherProps, focusWithinProps, focusProps, rowProps, hoverProps);
+  var props = mergeProps(otherProps, focusProps, rowProps, hoverProps);
   var _useStatusClasses3 = useStatusClasses('', {
-      'is-row-focus-visible': isFocusVisible || isFocusVisibleWithin,
+      'is-row-focus-visible': isFocusVisible,
       isSelectable: isSelectable,
       isSelected: isSelected,
       isHovered: isHovered,
@@ -362,11 +357,13 @@ var TableRow = function TableRow(_ref4) {
     }),
     classNames = _useStatusClasses3.classNames;
   var variant = isSelectable ? 'dataTable.selectableTableRow' : 'dataTable.tableRow';
-  return ___EmotionJSX(Box, _extends({}, props, {
+  return ___EmotionJSX(FocusRing, {
+    focusRingClass: "is-row-focus-visible"
+  }, ___EmotionJSX(Box, _extends({}, props, {
     ref: ref,
     variant: variant,
     className: classNames
-  }), children);
+  }), children));
 };
 var TableHeaderRow = function TableHeaderRow(_ref5) {
   var item = _ref5.item,

package/lib/components/MultivaluesField/CondensedMultivaluesField.js

@@ -89,10 +89,14 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     hasFocusWithin = _useState6[0],
     setFocusWithin = _useState6[1];
-  var _useState7 = useState(''),
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    activeDescendant = _useState8[0],
-    setActiveDescendant = _useState8[1];
+    initialItems = _useState8[0],
+    setInitialItems = _useState8[1];
+  var _useState9 = useState(''),
+    _useState10 = _slicedToArray(_useState9, 2),
+    activeDescendant = _useState10[0],
+    setActiveDescendant = _useState10[1];
   var inputWrapperRef = useRef();
   var inputRef = useRef();
   var buttonRef = useRef();
@@ -105,6 +109,9 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       inputValue: filterString
     }),
     showLoading = _useInputLoader.showLoading;
+  useEffect(function () {
+    setInitialItems(_Array$from(items));
+  }, []);
   var toggleItems = function toggleItems(keys) {
     if (onSelectionChange) onSelectionChange(keys);
   };
@@ -183,10 +190,10 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [isOpen, selectionManager.selectedKeys, updatePosition]);
 
   // Measure the width of the input to inform the width of the menu (below).
-  var _useState9 = useState(null),
-    _useState10 = _slicedToArray(_useState9, 2),
-    menuWidth = _useState10[0],
-    setMenuWidth = _useState10[1];
+  var _useState11 = useState(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    menuWidth = _useState12[0],
+    setMenuWidth = _useState12[1];
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (inputWrapperRef.current) {
@@ -259,12 +266,12 @@ var CondensedMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     setFilterString('');
     setIsOpen(false);
   };
-  var _useState11 = useState('Select All'),
-    _useState12 = _slicedToArray(_useState11, 2),
-    selectionState = _useState12[0],
-    setSelectionState = _useState12[1];
+  var _useState13 = useState('Select All'),
+    _useState14 = _slicedToArray(_useState13, 2),
+    selectionState = _useState14[0],
+    setSelectionState = _useState14[1];
   var arrayItems = _Array$from(items);
-  var itemCount = _reduceInstanceProperty(arrayItems).call(arrayItems, function (count, obj) {
+  var itemCount = _reduceInstanceProperty(initialItems).call(initialItems, function (count, obj) {
     return count + (obj.children ? obj.children.length : 1);
   }, 0);
   var selectedKeysSize = selectionManager.selectedKeys.size;

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

@@ -1106,6 +1106,22 @@ test('default selected keys in condensed mode ', function () {
   expect(listbox).not.toBeInTheDocument();
   expect(screen.getByText('2 Selected')).toBeInTheDocument();
 });
+test('when filtered to one item in condensed mode, it still shows the correct amount of selected items ', function () {
+  var onInputChange = jest.fn();
+  getComponent({
+    mode: 'condensed',
+    defaultSelectedKeys: [items[1].key, items[2].key],
+    onInputChange: onInputChange
+  });
+  var input = screen.getByRole('combobox');
+  var value = 'Aardvark';
+  userEvent.type(input, value);
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = within(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(screen.getByText('2 Selected')).toBeInTheDocument();
+});
 test('onInputChange is called in condensed mode ', function () {
   var onInputChange = jest.fn();
   getComponent({

package/package.json

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