@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.
- package/CHANGELOG.md +21 -0
- package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js +8 -2
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js +5 -2
- package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js +8 -3
- package/lib/cjs/components/ArrayField/ArrayField.js +213 -0
- package/lib/cjs/components/ArrayField/ArrayField.stories.js +223 -0
- package/lib/cjs/components/ArrayField/ArrayField.test.js +208 -0
- package/lib/cjs/components/ArrayField/ArrayFieldDeleteButton.js +61 -0
- package/lib/cjs/components/ArrayField/index.js +27 -0
- package/lib/cjs/components/CodeView/CodeView.js +3 -3
- package/lib/cjs/components/ListView/ListView.stories.js +3 -0
- package/lib/cjs/components/Loader/Loader.stories.js +3 -3
- package/lib/cjs/components/Modal/Modal.js +3 -0
- package/lib/cjs/components/Modal/Modal.stories.js +11 -66
- package/lib/cjs/components/NavBar/NavBar.js +30 -4
- package/lib/cjs/components/NavBar/NavBar.stories.js +70 -463
- package/lib/cjs/components/NavBar/NavBar.test.js +51 -1
- package/lib/cjs/components/NavBarSection/NavBarItem.js +137 -0
- package/lib/cjs/components/NavBarSection/NavBarItemButton.js +96 -0
- package/lib/cjs/components/NavBarSection/NavBarItemHeader.js +1 -1
- package/lib/cjs/components/NavBarSection/NavBarItemLink.js +98 -0
- package/lib/cjs/components/NavBarSection/NavBarSection.js +10 -8
- package/lib/cjs/components/NavBarSection/index.js +28 -1
- package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +8 -1
- package/lib/cjs/context/NavBarContext/index.js +20 -0
- package/lib/cjs/hooks/index.js +9 -0
- package/lib/cjs/hooks/useNavBarPress/index.js +18 -0
- package/lib/cjs/hooks/useNavBarPress/useNavBarPress.js +38 -0
- package/lib/cjs/hooks/useNavBarPress/useNavBarPress.test.js +42 -0
- package/lib/cjs/index.js +80 -58
- package/lib/cjs/styles/variants/accordion.js +39 -7
- package/lib/cjs/styles/variants/boxes.js +1 -24
- package/lib/cjs/styles/variants/buttons.js +7 -1
- package/lib/cjs/styles/variants/codeView.js +91 -0
- package/lib/cjs/styles/variants/navBar.js +68 -0
- package/lib/cjs/styles/variants/separator.js +2 -1
- package/lib/cjs/styles/variants/text.js +3 -1
- package/lib/cjs/styles/variants/variants.js +3 -0
- package/lib/components/AccordionGridGroup/AccordionGridGroup.js +7 -2
- package/lib/components/AccordionGridItem/AccordionGridItemBody.js +4 -2
- package/lib/components/AccordionGridItem/AccordionGridItemHeader.js +9 -4
- package/lib/components/ArrayField/ArrayField.js +179 -0
- package/lib/components/ArrayField/ArrayField.stories.js +196 -0
- package/lib/components/ArrayField/ArrayField.test.js +185 -0
- package/lib/components/ArrayField/ArrayFieldDeleteButton.js +43 -0
- package/lib/components/ArrayField/index.js +2 -0
- package/lib/components/CodeView/CodeView.js +2 -2
- package/lib/components/ListView/ListView.stories.js +3 -0
- package/lib/components/Loader/Loader.stories.js +1 -1
- package/lib/components/Modal/Modal.js +4 -1
- package/lib/components/Modal/Modal.stories.js +10 -59
- package/lib/components/NavBar/NavBar.js +25 -4
- package/lib/components/NavBar/NavBar.stories.js +71 -462
- package/lib/components/NavBar/NavBar.test.js +39 -2
- package/lib/components/NavBarSection/NavBarItem.js +111 -0
- package/lib/components/NavBarSection/NavBarItemButton.js +69 -0
- package/lib/components/NavBarSection/NavBarItemHeader.js +1 -1
- package/lib/components/NavBarSection/NavBarItemLink.js +71 -0
- package/lib/components/NavBarSection/NavBarSection.js +9 -8
- package/lib/components/NavBarSection/index.js +4 -1
- package/lib/components/SelectFieldBase/SelectFieldBase.js +8 -1
- package/lib/context/NavBarContext/index.js +5 -0
- package/lib/hooks/index.js +1 -0
- package/lib/hooks/useNavBarPress/index.js +1 -0
- package/lib/hooks/useNavBarPress/useNavBarPress.js +27 -0
- package/lib/hooks/useNavBarPress/useNavBarPress.test.js +36 -0
- package/lib/index.js +2 -0
- package/lib/styles/variants/accordion.js +26 -5
- package/lib/styles/variants/boxes.js +1 -24
- package/lib/styles/variants/buttons.js +7 -1
- package/lib/styles/variants/codeView.js +91 -0
- package/lib/styles/variants/navBar.js +46 -0
- package/lib/styles/variants/separator.js +2 -1
- package/lib/styles/variants/text.js +3 -1
- package/lib/styles/variants/variants.js +2 -0
- package/package.json +3 -1
- package/lib/cjs/recipes/ArrayField.stories.js +0 -169
- 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: [
|
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: "
|
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
|
-
|
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
|
-
|
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;
|
package/lib/cjs/hooks/index.js
CHANGED
@@ -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
|
+
});
|