@pingux/astro 1.24.0-alpha.4 → 1.24.0-alpha.5

package/lib/cjs/components/Tab/Tab.js

@@ -136,9 +136,9 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   if (mode === 'tooltip') {
     return (0, _react2.jsx)(_react["default"].Fragment, null, separator, (0, _react2.jsx)(_.TooltipTrigger, (0, _extends2["default"])({}, tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
-    }), (0, _react2.jsx)(_.Button, {
+    }), (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)("span", {
       variant: "quiet"
-    }, tab), (0, _react2.jsx)(_.Tooltip, null, itemProps.textValue || itemProps.title)));
+    }, tab)), (0, _react2.jsx)(_.Tooltip, null, itemProps.textValue || itemProps.title)));
   }
 
   return tab;

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -18,6 +18,8 @@ exports["default"] = void 0;
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
@@ -44,6 +46,8 @@ var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon
 
 var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
 
+var _interactions = require("@react-aria/interactions");
+
 var _hooks = require("../../hooks");
 
 var _ = require("../..");
@@ -202,10 +206,13 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onOpenChange: setIsOpen,
     isOpen: isOpen,
     isContainFocus: true
-  }, (0, _react2.jsx)(_.Button, {
+  }, (0, _react2.jsx)(_interactions.Pressable, null, (0, _react2.jsx)(_.Box, {
+    isRow: true,
+    alignItems: "center",
     className: classNames,
     variant: "menuTab",
-    onKeyDown: handleKeyNavigation
+    onKeyDown: handleKeyNavigation,
+    role: "tablist"
   }, (0, _react2.jsx)(_.Box, (0, _extends2["default"])({
     className: classNames,
     variant: "tab",
@@ -213,8 +220,9 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }, tabProps), (0, _react2.jsx)(_.Text, {
     variant: "tabLabel"
   }, item.props.name), selectedItem && (0, _react2.jsx)(_Tab.TabLine, null)), (0, _react2.jsx)(_.Icon, {
+    color: isTabFocused || (0, _includes["default"])(classNames).call(classNames, 'is-hovered') ? 'active' : 'neutral.40',
     icon: isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
-  })), (0, _react2.jsx)(_.Menu, {
+  }))), (0, _react2.jsx)(_.Menu, {
     onAction: setSelectedItem,
     selectionMode: "single",
     selectedKeys: [selectionManager.focusedKey],

package/lib/cjs/components/Tabs/Tabs.js

@@ -28,8 +28,6 @@ _Object$defineProperty(exports, "__esModule", {
 
 exports["default"] = exports.TabsContext = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
@@ -42,6 +40,8 @@ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-sta
 
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireWildcard(require("react"));
@@ -62,7 +62,8 @@ var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
+var _excluded = ["state"],
+    _excluded2 = ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
 
 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); }
 
@@ -79,8 +80,27 @@ var TabsContext = /*#__PURE__*/_react["default"].createContext({});
 
 
 exports.TabsContext = TabsContext;
+var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var state = _ref.state,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var tabPanelRef = (0, _react.useRef)();
+  var children = props.children,
+      tabPanelProps = props.tabPanelProps;
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return tabPanelRef.current;
+  });
+
+  var _useTabPanel = (0, _tabs.useTabPanel)(props, state, tabPanelRef),
+      raTabPanelProps = _useTabPanel.tabPanelProps;
+
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, tabPanelProps, raTabPanelProps, {
+    ref: tabPanelRef
+  }), children);
+});
 var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context4, _context5;
+  var _context4, _context5, _state$selectedItem, _state$selectedItem2, _state$selectedItem3;
 
   var children = props.children,
       isDisabled = props.isDisabled,
@@ -90,7 +110,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       mode = props.mode,
       tabListProps = props.tabListProps,
       tabPanelProps = props.tabPanelProps,
-      others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+      others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   var tabListRef = (0, _react.useRef)();
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
@@ -98,12 +118,6 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return tabListRef.current;
   });
