@pingux/astro 1.2.1 → 1.3.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 (78) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js +8 -2
  3. package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +5 -2
  4. package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +8 -3
  5. package/lib/cjs/components/ArrayField/ArrayField.js +213 -0
  6. package/lib/cjs/components/ArrayField/ArrayField.stories.js +223 -0
  7. package/lib/cjs/components/ArrayField/ArrayField.test.js +208 -0
  8. package/lib/cjs/components/ArrayField/ArrayFieldDeleteButton.js +61 -0
  9. package/lib/cjs/components/ArrayField/index.js +27 -0
  10. package/lib/cjs/components/CodeView/CodeView.js +3 -3
  11. package/lib/cjs/components/ListView/ListView.stories.js +3 -0
  12. package/lib/cjs/components/Loader/Loader.stories.js +3 -3
  13. package/lib/cjs/components/Modal/Modal.js +3 -0
  14. package/lib/cjs/components/Modal/Modal.stories.js +11 -66
  15. package/lib/cjs/components/NavBar/NavBar.js +30 -4
  16. package/lib/cjs/components/NavBar/NavBar.stories.js +70 -463
  17. package/lib/cjs/components/NavBar/NavBar.test.js +51 -1
  18. package/lib/cjs/components/NavBarSection/NavBarItem.js +137 -0
  19. package/lib/cjs/components/NavBarSection/NavBarItemButton.js +96 -0
  20. package/lib/cjs/components/NavBarSection/NavBarItemHeader.js +1 -1
  21. package/lib/cjs/components/NavBarSection/NavBarItemLink.js +98 -0
  22. package/lib/cjs/components/NavBarSection/NavBarSection.js +10 -8
  23. package/lib/cjs/components/NavBarSection/index.js +28 -1
  24. package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +8 -1
  25. package/lib/cjs/context/NavBarContext/index.js +20 -0
  26. package/lib/cjs/hooks/index.js +9 -0
  27. package/lib/cjs/hooks/useNavBarPress/index.js +18 -0
  28. package/lib/cjs/hooks/useNavBarPress/useNavBarPress.js +38 -0
  29. package/lib/cjs/hooks/useNavBarPress/useNavBarPress.test.js +42 -0
  30. package/lib/cjs/index.js +80 -58
  31. package/lib/cjs/styles/variants/accordion.js +39 -7
  32. package/lib/cjs/styles/variants/boxes.js +1 -24
  33. package/lib/cjs/styles/variants/buttons.js +7 -1
  34. package/lib/cjs/styles/variants/codeView.js +91 -0
  35. package/lib/cjs/styles/variants/navBar.js +68 -0
  36. package/lib/cjs/styles/variants/separator.js +2 -1
  37. package/lib/cjs/styles/variants/text.js +3 -1
  38. package/lib/cjs/styles/variants/variants.js +3 -0
  39. package/lib/components/AccordionGridGroup/AccordionGridGroup.js +7 -2
  40. package/lib/components/AccordionGridItem/AccordionGridItemBody.js +4 -2
  41. package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +9 -4
  42. package/lib/components/ArrayField/ArrayField.js +179 -0
  43. package/lib/components/ArrayField/ArrayField.stories.js +196 -0
  44. package/lib/components/ArrayField/ArrayField.test.js +185 -0
  45. package/lib/components/ArrayField/ArrayFieldDeleteButton.js +43 -0
  46. package/lib/components/ArrayField/index.js +2 -0
  47. package/lib/components/CodeView/CodeView.js +2 -2
  48. package/lib/components/ListView/ListView.stories.js +3 -0
  49. package/lib/components/Loader/Loader.stories.js +1 -1
  50. package/lib/components/Modal/Modal.js +4 -1
  51. package/lib/components/Modal/Modal.stories.js +10 -59
  52. package/lib/components/NavBar/NavBar.js +25 -4
  53. package/lib/components/NavBar/NavBar.stories.js +71 -462
  54. package/lib/components/NavBar/NavBar.test.js +39 -2
  55. package/lib/components/NavBarSection/NavBarItem.js +111 -0
  56. package/lib/components/NavBarSection/NavBarItemButton.js +69 -0
  57. package/lib/components/NavBarSection/NavBarItemHeader.js +1 -1
  58. package/lib/components/NavBarSection/NavBarItemLink.js +71 -0
  59. package/lib/components/NavBarSection/NavBarSection.js +9 -8
  60. package/lib/components/NavBarSection/index.js +4 -1
  61. package/lib/components/SelectFieldBase/SelectFieldBase.js +8 -1
  62. package/lib/context/NavBarContext/index.js +5 -0
  63. package/lib/hooks/index.js +1 -0
  64. package/lib/hooks/useNavBarPress/index.js +1 -0
  65. package/lib/hooks/useNavBarPress/useNavBarPress.js +27 -0
  66. package/lib/hooks/useNavBarPress/useNavBarPress.test.js +36 -0
  67. package/lib/index.js +2 -0
  68. package/lib/styles/variants/accordion.js +26 -5
  69. package/lib/styles/variants/boxes.js +1 -24
  70. package/lib/styles/variants/buttons.js +7 -1
  71. package/lib/styles/variants/codeView.js +91 -0
  72. package/lib/styles/variants/navBar.js +46 -0
  73. package/lib/styles/variants/separator.js +2 -1
  74. package/lib/styles/variants/text.js +3 -1
  75. package/lib/styles/variants/variants.js +2 -0
  76. package/package.json +3 -1
  77. package/lib/cjs/recipes/ArrayField.stories.js +0 -169
  78. package/lib/recipes/ArrayField.stories.js +0 -134
