@pingux/astro 1.36.2 → 1.36.3-alpha.1

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

@@ -324,11 +324,11 @@ exports.Controlled = Controlled;
 
 var AccordionWithInputs = function AccordionWithInputs() {
   return (0, _react2.jsx)(_AccordionGridGroup["default"], {
-    items: data
+    items: data,
+    defaultSelectedKeys: ['Organization']
   }, function (item) {
     return (0, _react2.jsx)(_collections.Item, {
-      key: item.key,
-      textValue: item.name
+      key: item.key
     }, (0, _react2.jsx)(_index.Text, {
       sx: {
         fontWeight: 3,

package/lib/cjs/components/AccordionGroup/AccordionGroup.js

@@ -42,7 +42,7 @@ var _isIterable = require("../../utils/devUtils/props/isIterable");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["onExpandedChange"];
+var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"];
 
 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); }
 
@@ -59,7 +59,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
 
-  var onExpandedChange = props.onExpandedChange,
+  var defaultExpandedKeys = props.defaultExpandedKeys,
+      expandedKeys = props.expandedKeys,
+      onExpandedChange = props.onExpandedChange,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _tree.useTreeState)(props);
   var accordionRef = (0, _react.useRef)();
@@ -73,6 +75,11 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return accordionRef.current;
   });
+  (0, _react.useEffect)(function () {
+    if (expandedKeys || defaultExpandedKeys) {
+      state.selectionManager.setFocused(true);
+    }
+  }, [defaultExpandedKeys, expandedKeys, state.selectionManager]);
   return (0, _react2.jsx)(_AccordionContext.AccordionContext.Provider, {
     value: state
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({

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

@@ -70,6 +70,23 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
     textValue: "Duplicate",
     "data-id": "third"
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!")))));
+};
+
+var getComponentWithInput = function getComponentWithInput() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react2.jsx)(_AccordionGroup["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_collections.Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item"
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_collections.Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second",
+    label: "Accordion item"
+  }, (0, _react2.jsx)("input", {
+    "data-testid": "testInput"
+  }))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -268,6 +285,19 @@ test('expanded keys expands an accordion item', function () {
   var selectedItem = buttons[0];
   expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
 });
+test('input recives focus in expanded accordion item when click', function () {
+  getComponentWithInput({
+    expandedKeys: ['second']
+  });
+
+  var input = _testWrapper.screen.getByTestId('testInput');
+
+  expect(input).not.toHaveFocus();
+
+  _userEvent["default"].click(input);
+
+  expect(input).toHaveFocus();
+});
 test('able to click a textfield that is the rendered child of an accordion', function () {
   getComponent({
     expandedKeys: ['third']

package/lib/cjs/components/NavBar/NavBar.js

@@ -95,8 +95,7 @@ var NavBar = function NavBar(props) {
     role: "navigation",
     as: "nav"
   }, items.length ? (0, _react2.jsx)(_focus.FocusScope, {
-    restoreFocus: true,
-    autoFocus: true
+    restoreFocus: true
   }, (0, _map["default"])(items).call(items, function (_ref) {
     var item = _ref.item,
         key = _ref.key;

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -76,7 +76,8 @@ var buttons = {
   },
   environmentBreadcrumb: {
     current: {
-      '&:hover:not(.disabled)': _objectSpread({}, _theme["default"].buttons.environmentBreadcrumb.current)
+      '&:hover:not(.disabled)': _objectSpread({}, _theme["default"].buttons.environmentBreadcrumb.current),
+      '&:focus': _objectSpread({}, _theme["default"].buttons.environmentBreadcrumb.current)
     }
   },
   rocker: _objectSpread(_objectSpread({}, _theme["default"].buttons.rocker), {}, {

package/lib/cjs/styles/variants/buttons.js

@@ -565,6 +565,9 @@ var environmentBreadcrumb = {
       borderRadius: '2px',
       boxShadow: '0 0 0 1px #4462ED'
     },
+    '&:focus-visible': {
+      outline: 'none'
+    },
     '&.is-pressed': {
       color: 'accent.20',
       textDecoration: 'none'

package/lib/components/AccordionGridGroup/AccordionGridGroup.stories.js

@@ -286,11 +286,11 @@ export var Controlled = function Controlled() {
 
 export var AccordionWithInputs = function AccordionWithInputs() {
   return ___EmotionJSX(AccordionGridGroup, {
-    items: data
+    items: data,
+    defaultSelectedKeys: ['Organization']
   }, function (item) {
     return ___EmotionJSX(Item, {
-      key: item.key,
-      textValue: item.name
+      key: item.key
     }, ___EmotionJSX(Text, {
       sx: {
         fontWeight: 3,

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["onExpandedChange"];
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"];
+import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { useAccordion } from '@react-aria/accordion';
 import { useTreeState } from '@react-stately/tree';
 import PropTypes from 'prop-types';
@@ -24,7 +24,9 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
 
-  var onExpandedChange = props.onExpandedChange,
+  var defaultExpandedKeys = props.defaultExpandedKeys,
+      expandedKeys = props.expandedKeys,
+      onExpandedChange = props.onExpandedChange,
       others = _objectWithoutProperties(props, _excluded);
 
   var state = useTreeState(props);
@@ -39,6 +41,11 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return accordionRef.current;
   });
+  useEffect(function () {
+    if (expandedKeys || defaultExpandedKeys) {
+      state.selectionManager.setFocused(true);
+    }
+  }, [defaultExpandedKeys, expandedKeys, state.selectionManager]);
   return ___EmotionJSX(AccordionContext.Provider, {
     value: state
   }, ___EmotionJSX(Box, _extends({

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -55,6 +55,23 @@ var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
     textValue: "Duplicate",
     "data-id": "third"
   }, ___EmotionJSX(Text, null, "Render me!")))));
+};
+
+var getComponentWithInput = function getComponentWithInput() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item"
+  }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
+    key: "second",
+    textValue: "Duplicate",
+    "data-id": "second",
+    label: "Accordion item"
+  }, ___EmotionJSX("input", {
+    "data-testid": "testInput"
+  }))));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -205,6 +222,15 @@ test('expanded keys expands an accordion item', function () {
   var selectedItem = buttons[0];
   expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
 });
+test('input recives focus in expanded accordion item when click', function () {
+  getComponentWithInput({
+    expandedKeys: ['second']
+  });
+  var input = screen.getByTestId('testInput');
+  expect(input).not.toHaveFocus();
+  userEvent.click(input);
+  expect(input).toHaveFocus();
+});
 test('able to click a textfield that is the rendered child of an accordion', function () {
   getComponent({
     expandedKeys: ['third']

package/lib/components/NavBar/NavBar.js

@@ -62,8 +62,7 @@ var NavBar = function NavBar(props) {
     role: "navigation",
     as: "nav"
   }, items.length ? ___EmotionJSX(FocusScope, {
-    restoreFocus: true,
-    autoFocus: true
+    restoreFocus: true
   }, _mapInstanceProperty(items).call(items, function (_ref) {
     var item = _ref.item,
         key = _ref.key;

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -57,7 +57,8 @@ var buttons = {
   },
   environmentBreadcrumb: {
     current: {
-      '&:hover:not(.disabled)': _objectSpread({}, theme.buttons.environmentBreadcrumb.current)
+      '&:hover:not(.disabled)': _objectSpread({}, theme.buttons.environmentBreadcrumb.current),
+      '&:focus': _objectSpread({}, theme.buttons.environmentBreadcrumb.current)
     }
   },
   rocker: _objectSpread(_objectSpread({}, theme.buttons.rocker), {}, {

package/lib/styles/variants/buttons.js

@@ -544,6 +544,9 @@ var environmentBreadcrumb = {
       borderRadius: '2px',
       boxShadow: '0 0 0 1px #4462ED'
     },
+    '&:focus-visible': {
+      outline: 'none'
+    },
     '&.is-pressed': {
       color: 'accent.20',
       textDecoration: 'none'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.36.2",
+  "version": "1.36.3-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",