@pingux/astro 2.221.6 → 2.234.0-alpha.0

package/lib/components/ListViewItem/listViewItemAttributes.js

@@ -19,9 +19,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.'
 };
 export var SharedItemArgTypes = {
+  colorId: {
+    description: descriptions.colorId,
+    control: {
+      type: 'text'
+    }
+  },
   data: {
     description: descriptions.data,
     type: {
@@ -63,6 +70,7 @@ export var listViewItemArgTypes = _objectSpread(_objectSpread(_objectSpread({
 }, SharedItemArgTypes), onHoverArgTypes), ariaAttributeBaseArgTypes);
 export var SharedItemPropTypes = {
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  colorId: PropTypes.string,
   data: PropTypes.shape({
     icon: PropTypes.elementType,
     image: PropTypes.shape({

package/lib/components/MultivaluesField/DefaultMultivaluesField.js

@@ -111,11 +111,19 @@ var DefaultMultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   }, [initialItems, mode]);
   var toggleItems = function toggleItems(keys) {
+    var _inputRef$current;
     setItems(_filterInstanceProperty(initialItems).call(initialItems, function (item) {
       var _context;
       return !_includesInstanceProperty(_context = _Array$from(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 = useFilter({
       sensitivity: 'base'

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

@@ -36,7 +36,7 @@ function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try {
 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 _context12, _context13; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context12 = ownKeys(Object(t), !0)).call(_context12, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context13 = ownKeys(Object(t))).call(_context13, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import PlusCircleMultipleOutlineIcon from '@pingux/mdi-react/PlusCircleMultipleOutlineIcon';
 import { useFilter } from '@react-aria/i18n';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
@@ -299,6 +299,28 @@ export var Default = function Default(args) {
     }, item.name);
   }));
 };
+export var DefaultOpen = function DefaultOpen() {
+  var inputRef = useRef();
+  useEffect(function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
+  }, []);
+  return ___EmotionJSX(OverlayProvider
+  // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle('bottom', true, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, {
+    items: items,
+    label: "Field Label",
+    ref: inputRef
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name,
+      "aria-label": item.name
+    }, item.name);
+  }));
+};
 export var Uncontrolled = function Uncontrolled(args) {
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),

package/lib/components/PageHeader/PageHeader.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["buttonProps", "children", "title"];
+var _excluded = ["buttonProps", "children", "slots", "title"];
 import React, { forwardRef } from 'react';
 import PlusIcon from '@pingux/mdi-react/PlusIcon';
 import PropTypes from 'prop-types';
@@ -10,6 +10,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var buttonProps = _ref.buttonProps,
     children = _ref.children,
+    slots = _ref.slots,
     title = _ref.title,
     other = _objectWithoutProperties(_ref, _excluded);
   var linkStyles = {
@@ -23,7 +24,7 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     pageHeaderAddIconSize = _useGetTheme.pageHeaderAddIconSize;
   var renderButton = buttonProps && ___EmotionJSX(IconButton, _extends({
     "aria-label": "icon button",
-    ml: pageHeaderAddIconMargin,
+    mx: pageHeaderAddIconMargin,
     variant: "inverted"
   }, buttonProps), ___EmotionJSX(Icon, {
     icon: PlusIcon,
@@ -38,7 +39,7 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, ___EmotionJSX(Text, {
     as: "h1",
     variant: "pageHeaderTitle"
-  }, title), renderButton), ___EmotionJSX(Text, {
+  }, title), renderButton, slots === null || slots === void 0 ? void 0 : slots.rightOfTitle), ___EmotionJSX(Text, {
     variant: "pageHeaderBody",
     sx: linkStyles
   }, children));
@@ -47,6 +48,10 @@ PageHeader.propTypes = {
   /** If present, this string will be rendered as the title */
   title: PropTypes.string,
   /** Props object that is spread into the Button element. */
-  buttonProps: PropTypes.shape({})
+  buttonProps: PropTypes.shape({}),
+  /** Slots for rendering custom elements within the PageHeader. */
+  slots: PropTypes.shape({
+    rightOfTitle: PropTypes.node
+  })
 };
 export default PageHeader;

package/lib/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/components/PageHeader/PageHeader.stories.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import DotsVerticalIcon from '@pingux/mdi-react/DotsVerticalIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { Link, PageHeader } from '../../index';
+import { Icon, IconButton, Link, PageHeader } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import PageHeaderReadMe from './PageHeader.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -83,13 +84,22 @@ WithoutLink.parameters = {
     url: FIGMA_LINKS.pageHeader.withoutLink
   }
 };
-export var Customization = function Customization(args) {
-  return ___EmotionJSX(PageHeader, _extends({
+export var Customization = function Customization() {
+  return ___EmotionJSX(PageHeader, {
     buttonProps: {
       bg: 'critical.bright'
     },
-    title: "Lorem Ipsum"
-  }, args), description, ___EmotionJSX(Link, {
+    title: "Lorem Ipsum",
+    slots: {
+      rightOfTitle: ___EmotionJSX(IconButton, {
+        "aria-label": "overflow menu",
+        onPress: function onPress() {}
+      }, ___EmotionJSX(Icon, {
+        icon: DotsVerticalIcon,
+        size: "sm"
+      }))
+    }
+  }, description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
 };

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

@@ -29,11 +29,11 @@ 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) { _defineProperty(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) { _defineProperty(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; }
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import * as themeHook from '../../hooks';
-import { Link, PageHeader } from '../../index';
+import { IconButton, Link, PageHeader } from '../../index';
 import theme from '../../styles/theme';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -57,8 +57,13 @@ var getComponent = function getComponent() {
 universalComponentTests({
   renderComponent: function renderComponent(props) {
     return ___EmotionJSX(PageHeader, _extends({
-      title: "Title of the Page"
-    }, props), "some test  ");
+      title: "Title of the Page",
+      slots: {
+        rightOfTitle: ___EmotionJSX(IconButton, {
+          "aria-label": "overflow menu"
+        }, ___EmotionJSX("span", null, "..."))
+      }
+    }, props), "some test");
   }
 });
 test('renders default PageHeader', function () {
@@ -117,6 +122,55 @@ test('for default theme, it applies correct styles', function () {
   });
   expect(button).toHaveStyleRule('margin-left', '10px');
 });
+test('renders slots.rightOfTitle when provided', /*#__PURE__*/_asyncToGenerator(/*#__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: ___EmotionJSX(IconButton, {
+              "aria-label": "overflow menu",
+              onPress: onPress
+            }, ___EmotionJSX("span", null, "..."))
+          }
+        }));
+        overflowButton = screen.getByRole('button', {
+          name: 'overflow menu'
+        });
+        expect(overflowButton).toBeInTheDocument();
+        _context2.next = 6;
+        return userEvent.tab();
+      case 6:
+        _context2.next = 8;
+        return userEvent.tab();
+      case 8:
+        expect(overflowButton).toHaveFocus();
+        _context2.next = 11;
+        return userEvent.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: ___EmotionJSX(IconButton, {
+        "aria-label": "overflow menu"
+      }, ___EmotionJSX("span", null, "..."))
+    }
+  });
+  var overflowButton = 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), {}, {
     pageHeaderTitleMargin: 'md',

package/lib/components/PanelHeader/PanelHeader.js

@@ -1,9 +1,9 @@
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-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 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) { _defineProperty(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) { _defineProperty(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; }
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
@@ -16,18 +16,20 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { useGetTheme } from '../../hooks';
-import { Avatar, Box, CopyText, Icon, Image, Text } from '../../index';
+import { Avatar, Box, CopyText, Icon, IconWrapper, Image, Text } from '../../index';
 import { SharedItemPropTypes } from '../ListViewItem/listViewItemAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var PANEL_HEADER_ICON = '-panel-header-icon';
 var PanelHeader = /*#__PURE__*/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,
@@ -51,13 +53,35 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       name: _concatInstanceProperty(_context = "".concat(text)).call(_context, PANEL_HEADER_ICON)
     }
   }));
+  var renderOnyxIcon = icon && ___EmotionJSX(Box, {
+    mr: "md"
+  }, ___EmotionJSX(IconWrapper, _extends({
+    icon: icon,
+    size: "sm",
+    title: {
+      name: _concatInstanceProperty(_context2 = "".concat(text)).call(_context2, PANEL_HEADER_ICON)
+    },
+    isCircle: true,
+    colorId: colorId || avatarDefaultText
+  }, avatarProps, {
+    iconProps: _objectSpread({
+      size: 'sm'
+    }, iconProps)
+  })));
   var renderAvatar = ___EmotionJSX(Avatar, _extends({
-    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) && ___EmotionJSX(Box, {
+    mr: "md"
+  }, ___EmotionJSX(Image, {
+    src: image.src,
+    alt: image.alt,
+    "aria-label": image['aria-label'],
+    variant: "images.avatar"
+  }));
   var renderImage = !icon && image && ___EmotionJSX(Box, {
     variant: "panelHeader.iconWrapper"
   }, ___EmotionJSX(Image, {
@@ -70,6 +94,8 @@ var PanelHeader = /*#__PURE__*/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) {
@@ -97,9 +123,9 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     textToCopy: subtext
   }, ___EmotionJSX(Text, {
     variant: "panelHeaderSubtext"
-  }, subtext)) : subtext && ___EmotionJSX(Text, {
+  }, subtext)) : subtext && ___EmotionJSX(Text, _extends({
     variant: "panelHeaderSubtext"
-  }, subtext)));
+  }, subtextProps), subtext)));
   return ___EmotionJSX(Box, _extends({
     variant: "panelHeader.container",
     className: className,
@@ -119,7 +145,9 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, children)));
 });
 PanelHeader.propTypes = _objectSpread(_objectSpread({}, SharedItemPropTypes), {}, {
+  colorId: PropTypes.string,
   isCopyable: PropTypes.bool,
+  iconProps: PropTypes.object,
   slots: PropTypes.shape({
     rightOfData: PropTypes.node
   })

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

@@ -6,7 +6,7 @@ import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Breadcrumbs, Item, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
-import { pingImg, userImagePanelHeader } from '../../utils/devUtils/constants/images';
+import { pingImg, userImage } from '../../utils/devUtils/constants/images';
 import { SharedItemArgTypes } from '../ListViewItem/listViewItemAttributes';
 import PanelHeaderReadMe from './PanelHeader.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -25,6 +25,7 @@ export default {
 export var Default = function Default(_ref) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
+    colorId: "1111111111111111",
     data: {
       icon: AccountIcon,
       text: 'Fons Vernall',
@@ -82,15 +83,12 @@ export var WithImage = function WithImage(args) {
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
       image: {
-        src: userImagePanelHeader,
+        src: userImage,
         alt: 'Ping Identity Logo',
         'aria-label': 'Ping Identity Logo'
       },
       avatarDefaultText: 'FV',
       text: 'Fons Vernall'
-    },
-    avatarProps: {
-      size: 'lg'
     }
   }));
 };