@@ -4,6 +4,8 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
4
4
 
5
5
  var _react = _interopRequireDefault(require("react"));
6
6
 
7
+ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
8
+
7
9
  var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
8
10
 
9
11
  var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
@@ -34,7 +36,16 @@ var data = [{
34
36
  icon: _GlobeIcon["default"],
35
37
  key: 'Overview',
36
38
  heading: 'Overview',
37
- children: ['Users', 'Group', 'Populations', 'Attributes', 'A roles title that is really really really really long']
39
+ children: [(0, _react2.jsx)(_index.NavBarItemButton, {
40
+ key: "Credentials Button Users",
41
+ id: "Credentials Button Users",
42
+ "data-testid": "navItemButton"
43
+ }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
44
+ key: "Experiences Link Roles",
45
+ id: "Experiences Link Roles",
46
+ href: "https://pingidentity.com/",
47
+ "data-testid": "navItemLink"
48
+ }, "Roles")]
38
49
  }, {
39
50
  icon: _ViewDashboardIcon["default"],
40
51
  key: 'Dashboard',
@@ -89,6 +100,12 @@ var getComponent = function getComponent() {
89
100
  }), (0, _react2.jsx)(_index.NavBarSection, {
90
101
  items: secondData,
91
102
  title: "test_title"
103
+ }), (0, _react2.jsx)(_index.NavBarItem, {
104
+ id: "Overview",
105
+ key: "Overview",
106
+ text: "Overview",
107
+ icon: _ViewDashboardIcon["default"],
108
+ "data-testid": "navItem"
92
109
  }))));
93
110
  };
94
111
 
@@ -113,4 +130,37 @@ test('should render title for itemBodies that have subTitles', function () {
113
130
  var subTitle = _testWrapper.screen.getByText('PingOne Services');
114
131
 
115
132
  expect(subTitle).toBeInTheDocument();
133
+ });
134
+ test('should select NavIemLink', function () {
135
+ getComponent();
136
+
137
+ var link = _testWrapper.screen.getByTestId('navItemLink');
138
+
139
+ expect(link).toBeInTheDocument();
140
+
141
+ _userEvent["default"].click(link);
142
+
143
+ expect(link).toHaveClass('is-selected');
144
+ });
145
+ test('should select NavIem', function () {
146
+ getComponent();
147
+
148
+ var item = _testWrapper.screen.getByTestId('navItem');
149
+
150
+ expect(item).toBeInTheDocument();
151
+
152
+ _userEvent["default"].click(item);
153
+
154
+ expect(item).toHaveClass('is-selected');
155
+ });
156
+ test('should select NavIemButton', function () {
157
+ getComponent();
158
+
159
+ var button = _testWrapper.screen.getByTestId('navItemButton');
160
+
161
+ expect(button).toBeInTheDocument();
162
+
163
+ _userEvent["default"].click(button);
164
+
165
+ expect(button).toHaveClass('is-selected');
116
166
  });