-  var tabPanelRef = (0, _react.useRef)();
-  /* istanbul ignore next */
-
-  (0, _react.useImperativeHandle)(ref, function () {
-    return tabPanelRef.current;
-  });
   var allItems = [];
 
   if (mode === 'list') {
@@ -133,10 +147,6 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useTabList = (0, _tabs.useTabList)(props, state, tabListRef),
       raTabListProps = _useTabList.tabListProps;
 
-  var _useTabPanel = (0, _tabs.useTabPanel)(props, state, tabPanelRef),
-      raTabPanelProps = _useTabPanel.tabPanelProps;
-
-  var panelContent = state.selectedItem ? state.selectedItem.props.content || state.selectedItem.props.children : null;
   return (0, _react2.jsx)(TabsContext.Provider, {
     value: state
   }, (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
@@ -160,10 +170,11 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       mode: mode,
       slots: item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.slots
     });
-  })), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    variant: "tabPanel",
-    ref: tabPanelRef
-  }, tabPanelProps, raTabPanelProps), panelContent)));
+  })), (0, _react2.jsx)(TabPanel, {
+    key: (_state$selectedItem = state.selectedItem) === null || _state$selectedItem === void 0 ? void 0 : _state$selectedItem.key,
+    state: state,
+    tabPanelProps: tabPanelProps
+  }, ((_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.props.children) || ((_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.props.content))));
 });
 Tabs.propTypes = {
   /** The default tab key to be selected. (uncontrolled) */
@@ -208,6 +219,10 @@ Tabs.defaultProps = {
   mode: 'default',
   keyboardActivation: 'manual'
 };
+TabPanel.propTypes = {
+  state: _propTypes["default"].shape({}),
+  tabPanelProps: _propTypes["default"].shape({})
+};
 Tabs.displayName = 'Tabs';
 var _default = Tabs;
 exports["default"] = _default;

package/lib/components/Tab/Tab.js

@@ -5,14 +5,14 @@ import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'reac
 import PropTypes from 'prop-types';
 import { useTab } from '@react-aria/tabs';
 import { useFocusRing } from '@react-aria/focus';
-import { useHover } from '@react-aria/interactions';
+import { Pressable, useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { Item as Tab } from '@react-stately/collections';
 import { TabsContext } from '../Tabs';
 import { useStatusClasses, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import TabPicker from '../TabPicker';
-import { Box, Text, TooltipTrigger, Tooltip, Button } from '../..';
+import { Box, Text, TooltipTrigger, Tooltip } from '../..';
 /**
  * Tab control for dividing up closely-related content.
  * Typically used as a child of the Tabs component.
@@ -101,9 +101,9 @@ export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   if (mode === 'tooltip') {
     return ___EmotionJSX(React.Fragment, null, separator, ___EmotionJSX(TooltipTrigger, _extends({}, tooltipTriggerProps, {
       isOpen: isHovered || isFocusVisible
-    }), ___EmotionJSX(Button, {
+    }), ___EmotionJSX(Pressable, null, ___EmotionJSX("span", {
       variant: "quiet"
-    }, tab), ___EmotionJSX(Tooltip, null, itemProps.textValue || itemProps.title)));
+    }, tab)), ___EmotionJSX(Tooltip, null, itemProps.textValue || itemProps.title)));
   }
 
   return tab;

package/lib/components/TabPicker/TabPicker.js

@@ -1,4 +1,5 @@
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
@@ -13,8 +14,9 @@ import PropTypes from 'prop-types';
 import { Item as Tab } from '@react-stately/collections';
 import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
 import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
+import { Pressable } from '@react-aria/interactions';
 import { useStatusClasses } from '../../hooks';
-import { Box, Text, Button, PopoverMenu, Icon, Menu } from '../..';
+import { Box, Text, PopoverMenu, Icon, Menu } from '../..';
 import { TabLine } from '../Tab';
 /* istanbul ignore next */
 
@@ -165,10 +167,13 @@ var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     onOpenChange: setIsOpen,
     isOpen: isOpen,
     isContainFocus: true
-  }, ___EmotionJSX(Button, {
+  }, ___EmotionJSX(Pressable, null, ___EmotionJSX(Box, {
+    isRow: true,
+    alignItems: "center",
     className: classNames,
     variant: "menuTab",
-    onKeyDown: handleKeyNavigation
+    onKeyDown: handleKeyNavigation,
+    role: "tablist"
   }, ___EmotionJSX(Box, _extends({
     className: classNames,
     variant: "tab",
@@ -176,8 +181,9 @@ var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, tabProps), ___EmotionJSX(Text, {
     variant: "tabLabel"
   }, item.props.name), selectedItem && ___EmotionJSX(TabLine, null)), ___EmotionJSX(Icon, {
+    color: isTabFocused || _includesInstanceProperty(classNames).call(classNames, 'is-hovered') ? 'active' : 'neutral.40',
     icon: isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
-  })), ___EmotionJSX(Menu, {
+  }))), ___EmotionJSX(Menu, {
     onAction: setSelectedItem,
     selectionMode: "single",
     selectedKeys: [selectionManager.focusedKey],

package/lib/components/Tabs/Tabs.js

@@ -4,15 +4,16 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
 import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
+var _excluded = ["state"],
+    _excluded2 = ["children", "isDisabled", "items", "onSelectionChange", "orientation", "mode", "tabListProps", "tabPanelProps"];
 
 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; }
 
@@ -32,8 +33,28 @@ export var TabsContext = /*#__PURE__*/React.createContext({});
  * Tabs are used to divide content, navigate to other views, and indicate work progress.
  */
 
+var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var state = _ref.state,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var tabPanelRef = useRef();
+  var children = props.children,
+      tabPanelProps = props.tabPanelProps;
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return tabPanelRef.current;
+  });
+
+  var _useTabPanel = useTabPanel(props, state, tabPanelRef),
+      raTabPanelProps = _useTabPanel.tabPanelProps;
+
+  return ___EmotionJSX(Box, _extends({}, tabPanelProps, raTabPanelProps, {
+    ref: tabPanelRef
+  }), children);
+});
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context4, _context5;
+  var _context4, _context5, _state$selectedItem, _state$selectedItem2, _state$selectedItem3;
 
   var children = props.children,
       isDisabled = props.isDisabled,