@@ -111,7 +109,6 @@ export var WithAvatar = function WithAvatar(args) {
       text: 'Fons Vernall'
     },
     avatarProps: {
-      size: 'lg',
       isLogo: true
     }
   }));

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

@@ -30,12 +30,12 @@ function _OverloadYield(e, d) { this.v = e, this.k = d; }
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 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) { _defineProperty(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; }
+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) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import { act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { AstroProvider, OnyxTheme, PanelHeader, PanelHeaderSwitchField } from '../../index';
+import { AstroProvider, OnyxDarkTheme, OnyxTheme, PanelHeader, PanelHeaderSwitchField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -66,8 +66,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] : OnyxTheme;
   return render(___EmotionJSX(AstroProvider, {
-    themeOverrides: [OnyxTheme]
+    themeOverrides: [theme]
   }, ___EmotionJSX(PanelHeader, _extends({}, defaultProps, props))));
 };
 
@@ -224,10 +225,51 @@ test('renders leftOfData slot', function () {
   });
   screen.getByText(TEST_TEXT);
 });
-test('renders onyx components', function () {
+test.each([['Onyx light', OnyxTheme], ['Onyx dark', OnyxDarkTheme]])('renders an 18px icon in %s PanelHeader avatars', function (_, theme) {
+  var _context4;
+  getComponentOnyx({
+    data: {
+      text: 'testText',
+      icon: AccountIcon,
+      avatarDefaultText: 'AA'
+    },
+    avatarProps: {
+      color: 'green'
+    },
+    iconProps: {
+      'data-testid': 'panel-header-icon'
+    }
+  }, theme);
+  var icon = screen.getByRole('img', {
+    name: _concatInstanceProperty(_context4 = "".concat(defaultProps.data.text)).call(_context4, 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
+    },
+    avatarProps: {
+      color: 'green'
+    },
+    iconProps: {
+      'aria-label': 'custom panel icon'
+    }
+  });
+  expect(screen.getByLabelText('custom panel icon')).toBeInTheDocument();
+});
+test('renders image avatars in Onyx', function () {
   getComponentOnyx();
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
   var image = screen.getByRole('img');
   expect(image.tagName.toLowerCase()).toBe('img');
   expect(image).toHaveAttribute('src', pingImg);
-  expect(image).toHaveAttribute('alt', 'Avatar');
+  expect(image).toHaveAttribute('alt', 'avatar');
+  expect(image).toHaveAttribute('aria-label', 'avatar');
 });

package/lib/components/RangeCalendar/RangeCalendar.js

@@ -73,7 +73,7 @@ var RangeCalendar = /*#__PURE__*/forwardRef(function (props, ref) {
     nextButtonProps: nextButtonProps
   }), ___EmotionJSX(Box, {
     isRow: true,
-    gap: "26px"
+    gap: "lg"
   }, ___EmotionJSX(RangeCalendarGrid, {
     state: state
   }), ___EmotionJSX(RangeCalendarGrid, {

package/lib/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/components/RangeCalendar/RangeCalendar.test.js

@@ -287,6 +287,36 @@ test('parseDateIfString should correctly parse string or DateValue inputs', func
   expect(result1).toEqual(new CalendarDate(2022, 8, 1));
   expect(result2).toEqual(new 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 = screen.getAllByRole('columnheader', {
+    hidden: true
+  });
+  expect(columnHeaders).toHaveLength(14);
+  _forEachInstanceProperty(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 = screen.getAllByRole('heading', {
+    level: 3,
+    hidden: true
+  });
+  expect(monthHeadings).toHaveLength(2);
+  _forEachInstanceProperty(monthHeadings).call(monthHeadings, function (heading) {
+    expect(heading).toBeInTheDocument();
+  });
+});
 test('should allow selecting a range spanning more than 2 months with minValue constraint', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
   var minValue, buttons, cellsAfterNavigation, octFirstCell, cellsInJuly, julyFifthCell, selectedCells;
   return _regeneratorRuntime().wrap(function _callee6$(_context7) {

package/lib/components/RangeCalendar/RangeCalendarGrid.js

@@ -35,6 +35,7 @@ var RangeCalendarGrid = function RangeCalendarGrid(props) {
   return ___EmotionJSX(Table, gridProps, ___EmotionJSX(TableHead, headerProps, ___EmotionJSX(TableRow, null, _mapInstanceProperty(weekDays).call(weekDays, function (day, index) {
     return ___EmotionJSX(TableCell, {
       isHeading: true,
+      isDisabled: state.isDisabled,
       variant: "rangeCalendar.columnHeader",
       key: getKey(day, index),
       role: "columnheader"

package/lib/components/SelectField/SelectField.stories.js

@@ -154,6 +154,19 @@ export var Default = function Default(args) {
     key: "yellow"
   }, "Yellow")));
 };
+export var DefaultOpen = function DefaultOpen() {
+  return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, {
+    width: "100%",
+    isDefaultOpen: true,
+    label: "Example Label"
+  }, ___EmotionJSX(Item, {
+    key: "red"
+  }, "Red"), ___EmotionJSX(Item, {
+    key: "blue"
+  }, "Blue"), ___EmotionJSX(Item, {
+    key: "yellow"
+  }, "Yellow")));
+};
 export var WithSections = function WithSections(args) {
   return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({
     items: withSection