@pingux/astro 2.69.0 → 2.70.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/cjs/components/Tabs/Tabs.js +10 -5
  2. package/lib/cjs/components/Tabs/Tabs.stories.js +4 -2
  3. package/lib/components/Tabs/Tabs.js +10 -5
  4. package/lib/components/Tabs/Tabs.stories.js +4 -2
  5. package/package.json +1 -1
package/lib/cjs/components/Tabs/Tabs.js CHANGED
@@ -40,6 +40,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
40
40
  var TabsContext = /*#__PURE__*/_react["default"].createContext({});
41
41
  exports.TabsContext = TabsContext;
42
42
  var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
43
+ var _state$selectedItem;
43
44
  var state = _ref.state,
44
45
  props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
45
46
  var children = props.children,
@@ -47,13 +48,18 @@ var TabPanel = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
47
48
  var tabPanelRef = (0, _hooks.useLocalOrForwardRef)(ref);
48
49
  var _ref2 = (0, _reactAria.useTabPanel)(props, state, tabPanelRef),
49
50
  raTabPanelProps = _ref2.tabPanelProps;
51
+ if (state !== null && state !== void 0 && (_state$selectedItem = state.selectedItem) !== null && _state$selectedItem !== void 0 && (_state$selectedItem = _state$selectedItem.props) !== null && _state$selectedItem !== void 0 && _state$selectedItem.isListItem) {
52
+ var _tabPanelRef$current, _state$selectedItem2;
53
+ var parentTab = (_tabPanelRef$current = tabPanelRef.current) === null || _tabPanelRef$current === void 0 || (_tabPanelRef$current = _tabPanelRef$current.previousElementSibling) === null || _tabPanelRef$current === void 0 ? void 0 : _tabPanelRef$current.querySelector("[name=\"".concat(state === null || state === void 0 || (_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 || (_state$selectedItem2 = _state$selectedItem2.props) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.parentName, "\"]"));
54
+ raTabPanelProps['aria-labelledby'] = parentTab === null || parentTab === void 0 ? void 0 : parentTab.id;
55
+ }
50
56
  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, tabPanelProps, raTabPanelProps, {
51
57
  ref: tabPanelRef,
52
58
  role: "tabpanel"
53
59
  }), children);
54
60
  });
55
61
  var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
56
- var _context4, _context5, _state$selectedItem, _state$selectedItem2, _state$selectedItem3;
62
+ var _context4, _context5, _state$selectedItem3, _state$selectedItem4, _state$selectedItem5;
57
63
  var isDisabled = props.isDisabled,
58
64
  items = props.items,
59
65
  onSelectionChange = props.onSelectionChange,
@@ -85,8 +91,7 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
85
91
  items: mode === 'list' ? allItems : items
86
92
  }));
87
93
  var _useTabList = (0, _reactAria.useTabList)(props, state, tabListRef),
88
- raTabListProps = _useTabList.tabListProps; //= useTabList(props, state, tabListRef);
89
-
94
+ raTabListProps = _useTabList.tabListProps;
90
95
  return (0, _react2.jsx)(TabsContext.Provider, {
91
96
  value: state
92
97
  }, (0, _react2.jsx)(_Box["default"], others, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
@@ -110,10 +115,10 @@ var Tabs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
110
115
  slots: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.slots
111
116
  });
112
117
  })), (0, _react2.jsx)(TabPanel, {
113
- key: (_state$selectedItem = state.selectedItem) === null || _state$selectedItem === void 0 ? void 0 : _state$selectedItem.key,
118
+ key: (_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.key,
114
119
  state: state,
115
120
  tabPanelProps: tabPanelProps
116
- }, ((_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))));
121
+ }, ((_state$selectedItem4 = state.selectedItem) === null || _state$selectedItem4 === void 0 ? void 0 : _state$selectedItem4.props.children) || ((_state$selectedItem5 = state.selectedItem) === null || _state$selectedItem5 === void 0 ? void 0 : _state$selectedItem5.props.content))));
117
122
  });
118
123
  Tabs.defaultProps = {
119
124
  isDisabled: false,
package/lib/cjs/components/Tabs/Tabs.stories.js CHANGED
@@ -235,12 +235,14 @@ var WithList = function WithList() {
235
235
  key: 'tab1list',
236
236
  name: 'Tab 1 list',
237
237
  children: 'Tab 1 from list',
238
- role: 'menuitemradio'
238
+ role: 'menuitemradio',
239
+ parentName: 'Tab 4'
239
240
  }, {
240
241
  key: 'tab2list',
241
242
  name: 'Tab 2 list',
242
243
  children: 'Tab 2 from list',
243
- role: 'menuitemradio'
244
+ role: 'menuitemradio',
245
+ parentName: 'Tab 4'
244
246
  }]
245
247
  }]);
