@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

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

@@ -15,14 +15,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 var _react = _interopRequireDefault(require("react"));
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _react2 = require("@testing-library/react");
-var _ = require("../..");
+var _2 = require("../..");
 var _images = require("../../utils/devUtils/constants/images");
 var _testWrapper = require("../../utils/testUtils/testWrapper");
 var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
 var _ListViewItem = require("./ListViewItem");
 var _react3 = require("@emotion/react");
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultProps = {
   data: {
     text: 'testText',
@@ -37,7 +37,14 @@ var defaultProps = {
 };
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react3.jsx)(_.ListViewItem, (0, _extends2["default"])({}, defaultProps, props)));
+  return (0, _testWrapper.render)((0, _react3.jsx)(_2.ListViewItem, (0, _extends2["default"])({}, defaultProps, props)));
+};
+var getComponentOnyx = function getComponentOnyx() {
+  var theme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _2.OnyxTheme;
+  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  return (0, _testWrapper.render)((0, _react3.jsx)(_2.AstroProvider, {
+    themeOverrides: [theme]
+  }, (0, _react3.jsx)(_2.ListViewItem, (0, _extends2["default"])({}, defaultProps, props))));
 };
 var fallbackImageObj = null;
 jest.mock('../../hooks/useFallbackImage', function () {
@@ -50,7 +57,7 @@ jest.mock('../../hooks/useFallbackImage', function () {
 // Needs to be added to each components test file
 (0, _universalComponentTest.universalComponentTests)({
   renderComponent: function renderComponent(props) {
-    return (0, _react3.jsx)(_.ListViewItem, (0, _extends2["default"])({}, defaultProps, props));
+    return (0, _react3.jsx)(_2.ListViewItem, (0, _extends2["default"])({}, defaultProps, props));
   }
 });
 var TEST_TEXT = 'test text';
@@ -69,7 +76,7 @@ describe('ListViewItem', function () {
   });
   test('renders children', function () {
     getComponent({
-      children: (0, _react3.jsx)(_.ListViewItemSwitchField, null)
+      children: (0, _react3.jsx)(_2.ListViewItemSwitchField, null)
     });
     _testWrapper.screen.getByRole('switch');
   });
@@ -81,6 +88,30 @@ describe('ListViewItem', function () {
     });
     _testWrapper.screen.getByText(TEST_TEXT);
   });
+  test.each([['Onyx light', _2.OnyxTheme], ['Onyx dark', _2.OnyxDarkTheme]])('renders an 18px icon in %s ListViewItem', function (_, theme) {
+    var _context2;
+    getComponentOnyx(theme, {
+      id: 'test-id',
+      iconWrapperProps: {
+        color: 'green'
+      }
+    });
+    var icon = _testWrapper.screen.getByRole('img', {
+      name: (0, _concat["default"])(_context2 = "".concat(defaultProps.data.text)).call(_context2, _ListViewItem.LIST_ITEM_ICON)
+    });
+    expect(icon).toHaveStyleRule('width', '18px');
+    expect(icon).toHaveStyleRule('height', '18px');
+  });
+  test('passes colorId to the avatar', function () {
+    var _context3;
+    getComponentOnyx(_2.OnyxTheme, {
+      colorId: 'my-color-id'
+    });
+    var avatar = _testWrapper.screen.getByRole('img', {
+      name: (0, _concat["default"])(_context3 = "".concat(defaultProps.data.text)).call(_context3, _ListViewItem.LIST_ITEM_ICON)
+    }).parentElement;
+    expect(avatar).toBeInTheDocument();
+  });
   test('renders icon if both icon and image are passed', function () {
     getComponent();
     var icon = _testWrapper.screen.getByRole('img');

package/lib/cjs/components/ListViewItem/listViewItemAttributes.js

@@ -26,9 +26,16 @@ var descriptions = {
   isSelected: 'Sets the selected state of the ListItem',
   isPanelHeader: 'A boolean that will adapt the styling of ListIteme to be used as the PanelHeader',
   slots: 'Provides a way to insert markup in specified places.',
-  linkProps: 'When present, provides meta click functionality'
+  linkProps: 'When present, provides meta click functionality',
+  colorId: 'Identifier used to deterministically derive the avatar color when no explicit color is set.'
 };
 var SharedItemArgTypes = exports.SharedItemArgTypes = {
+  colorId: {
+    description: descriptions.colorId,
+    control: {
+      type: 'text'
+    }
+  },
   data: {
     description: descriptions.data,
     type: {
@@ -70,6 +77,7 @@ var listViewItemArgTypes = exports.listViewItemArgTypes = _objectSpread(_objectS
 }, SharedItemArgTypes), _hoverProps.onHoverArgTypes), _ariaAttributes.ariaAttributeBaseArgTypes);
 var SharedItemPropTypes = exports.SharedItemPropTypes = {
   className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  colorId: _propTypes["default"].string,
   data: _propTypes["default"].shape({
     icon: _propTypes["default"].elementType,
     image: _propTypes["default"].shape({

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

@@ -122,11 +122,19 @@ var DefaultMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     }
   }, [initialItems, mode]);
   var toggleItems = function toggleItems(keys) {
+    var _inputRef$current;
     setItems((0, _filter["default"])(initialItems).call(initialItems, function (item) {
       var _context;
       return !(0, _includes["default"])(_context = (0, _from["default"])(keys)).call(_context, item.key);
     }));
     if (onSelectionChange) onSelectionChange(keys);
+    // Selecting an option removes it from the list, unmounting its row while
+    // focusedKey still points at it — the virtualizer then holds DOM focus on
+    // the listbox, so a subsequent outside click never blurs the input and the
+    // listbox stays open. Clear the stale focus and return it to the input,
+    // matching the post-selection focus state of the Astro theme (UXE-9077).
+    selectionManager.setFocusedKey(null);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
   };
   var _useFilter = (0, _i18n.useFilter)({
       sensitivity: 'base'

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

@@ -23,7 +23,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.LongLabels = exports.IconSlotsInBadge = exports.Error = exports.DisabledKeys = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = exports.CondensedWithSection = exports.CondensedWithCustomText = exports.CondensedAsyncLoading = exports.Condensed = void 0;
+exports["default"] = exports.Uncontrolled = exports.ReadOnlyValues = exports.ReadOnlyField = exports.OnLoadPrev = exports.LongLabels = exports.IconSlotsInBadge = exports.Error = exports.DisabledKeys = exports.DefaultOpen = exports.Default = exports.CustomValues = exports.CustomSize = exports.Controlled = exports.CondensedWithSection = exports.CondensedWithCustomText = exports.CondensedAsyncLoading = exports.Condensed = void 0;
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
@@ -310,6 +310,28 @@ var Default = exports.Default = function Default(args) {
     }, item.name);
   }));
 };
+var DefaultOpen = exports.DefaultOpen = function DefaultOpen() {
+  var inputRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, []);
+  return (0, _react2.jsx)(_index.OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle('bottom', true, '50%', '50%', '20%')
+  }, (0, _react2.jsx)(_index.MultivaluesField, {
+    items: items,
+    label: "Field Label",
+    ref: inputRef
+  }, function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key,
+      "data-id": item.name,
+      "aria-label": item.name
+    }, item.name);
+  }));
+};
 var Uncontrolled = exports.Uncontrolled = function Uncontrolled(args) {
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),