@@ -0,0 +1,137 @@
1
+ "use strict";
2
+
3
+ var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
4
+
5
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
6
+
7
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
8
+
9
+ _Object$defineProperty(exports, "__esModule", {
10
+ value: true
11
+ });
12
+
13
+ exports["default"] = void 0;
14
+
15
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
16
+
17
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
18
+
19
+ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
20
+
21
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
22
+
23
+ var _react = _interopRequireWildcard(require("react"));
24
+
25
+ var _propTypes = _interopRequireDefault(require("prop-types"));
26
+
27
+ var _interactions = require("@react-aria/interactions");
28
+
29
+ var _utils = require("@react-aria/utils");
30
+
31
+ var _focus = require("@react-aria/focus");
32
+
33
+ var _index = require("../../index");
34
+
35
+ var _hooks = require("../../hooks");
36
+
37
+ var _NavBarContext = require("../../context/NavBarContext");
38
+
39
+ var _react2 = require("@emotion/react");
40
+
41
+ var NavBarItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
42
+ var _context, _context2;
43
+
44
+ var icon = props.icon,
45
+ text = props.text,
46
+ className = props.className,
47
+ key = props.id,
48
+ onPressCallback = props.onPress,
49
+ others = (0, _objectWithoutProperties2["default"])(props, ["icon", "text", "className", "id", "onPress"]);
50
+ var navItemRef = (0, _react.useRef)();
51
+ /* istanbul ignore next */
52
+
53
+ (0, _react.useImperativeHandle)(ref, function () {
54
+ return navItemRef.current;
55
+ });
56
+
57
+ var _useHover = (0, _interactions.useHover)({}),
58
+ hoverProps = _useHover.hoverProps,
59
+ isHovered = _useHover.isHovered;
60
+
61
+ var _useFocusRing = (0, _focus.useFocusRing)({
62
+ within: true
63
+ }),
64
+ focusWithinProps = _useFocusRing.focusProps;
65
+
66
+ var _useFocusRing2 = (0, _focus.useFocusRing)(),
67
+ focusProps = _useFocusRing2.focusProps,
68
+ isFocusVisible = _useFocusRing2.isFocusVisible;
69
+
70
+ var state = (0, _NavBarContext.useNavBarContext)();
71
+ var isSelected = (0, _includes["default"])(_context = state.selectedKeys).call(_context, key);
72
+
73
+ var _useNavBarPress = (0, _hooks.useNavBarPress)({
74
+ key: key,
75
+ onPressCallback: onPressCallback
76
+ }, state),
77
+ onNavPress = _useNavBarPress.onNavPress;
78
+
79
+ var _usePress = (0, _interactions.usePress)({
80
+ ref: navItemRef,
81
+ onPress: onNavPress
82
+ }),
83
+ pressProps = _usePress.pressProps,
84
+ isPressed = _usePress.isPressed;
85
+
86
+ var mergedProps = _utils.mergeProps.apply(void 0, (0, _concat["default"])(_context2 = [pressProps, hoverProps, focusWithinProps, focusProps]).call(_context2, others));
87
+
88
+ var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
89
+ isPressed: isPressed,
90
+ isHovered: isHovered,
91
+ isSelected: isSelected,
92
+ isFocused: isFocusVisible
93
+ }),
94
+ classNames = _useStatusClasses.classNames;
95
+
96
+ return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
97
+ id: key,
98
+ variant: "accordion.accordionGridNavItem",
99
+ isRow: true,
100
+ className: classNames,
101
+ ref: navItemRef
102
+ }, mergedProps, {
103
+ sx: {
104
+ maxHeight: '30px'
105
+ }
106
+ }), (0, _react2.jsx)(_index.Box, {
107
+ isRow: true,
108
+ sx: {
109
+ alignItems: 'center'
110
+ }
111
+ }, icon && (0, _react2.jsx)(_index.Icon, {
112
+ icon: icon,
113
+ size: 20,
114
+ sx: {
115
+ mr: '10px',
116
+ color: 'white',
117
+ fill: 'white'
118
+ }
119
+ }), (0, _react2.jsx)(_index.Text, {
120
+ variant: "navBarHeaderText"
121
+ }, text)));
122
+ });
123
+ NavBarItem.propTypes = {
124
+ /** Handler that is called when the press is released over the target. */
125
+ onPress: _propTypes["default"].func,
126
+
127
+ /** The icon to render in between each node. */
128
+ icon: _propTypes["default"].elementType,
129
+
130
+ /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
131
+ id: _propTypes["default"].string,
132
+
133
+ /** Text that will render within the component */
134
+ text: _propTypes["default"].string
135
+ };
136
+ var _default = NavBarItem;
137
+ exports["default"] = _default;
@@ -0,0 +1,96 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+
7
+ _Object$defineProperty2(exports, "__esModule", {
8
+ value: true
9
+ });
10
+
11
+ exports["default"] = void 0;
12
+
13
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
14
+
15
+ var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
16
+
17
+ var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
18
+
19
+ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
20
+
21
+ var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
22
+
23
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
24
+
25
+ var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
26
+
27
+ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
28
+
29
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
30
+
31
+ var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
32
+
33
+ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
34
+
35
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
36
+
37
+ var _react = _interopRequireDefault(require("react"));
38
+
39
+ var _propTypes = _interopRequireDefault(require("prop-types"));
40
+
41
+ var _NavBarContext = require("../../context/NavBarContext");
42
+
43
+ var _hooks = require("../../hooks");
44
+
45
+ var _index = require("../../index");
46
+
47
+ var _react2 = require("@emotion/react");
48
+
49
+ function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
50
+
51
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
52
+
53
+ var NavBarItemButton = function NavBarItemButton(props) {
54
+ var _context;
55
+
56
+ var className = props.className,
57
+ key = props.id,
58
+ onPressCallback = props.onPress,
59
+ sx = props.sx,
60
+ others = (0, _objectWithoutProperties2["default"])(props, ["className", "id", "onPress", "sx"]);
61
+ var state = (0, _NavBarContext.useNavBarContext)();
62
+ var isSelected = (0, _includes["default"])(_context = state.selectedKeys).call(_context, key);
63
+
64
+ var _useNavBarPress = (0, _hooks.useNavBarPress)({
65
+ key: key,
66
+ onPressCallback: onPressCallback
67
+ }, state),
68
+ onNavPress = _useNavBarPress.onNavPress;
69
+
70
+ var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
71
+ isSelected: isSelected
72
+ }),
73
+ classNames = _useStatusClasses.classNames;
74
+
75
+ return (0, _react2.jsx)(_index.Button, (0, _extends2["default"])({
76
+ id: key,
77
+ variant: "navItemButton",
78
+ onPress: onNavPress,
79
+ className: classNames
80
+ }, others, {
81
+ sx: _objectSpread({
82
+ paddingLeft: '45px',
83
+ paddingRight: '45px'
84
+ }, sx)
85
+ }));
86
+ };
87
+
88
+ NavBarItemButton.propTypes = {
89
+ /** Handler that is called when the press is released over the target. */
90
+ onPress: _propTypes["default"].func,
91
+
92
+ /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
93
+ id: _propTypes["default"].string.isRequired
94
+ };
95
+ var _default = NavBarItemButton;
96
+ exports["default"] = _default;
@@ -22,7 +22,7 @@ var NavBarItemHeader = function NavBarItemHeader(props) {
22
22
  var item = props.item;
23
23
  var icon = item.icon;
24
24
  return (0, _react2.jsx)(_index.Box, {
25
- variant: "boxes.navBarItemHeaderContainer",
25
+ variant: "navBar.itemHeaderContainer",
26
26
  isRow: true
27
27
  }, icon && (0, _react2.jsx)(_index.Icon, {
28
28
  icon: icon,
@@ -0,0 +1,98 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+
7
+ _Object$defineProperty2(exports, "__esModule", {
8
+ value: true
9
+ });
10
+
11
+ exports["default"] = void 0;
12
+
13
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
14
+
15
+ var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
16
+
17
+ var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
18
+
19
+ var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
20
+
21
+ var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
22
+
23
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
24
+
25
+ var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
26
+
27
+ var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
28
+
29
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
30
+
31
+ var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
32
+
33
+ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
34
+
35
+ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
36
+
37
+ var _react = _interopRequireDefault(require("react"));
38
+
39
+ var _propTypes = _interopRequireDefault(require("prop-types"));
40
+
41
+ var _index = require("../../index");
42
+
43
+ var _NavBarContext = require("../../context/NavBarContext");
44
+
45
+ var _hooks = require("../../hooks");
46
+
47
+ var _react2 = require("@emotion/react");
48
+
49
+ function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
50
+
51
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source), true)).call(_context2, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context3; (0, _forEach["default"])(_context3 = ownKeys(Object(source))).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
52
+
53
+ var NavBarItemLink = function NavBarItemLink(props) {
54
+ var _context;
55
+
56
+ var className = props.className,
57
+ key = props.id,
58
+ onPressCallback = props.onPress,
59
+ others = (0, _objectWithoutProperties2["default"])(props, ["className", "id", "onPress"]);
60
+ var state = (0, _NavBarContext.useNavBarContext)();
61
+ var isSelected = (0, _includes["default"])(_context = state.selectedKeys).call(_context, key);
62
+
63
+ var _useNavBarPress = (0, _hooks.useNavBarPress)({
64
+ key: key,
65
+ onPressCallback: onPressCallback
66
+ }, state),
67
+ onNavPress = _useNavBarPress.onNavPress;
68
+
69
+ var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
70
+ isSelected: isSelected
71
+ }),
72
+ classNames = _useStatusClasses.classNames;
73
+
74
+ return (0, _react2.jsx)(_index.Link, (0, _extends2["default"])({
75
+ id: key,
76
+ variant: "buttons.navItemButton",
77
+ className: classNames,
78
+ onPress: onNavPress
79
+ }, others, {
80
+ sx: _objectSpread({
81
+ paddingLeft: '45px',
82
+ paddingRight: '45px'
83
+ }, props.sx)
84
+ }));
85
+ };
86
+
87
+ NavBarItemLink.propTypes = {
88
+ /** Specifies the location of the URL */
89
+ href: _propTypes["default"].string,
90
+
91
+ /** Handler that is called when the press is released over the target. */
92
+ onPress: _propTypes["default"].func,
93
+
94
+ /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
95
+ id: _propTypes["default"].string.isRequired
96
+ };
97
+ var _default = NavBarItemLink;
98
+ exports["default"] = _default;
@@ -10,6 +10,8 @@ _Object$defineProperty(exports, "__esModule", {
10
10
 
11
11
  exports["default"] = void 0;
12
12
 
13
+ var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
14
+
13
15
  var _react = _interopRequireDefault(require("react"));
14
16
 
15
17
  var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -32,19 +34,19 @@ var NavBarSection = function NavBarSection(props) {
32
34
  title = props.title,
33
35
  items = props.items;
34
36
  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_index.Text, {
35
- variant: "text.navBarSubtitle",
36
- sx: {
37
- mt: '25px',
38
- mb: '15px',
39
- ml: '15px'
40
- }
37
+ variant: "text.navBarSubtitle"
41
38
  }, title), (0, _react2.jsx)(_index.AccordionGridGroup, {
42
- items: items
39
+ items: (0, _filter["default"])(items).call(items, function (i) {
40
+ return i.children;
41
+ })
43
42
  }, function (item) {
44
43
  return (0, _react2.jsx)(_index.Item, {
45
44
  headerProps: {
46
45
  variant: 'accordion.accordionGridHeaderNav'
47
46
  },
47
+ bodyProps: {
48
+ variant: 'navBar.sectionBody'
49
+ },
48
50
  textValue: item
49
51
  }, (0, _react2.jsx)(_NavBarItemHeader["default"], {
50
52
  item: item
@@ -55,7 +57,7 @@ var NavBarSection = function NavBarSection(props) {
55
57
  sx: {
56
58
  pl: '15px',
57
59
  pr: '15px',
58
- mt: '25px'
60
+ my: '10px'
59
61
  }
60
62
  }, (0, _react2.jsx)(_index.Separator, {
61
63
  variant: "separator.navBarSeparator"
@@ -15,4 +15,31 @@ _Object$defineProperty(exports, "default", {
15
15
  }
16
16
  });
17
17
 
18
- var _NavBarSection = _interopRequireDefault(require("./NavBarSection"));
18
+ _Object$defineProperty(exports, "NavBarItemButton", {
19
+ enumerable: true,
20
+ get: function get() {
21
+ return _NavBarItemButton["default"];
22
+ }
23
+ });
24
+
25
+ _Object$defineProperty(exports, "NavBarItemLink", {
26
+ enumerable: true,
27
+ get: function get() {
28
+ return _NavBarItemLink["default"];
29
+ }
30
+ });
31
+
32
+ _Object$defineProperty(exports, "NavBarItem", {
33
+ enumerable: true,
34
+ get: function get() {
35
+ return _NavBarItem["default"];
36
+ }
37
+ });
38
+
39
+ var _NavBarSection = _interopRequireDefault(require("./NavBarSection"));
40
+
41
+ var _NavBarItemButton = _interopRequireDefault(require("./NavBarItemButton"));
42
+
43
+ var _NavBarItemLink = _interopRequireDefault(require("./NavBarItemLink"));
44
+
45
+ var _NavBarItem = _interopRequireDefault(require("./NavBarItem"));
@@ -80,6 +80,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
80
80
  name = props.name,
81
81
  placeholder = props.placeholder,
82
82
  status = props.status,
83
+ slots = props.slots,
83
84
  columnStyleProps = props.columnStyleProps,
84
85
  fieldContainerProps = props.fieldContainerProps,
85
86
  fieldControlProps = props.fieldControlProps,
@@ -114,7 +115,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
114
115
  sx: state.isOpen ? {
115
116
  transform: 'rotate(180deg)'
116
117
  } : null
117
- }))));
118
+ }))), slots === null || slots === void 0 ? void 0 : slots.inContainer);
118
119
  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