246
248
  return (0, _react2.jsx)(_index.Tabs, {
package/lib/components/Tabs/Tabs.js CHANGED
@@ -26,6 +26,7 @@ import { CollectionTab } from '../Tab';
26
26
  import { jsx as ___EmotionJSX } from "@emotion/react";
27
27
  export var TabsContext = /*#__PURE__*/React.createContext({});
28
28
  var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
29
+ var _state$selectedItem;
29
30
  var state = _ref.state,
30
31
  props = _objectWithoutProperties(_ref, _excluded);
31
32
  var children = props.children,
@@ -33,13 +34,18 @@ var TabPanel = /*#__PURE__*/forwardRef(function (_ref, ref) {
33
34
  var tabPanelRef = useLocalOrForwardRef(ref);
34
35
  var _ref2 = useTabPanel(props, state, tabPanelRef),
35
36
  raTabPanelProps = _ref2.tabPanelProps;
37
+ if (state !== null && state !== void 0 && (_state$selectedItem = state.selectedItem) !== null && _state$selectedItem !== void 0 && (_state$selectedItem = _state$selectedItem.props) !== null && _state$selectedItem !== void 0 && _state$selectedItem.isListItem) {
38
+ var _tabPanelRef$current, _state$selectedItem2;
39
+ var parentTab = (_tabPanelRef$current = tabPanelRef.current) === null || _tabPanelRef$current === void 0 || (_tabPanelRef$current = _tabPanelRef$current.previousElementSibling) === null || _tabPanelRef$current === void 0 ? void 0 : _tabPanelRef$current.querySelector("[name=\"".concat(state === null || state === void 0 || (_state$selectedItem2 = state.selectedItem) === null || _state$selectedItem2 === void 0 || (_state$selectedItem2 = _state$selectedItem2.props) === null || _state$selectedItem2 === void 0 ? void 0 : _state$selectedItem2.parentName, "\"]"));
40
+ raTabPanelProps['aria-labelledby'] = parentTab === null || parentTab === void 0 ? void 0 : parentTab.id;
41
+ }
36
42
  return ___EmotionJSX(Box, _extends({}, tabPanelProps, raTabPanelProps, {
37
43
  ref: tabPanelRef,
38
44
  role: "tabpanel"
39
45
  }), children);
40
46
  });
41
47
  var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
42
- var _context4, _context5, _state$selectedItem, _state$selectedItem2, _state$selectedItem3;
48
+ var _context4, _context5, _state$selectedItem3, _state$selectedItem4, _state$selectedItem5;
43
49
  var isDisabled = props.isDisabled,
44
50
  items = props.items,
45
51
  onSelectionChange = props.onSelectionChange,
@@ -71,8 +77,7 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
71
77
  items: mode === 'list' ? allItems : items
72
78
  }));
73
79
  var _useTabList = useTabList(props, state, tabListRef),
74
- raTabListProps = _useTabList.tabListProps; //= useTabList(props, state, tabListRef);
75
-
80
+ raTabListProps = _useTabList.tabListProps;
76
81
  return ___EmotionJSX(TabsContext.Provider, {
77
82
  value: state
78
83
  }, ___EmotionJSX(Box, others, ___EmotionJSX(Box, _extends({
@@ -96,10 +101,10 @@ var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
96
101
  slots: item === null || item === void 0 || (_item$props2 = item.props) === null || _item$props2 === void 0 ? void 0 : _item$props2.slots
97
102
  });
98
103
  })), ___EmotionJSX(TabPanel, {
99
- key: (_state$selectedItem = state.selectedItem) === null || _state$selectedItem === void 0 ? void 0 : _state$selectedItem.key,
104
+ key: (_state$selectedItem3 = state.selectedItem) === null || _state$selectedItem3 === void 0 ? void 0 : _state$selectedItem3.key,
100
105
  state: state,
101
106
  tabPanelProps: tabPanelProps
102
- }, ((_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))));
107
+ }, ((_state$selectedItem4 = state.selectedItem) === null || _state$selectedItem4 === void 0 ? void 0 : _state$selectedItem4.props.children) || ((_state$selectedItem5 = state.selectedItem) === null || _state$selectedItem5 === void 0 ? void 0 : _state$selectedItem5.props.content))));
103
108
  });
104
109
  Tabs.defaultProps = {
105
110
  isDisabled: false,
package/lib/components/Tabs/Tabs.stories.js CHANGED
@@ -212,12 +212,14 @@ export var WithList = function WithList() {
212
212
  key: 'tab1list',
213
213
  name: 'Tab 1 list',
214
214
  children: 'Tab 1 from list',
215
- role: 'menuitemradio'
215
+ role: 'menuitemradio',
216
+ parentName: 'Tab 4'
216
217
  }, {
217
218
  key: 'tab2list',
218
219
  name: 'Tab 2 list',
219
220
  children: 'Tab 2 from list',
220
- role: 'menuitemradio'
221
+ role: 'menuitemradio',
222
+ parentName: 'Tab 4'
221
223
  }]
222
224
  }]);
223
225
  return ___EmotionJSX(Tabs, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.69.0",
3
+ "version": "2.70.0-alpha.0",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",