package/lib/cjs/components/NavBar/NavBar.styles.d.ts

@@ -112,7 +112,17 @@ declare const _default: {
             scrollbarColor: string;
         };
     };
-    sectionBody: any;
+    sectionBody: {
+        pl: string;
+        display: string;
+        width: string;
+        '&.is-selected': {
+            display: string;
+        };
+        ':focus': {
+            outline: string;
+        };
+    };
     sectionButton: {
         width: string;
         '&.is-focused': {

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -17,11 +17,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["buttonProps", "children", "title"];
+var _excluded = ["buttonProps", "children", "slots", "title"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var buttonProps = _ref.buttonProps,
     children = _ref.children,
+    slots = _ref.slots,
     title = _ref.title,
     other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var linkStyles = {
@@ -35,7 +36,7 @@ var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     pageHeaderAddIconSize = _useGetTheme.pageHeaderAddIconSize;
   var renderButton = buttonProps && (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
     "aria-label": "icon button",
-    ml: pageHeaderAddIconMargin,
+    mx: pageHeaderAddIconMargin,
     variant: "inverted"
   }, buttonProps), (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
@@ -50,7 +51,7 @@ var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, (0, _react2.jsx)(_index.Text, {
     as: "h1",
     variant: "pageHeaderTitle"
-  }, title), renderButton), (0, _react2.jsx)(_index.Text, {
+  }, title), renderButton, slots === null || slots === void 0 ? void 0 : slots.rightOfTitle), (0, _react2.jsx)(_index.Text, {
     variant: "pageHeaderBody",
     sx: linkStyles
   }, children));
@@ -59,6 +60,10 @@ PageHeader.propTypes = {
   /** If present, this string will be rendered as the title */
   title: _propTypes["default"].string,
   /** Props object that is spread into the Button element. */
-  buttonProps: _propTypes["default"].shape({})
+  buttonProps: _propTypes["default"].shape({}),
+  /** Slots for rendering custom elements within the PageHeader. */
+  slots: _propTypes["default"].shape({
+    rightOfTitle: _propTypes["default"].node
+  })
 };
 var _default = exports["default"] = PageHeader;

package/lib/cjs/components/PageHeader/PageHeader.mdx

@@ -15,5 +15,8 @@ Pass `buttonProps` to add actions and customizations to the '+' button. Omit `bu
 ### Children
 Text and Links passed as children will be styled to match Ping specs.
 
+### Slots
+Pass `slots.rightOfTitle` to render a custom element (e.g. an overflow menu `IconButton`) to the right of the title/add button. This renders after the add button if `buttonProps` is provided, otherwise it renders immediately after the title.
+
 ### Note:
 Components styled to match design specs may be updated over time as design specs change. Be aware that styles within this component may undergo minor adjustments over time to stay in sync with the latest design specifications.

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

@@ -8,6 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = exports.WithoutLink = exports.WithoutButton = exports.Default = exports.Customization = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _DotsVerticalIcon = _interopRequireDefault(require("@pingux/mdi-react/DotsVerticalIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks");
@@ -91,13 +92,22 @@ WithoutLink.parameters = {
     url: _figmaLinks.FIGMA_LINKS.pageHeader.withoutLink
   }
 };
-var Customization = exports.Customization = function Customization(args) {
-  return (0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({
+var Customization = exports.Customization = function Customization() {
+  return (0, _react2.jsx)(_index.PageHeader, {
     buttonProps: {
       bg: 'critical.bright'
     },
-    title: "Lorem Ipsum"
-  }, args), description, (0, _react2.jsx)(_index.Link, {
+    title: "Lorem Ipsum",
+    slots: {
+      rightOfTitle: (0, _react2.jsx)(_index.IconButton, {
+        "aria-label": "overflow menu",
+        onPress: function onPress() {}
+      }, (0, _react2.jsx)(_index.Icon, {
+        icon: _DotsVerticalIcon["default"],
+        size: "sm"
+      }))
+    }
+  }, description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
 };

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

@@ -42,7 +42,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var testId = 'test-header';
 var defaultProps = {
   title: 'test-title',
@@ -62,8 +62,13 @@ var getComponent = function getComponent() {
 (0, _universalComponentTest.universalComponentTests)({
   renderComponent: function renderComponent(props) {
     return (0, _react2.jsx)(_index.PageHeader, (0, _extends2["default"])({
-      title: "Title of the Page"
-    }, props), "some test  ");
+      title: "Title of the Page",
+      slots: {
+        rightOfTitle: (0, _react2.jsx)(_index.IconButton, {
+          "aria-label": "overflow menu"
+        }, (0, _react2.jsx)("span", null, "..."))
+      }
+    }, props), "some test");
   }
 });
 test('renders default PageHeader', function () {
@@ -122,6 +127,55 @@ test('for default theme, it applies correct styles', function () {
   });
   expect(button).toHaveStyleRule('margin-left', '10px');
 });
+test('renders slots.rightOfTitle when provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+  var onPress, overflowButton;
+  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+    while (1) switch (_context2.prev = _context2.next) {
+      case 0:
+        onPress = jest.fn();
+        getComponent(_objectSpread(_objectSpread({}, defaultProps), {}, {
+          slots: {
+            rightOfTitle: (0, _react2.jsx)(_index.IconButton, {
+              "aria-label": "overflow menu",
+              onPress: onPress
+            }, (0, _react2.jsx)("span", null, "..."))
+          }
+        }));
+        overflowButton = _testWrapper.screen.getByRole('button', {
+          name: 'overflow menu'
+        });
+        expect(overflowButton).toBeInTheDocument();
+        _context2.next = 6;
+        return _userEvent["default"].tab();
+      case 6:
+        _context2.next = 8;
+        return _userEvent["default"].tab();
+      case 8:
+        expect(overflowButton).toHaveFocus();
+        _context2.next = 11;
+        return _userEvent["default"].click(overflowButton);
+      case 11:
+        expect(onPress).toHaveBeenCalled();
+      case 12:
+      case "end":
+        return _context2.stop();
+    }
+  }, _callee2);
+})));
+test('renders slots.rightOfTitle when there is no add button', function () {
+  getComponent({
+    title: 'test-title',
+    slots: {
+      rightOfTitle: (0, _react2.jsx)(_index.IconButton, {
+        "aria-label": "overflow menu"
+      }, (0, _react2.jsx)("span", null, "..."))
+    }
+  });
+  var overflowButton = _testWrapper.screen.getByRole('button', {
+    name: 'overflow menu'
+  });
+  expect(overflowButton).toBeInTheDocument();
+});
 test('for onyx theme, it applies correct styles', function () {
   jest.spyOn(themeHook, 'useGetTheme').mockReturnValueOnce(_objectSpread(_objectSpread({}, _theme["default"]), {}, {
     pageHeaderTitleMargin: 'md',

package/lib/cjs/components/PanelHeader/PanelHeader.js

@@ -16,8 +16,8 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.PANEL_HEADER_ICON = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,19 +25,21 @@ var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _listViewItemAttributes = require("../ListViewItem/listViewItemAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["avatarProps", "children", "className", "data", "headerProps", "headerWrapperProps", "isCopyable", "slots", "subtextProps"];
+var _excluded = ["avatarProps", "children", "className", "colorId", "data", "headerProps", "headerWrapperProps", "iconProps", "isCopyable", "slots", "subtextProps"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var PANEL_HEADER_ICON = exports.PANEL_HEADER_ICON = '-panel-header-icon';
 var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _context;
+  var _context, _context2;
   var avatarProps = _ref.avatarProps,
     children = _ref.children,
     className = _ref.className,
+    colorId = _ref.colorId,
     data = _ref.data,
     headerProps = _ref.headerProps,
     headerWrapperProps = _ref.headerWrapperProps,
+    iconProps = _ref.iconProps,
     isCopyable = _ref.isCopyable,
     slots = _ref.slots,
     subtextProps = _ref.subtextProps,
@@ -61,13 +63,35 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       name: (0, _concat["default"])(_context = "".concat(text)).call(_context, PANEL_HEADER_ICON)
     }
   }));
+  var renderOnyxIcon = icon && (0, _react2.jsx)(_index.Box, {
+    mr: "md"
+  }, (0, _react2.jsx)(_index.IconWrapper, (0, _extends2["default"])({
+    icon: icon,
+    size: "sm",
+    title: {
+      name: (0, _concat["default"])(_context2 = "".concat(text)).call(_context2, PANEL_HEADER_ICON)
+    },
+    isCircle: true,
+    colorId: colorId || avatarDefaultText
+  }, avatarProps, {
+    iconProps: _objectSpread({
+      size: 'sm'
+    }, iconProps)
+  })));
   var renderAvatar = (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({
-    src: image === null || image === void 0 ? void 0 : image.src,
-    isSquare: !!(image !== null && image !== void 0 && image.src),
     size: "sm",
+    colorId: colorId,
     defaultText: avatarDefaultText,
     mr: "md"
   }, avatarProps));
+  var renderOnyxImage = !icon && (image === null || image === void 0 ? void 0 : image.src) && (0, _react2.jsx)(_index.Box, {
+    mr: "md"
+  }, (0, _react2.jsx)(_index.Image, {
+    src: image.src,
+    alt: image.alt,
+    "aria-label": image['aria-label'],
+    variant: "images.avatar"
+  }));
   var renderImage = !icon && image && (0, _react2.jsx)(_index.Box, {
     variant: "panelHeader.iconWrapper"
   }, (0, _react2.jsx)(_index.Image, {
@@ -80,6 +104,8 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       return slots.leftOfData;
     }
     if (isOnyx) {
+      if (icon) return renderOnyxIcon;
+      if (image !== null && image !== void 0 && image.src) return renderOnyxImage;
       return renderAvatar;
     }
     if (icon) {
@@ -107,9 +133,9 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     textToCopy: subtext
   }, (0, _react2.jsx)(_index.Text, {
     variant: "panelHeaderSubtext"
-  }, subtext)) : subtext && (0, _react2.jsx)(_index.Text, {
+  }, subtext)) : subtext && (0, _react2.jsx)(_index.Text, (0, _extends2["default"])({
     variant: "panelHeaderSubtext"
-  }, subtext)));
+  }, subtextProps), subtext)));
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "panelHeader.container",
     className: className,
@@ -129,7 +155,9 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, children)));
 });
 PanelHeader.propTypes = _objectSpread(_objectSpread({}, _listViewItemAttributes.SharedItemPropTypes), {}, {
+  colorId: _propTypes["default"].string,
   isCopyable: _propTypes["default"].bool,
+  iconProps: _propTypes["default"].object,
   slots: _propTypes["default"].shape({
     rightOfData: _propTypes["default"].node
   })

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

@@ -33,6 +33,7 @@ var _default = exports["default"] = {
 var Default = exports.Default = function Default(_ref) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
+    colorId: "1111111111111111",
     data: {
       icon: _AccountIcon["default"],
       text: 'Fons Vernall',
@@ -90,15 +91,12 @@ var WithImage = exports.WithImage = function WithImage(args) {
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
       image: {
-        src: _images.userImagePanelHeader,
+        src: _images.userImage,
         alt: 'Ping Identity Logo',
         'aria-label': 'Ping Identity Logo'
       },
       avatarDefaultText: 'FV',
       text: 'Fons Vernall'
-    },
-    avatarProps: {
-      size: 'lg'
     }
   }));
 };
@@ -119,7 +117,6 @@ var WithAvatar = exports.WithAvatar = function WithAvatar(args) {
       text: 'Fons Vernall'
     },
     avatarProps: {
-      size: 'lg',
       isLogo: true
     }
   }));

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

@@ -44,7 +44,7 @@ function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present,
 function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty2; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
 function _OverloadYield(e, d) { this.v = e, this.k = d; }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context4, _context5; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(t), !0)).call(_context4, function (r) { (0, _defineProperty3["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context5 = ownKeys(Object(t))).call(_context5, function (r) { _Object$defineProperty2(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { (0, _defineProperty3["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty2(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 var defaultProps = {
   data: {
     text: 'testText',
@@ -70,8 +70,9 @@ jest.mock('../../hooks/useFallbackImage', function () {
 });
 var getComponentOnyx = function getComponentOnyx() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var theme = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _index.OnyxTheme;
   return (0, _testWrapper.render)((0, _react3.jsx)(_index.AstroProvider, {
-    themeOverrides: [_index.OnyxTheme]
+    themeOverrides: [theme]
   }, (0, _react3.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, defaultProps, props))));
 };
 
@@ -228,10 +229,51 @@ test('renders leftOfData slot', function () {
   });
   _testWrapper.screen.getByText(TEST_TEXT);
 });
-test('renders onyx components', function () {
+test.each([['Onyx light', _index.OnyxTheme], ['Onyx dark', _index.OnyxDarkTheme]])('renders an 18px icon in %s PanelHeader avatars', function (_, theme) {
+  var _context4;
+  getComponentOnyx({
+    data: {
+      text: 'testText',
+      icon: _AccountIcon["default"],
+      avatarDefaultText: 'AA'
+    },
+    avatarProps: {
+      color: 'green'
+    },
+    iconProps: {
+      'data-testid': 'panel-header-icon'
+    }
+  }, theme);
+  var icon = _testWrapper.screen.getByRole('img', {
+    name: (0, _concat["default"])(_context4 = "".concat(defaultProps.data.text)).call(_context4, _PanelHeader.PANEL_HEADER_ICON)
+  });
+  expect(icon).toHaveStyleRule('width', '18px');
+  expect(icon).toHaveStyleRule('height', '18px');
+  expect(icon).toHaveAttribute('data-testid', 'panel-header-icon');
+});
+test('forwards iconProps to the Onyx avatar icon', function () {
+  getComponentOnyx({
+    data: {
+      text: 'testText',
+      icon: _AccountIcon["default"]
+    },
+    avatarProps: {
+      color: 'green'
+    },
+    iconProps: {
+      'aria-label': 'custom panel icon'
+    }
+  });
+  expect(_testWrapper.screen.getByLabelText('custom panel icon')).toBeInTheDocument();
+});
+test('renders image avatars in Onyx', function () {
   getComponentOnyx();
+  (0, _react2.act)(function () {
+    fallbackImageObj.onImageLoad();
+  });
   var image = _testWrapper.screen.getByRole('img');
   expect(image.tagName.toLowerCase()).toBe('img');
   expect(image).toHaveAttribute('src', _images.pingImg);
-  expect(image).toHaveAttribute('alt', 'Avatar');
+  expect(image).toHaveAttribute('alt', 'avatar');
+  expect(image).toHaveAttribute('aria-label', 'avatar');
 });

package/lib/cjs/components/RangeCalendar/RangeCalendar.js

@@ -83,7 +83,7 @@ var RangeCalendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     nextButtonProps: nextButtonProps
   }), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    gap: "26px"
+    gap: "lg"
   }, (0, _react2.jsx)(_RangeCalendarGrid["default"], {
     state: state
   }), (0, _react2.jsx)(_RangeCalendarGrid["default"], {

package/lib/cjs/components/RangeCalendar/RangeCalendar.mdx

@@ -16,6 +16,10 @@ This component is built on [useRangeCalendar](https://react-spectrum.adobe.com/r
 
 This component can be used independently and does not require additional components. 
 
+### Usage in a popup
+
+When RangeCalendar is displayed inside a popup (such as a popover or date picker overlay), the popup container should include a popover shadow to visually separate it from the page content.
+
 ### Accessibility
 
 <AccessibilityTable keyboardRows={[

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

@@ -293,6 +293,36 @@ test('parseDateIfString should correctly parse string or DateValue inputs', func
   expect(result1).toEqual(new _date.CalendarDate(2022, 8, 1));
   expect(result2).toEqual(new _date.CalendarDate(2022, 8, 10));
 });
+test('disabled calendar applies is-disabled class to weekday column headers', function () {
+  getComponent({
+    isDisabled: true
+  });
+
+  // RangeCalendarGrid passes isDisabled to TableCell; Box applies the is-disabled class
+  var columnHeaders = _testWrapper.screen.getAllByRole('columnheader', {
+    hidden: true
+  });
+  expect(columnHeaders).toHaveLength(14);
+  (0, _forEach["default"])(columnHeaders).call(columnHeaders, function (header) {
+    expect(header).toHaveClass('is-disabled');
+  });
+});
+test('disabled calendar renders month name headings with disabled state', function () {
+  getComponent({
+    isDisabled: true
+  });
+
+  // RangeCalendarHeader applies sx={{ color: state.isDisabled ? 'text.secondary' : undefined }}
+  // to the month name Text elements (role="heading", aria-level={3}, aria-hidden)
+  var monthHeadings = _testWrapper.screen.getAllByRole('heading', {
+    level: 3,
+    hidden: true
+  });
+  expect(monthHeadings).toHaveLength(2);
+  (0, _forEach["default"])(monthHeadings).call(monthHeadings, function (heading) {
+    expect(heading).toBeInTheDocument();
+  });
+});
 test('should allow selecting a range spanning more than 2 months with minValue constraint', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
   var minValue, buttons, cellsAfterNavigation, octFirstCell, cellsInJuly, julyFifthCell, selectedCells;
   return _regeneratorRuntime().wrap(function _callee6$(_context7) {

package/lib/cjs/components/RangeCalendar/RangeCalendarGrid.js

@@ -43,6 +43,7 @@ var RangeCalendarGrid = function RangeCalendarGrid(props) {
   return (0, _react2.jsx)(_index.Table, gridProps, (0, _react2.jsx)(_index.TableHead, headerProps, (0, _react2.jsx)(_index.TableRow, null, (0, _map["default"])(weekDays).call(weekDays, function (day, index) {
     return (0, _react2.jsx)(_index.TableCell, {
       isHeading: true,
+      isDisabled: state.isDisabled,
       variant: "rangeCalendar.columnHeader",
       key: getKey(day, index),
       role: "columnheader"