119
120
  ref: ref,
120
121
  variant: "forms.input.wrapper"
@@ -181,6 +182,12 @@ SelectFieldBase.propTypes = {
181
182
  })
182
183
  }),
183
184
 
185
+ /** Provides a way to insert markup in specified places. */
186
+ slots: _propTypes["default"].shape({
187
+ /** The given node will be inserted into the field container. */
188
+ inContainer: _propTypes["default"].node
189
+ }),
190
+
184
191
  /** Control for interaction with SelectField */
185
192
  trigger: _propTypes["default"].node,
186
193
 
@@ -0,0 +1,20 @@
1
+ "use strict";
2
+
3
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
+
5
+ _Object$defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+
9
+ exports.useNavBarContext = exports.NavBarContext = void 0;
10
+
11
+ var _react = require("react");
12
+
13
+ var NavBarContext = /*#__PURE__*/(0, _react.createContext)({});
14
+ exports.NavBarContext = NavBarContext;
15
+
16
+ var useNavBarContext = function useNavBarContext() {
17
+ return (0, _react.useContext)(NavBarContext);
18
+ };
19
+
20
+ exports.useNavBarContext = useNavBarContext;
@@ -64,6 +64,13 @@ _Object$defineProperty(exports, "usePropWarning", {
64
64
  }
65
65
  });