@@ -43,7 +64,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       mode = props.mode,
       tabListProps = props.tabListProps,
       tabPanelProps = props.tabPanelProps,
-      others = _objectWithoutProperties(props, _excluded);
+      others = _objectWithoutProperties(props, _excluded2);
 
   var tabListRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -52,12 +73,6 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return tabListRef.current;
   });
-  var tabPanelRef = useRef();
-  /* istanbul ignore next */
-
-  useImperativeHandle(ref, function () {
-    return tabPanelRef.current;
-  });
   var allItems = [];
 
   if (mode === 'list') {
@@ -88,10 +103,6 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useTabList = useTabList(props, state, tabListRef),
       raTabListProps = _useTabList.tabListProps;
 
-  var _useTabPanel = useTabPanel(props, state, tabPanelRef),
-      raTabPanelProps = _useTabPanel.tabPanelProps;
-
-  var panelContent = state.selectedItem ? state.selectedItem.props.content || state.selectedItem.props.children : null;
   return ___EmotionJSX(TabsContext.Provider, {
     value: state
   }, ___EmotionJSX(Box, others, ___EmotionJSX(Box, _extends({
@@ -115,10 +126,11 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
       mode: mode,
       slots: item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.slots
     });
-  })), ___EmotionJSX(Box, _extends({
-    variant: "tabPanel",
-    ref: tabPanelRef
-  }, tabPanelProps, raTabPanelProps), panelContent)));
+  })), ___EmotionJSX(TabPanel, {
+    key: (_state$selectedItem = state.selectedItem) === null || _state$selectedItem === void 0 ? void 0 : _state$selectedItem.key,
+    state: state,
+    tabPanelProps: tabPanelProps
+  }, ((_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.props.children) || ((_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.props.content))));
 });
 Tabs.propTypes = {
   /** The default tab key to be selected. (uncontrolled) */
@@ -163,5 +175,9 @@ Tabs.defaultProps = {
   mode: 'default',
   keyboardActivation: 'manual'
 };
+TabPanel.propTypes = {
+  state: PropTypes.shape({}),
+  tabPanelProps: PropTypes.shape({})
+};
 Tabs.displayName = 'Tabs';
 export default Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.24.0-alpha.4",
+  "version": "1.24.0-alpha.5",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",