66
66
 
67
+ _Object$defineProperty(exports, "useNavBarPress", {
68
+ enumerable: true,
69
+ get: function get() {
70
+ return _useNavBarPress["default"];
71
+ }
72
+ });
73
+
67
74
  _Object$defineProperty(exports, "useRockerButton", {
68
75
  enumerable: true,
69
76
  get: function get() {
@@ -108,6 +115,8 @@ var _useOverlayPanelState = _interopRequireDefault(require("./useOverlayPanelSta
108
115
 
109
116
  var _usePropWarning = _interopRequireDefault(require("./usePropWarning"));
110
117
 
118
+ var _useNavBarPress = _interopRequireDefault(require("./useNavBarPress"));
119
+
111
120
  var _useRockerButton = _interopRequireDefault(require("./useRockerButton"));
112
121
 
113
122
  var _useSelectField = _interopRequireDefault(require("./useSelectField"));
@@ -0,0 +1,18 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+
7
+ _Object$defineProperty(exports, "__esModule", {
8
+ value: true
9
+ });
10
+
11
+ _Object$defineProperty(exports, "default", {
12
+ enumerable: true,
13
+ get: function get() {
14
+ return _useNavBarPress["default"];
15
+ }
16
+ });
17
+
18
+ var _useNavBarPress = _interopRequireDefault(require("./useNavBarPress"));
@@ -0,0 +1,38 @@
1
+ "use strict";
2
+
3
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
4
+
5
+ _Object$defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+
9
+ exports["default"] = void 0;
10
+
11
+ /**
12
+ * A custom hook that will call an onPressCallback function, if the function is provided.
13
+ * @param {Object} params The accepted parameters object
14
+ * @param {string} props.key The unique identifier that is assigned to the element being pressed
15
+ * @param {Object} state The state object tracking selected keys
16
+ * @param {function} state.setSelectedKeys The function that sets the selected keys
17
+ * @callback props.onPressCallback The callback that will be called only if provided
18
+ */
19
+ var useNavBarPress = function useNavBarPress(_ref, state) {
20
+ var key = _ref.key,
21
+ onPressCallback = _ref.onPressCallback;
22
+ var setSelectedKeys = state.setSelectedKeys;
23
+
24
+ var onNavPress = function onNavPress() {
25
+ setSelectedKeys(key);
26
+
27
+ if (onPressCallback) {
28
+ onPressCallback();
29
+ }
30
+ };
31
+
32
+ return {
33
+ onNavPress: onNavPress
34
+ };
35
+ };
36
+
37
+ var _default = useNavBarPress;
38
+ exports["default"] = _default;
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ var _reactHooks = require("@testing-library/react-hooks");
6
+
7
+ var _ = _interopRequireDefault(require("./"));
8
+
9
+ var key = 'testKey';
10
+ test('using the onPress prop works as a callback', function () {
11
+ var onPress = jest.fn();
12
+ var setSelectedKeys = jest.fn();
13
+
14
+ var _renderHook = (0, _reactHooks.renderHook)(function () {
15
+ return (0, _["default"])({
16
+ key: key,
17
+ onPressCallback: onPress
18
+ }, {
19
+ setSelectedKeys: setSelectedKeys
20
+ });
21
+ }),
22
+ result = _renderHook.result;
23
+
24
+ result.current.onNavPress();
25
+ expect(onPress).toHaveBeenCalled();
26
+ });
27
+ test('if no onPress prop there is no callback', function () {
28
+ var onPress = jest.fn();
29
+ var setSelectedKeys = jest.fn();
30
+
31
+ var _renderHook2 = (0, _reactHooks.renderHook)(function () {
32
+ return (0, _["default"])({
33
+ key: key
34
+ }, {
35
+ setSelectedKeys: setSelectedKeys
36
+ });
37
+ }),
38
+ result = _renderHook2.result;
39
+
40
+ result.current.onNavPress();
41
+ expect(onPress).not.toHaveBeenCalled();
42
+ });