@pingux/astro 2.20.0-alpha.0 → 2.20.0-alpha.10
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/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.js +6 -9
- package/lib/{experimental → cjs/components}/ButtonBar/ButtonBar.mdx +1 -2
- package/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.stories.js +22 -9
- package/lib/cjs/components/ButtonBar/ButtonBar.styles.js +33 -0
- package/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.test.js +5 -5
- package/lib/cjs/components/ColorField/ColorField.js +4 -1
- package/lib/cjs/components/ListView/ListView.js +8 -2
- package/lib/cjs/components/TreeView/TreeView.js +100 -0
- package/lib/cjs/components/TreeView/TreeView.mdx +16 -0
- package/lib/cjs/components/TreeView/TreeView.stories.js +89 -0
- package/lib/cjs/components/TreeView/TreeView.styles.js +32 -0
- package/lib/cjs/components/TreeView/TreeView.test.js +124 -0
- package/lib/cjs/components/TreeView/TreeViewItem.js +74 -0
- package/lib/cjs/components/TreeView/TreeViewRow.js +147 -0
- package/lib/cjs/components/TreeView/TreeViewSection.js +88 -0
- package/lib/cjs/components/TreeView/index.js +28 -0
- package/lib/cjs/context/TreeViewContext/index.js +14 -0
- package/lib/cjs/index.d.ts +4 -2
- package/lib/cjs/index.js +32 -6
- package/lib/cjs/recipes/CountryPicker.stories.js +11 -2
- package/lib/cjs/recipes/{EditableInput.stories.js → InlineEditing.stories.js} +12 -2
- package/lib/cjs/recipes/OneWayToBidirectionalArrow.stories.js +8 -1
- package/lib/cjs/styles/variants/variants.js +5 -1
- package/lib/cjs/utils/designUtils/figmaLinks.js +13 -0
- package/lib/{experimental → components}/ButtonBar/ButtonBar.js +6 -9
- package/lib/{cjs/experimental → components}/ButtonBar/ButtonBar.mdx +1 -2
- package/lib/{experimental → components}/ButtonBar/ButtonBar.stories.js +15 -2
- package/lib/components/ButtonBar/ButtonBar.styles.js +25 -0
- package/lib/{experimental → components}/ButtonBar/ButtonBar.test.js +1 -1
- package/lib/components/ColorField/ColorField.js +4 -1
- package/lib/components/ListView/ListView.js +8 -2
- package/lib/components/TreeView/TreeView.js +89 -0
- package/lib/components/TreeView/TreeView.mdx +16 -0
- package/lib/components/TreeView/TreeView.stories.js +79 -0
- package/lib/components/TreeView/TreeView.styles.js +24 -0
- package/lib/components/TreeView/TreeView.test.js +121 -0
- package/lib/components/TreeView/TreeViewItem.js +60 -0
- package/lib/components/TreeView/TreeViewRow.js +135 -0
- package/lib/components/TreeView/TreeViewSection.js +74 -0
- package/lib/components/TreeView/index.js +3 -0
- package/lib/context/TreeViewContext/index.js +5 -0
- package/lib/index.js +4 -2
- package/lib/recipes/CountryPicker.stories.js +10 -1
- package/lib/recipes/{EditableInput.stories.js → InlineEditing.stories.js} +10 -1
- package/lib/recipes/OneWayToBidirectionalArrow.stories.js +7 -0
- package/lib/styles/variants/variants.js +5 -1
- package/lib/utils/designUtils/figmaLinks.js +13 -0
- package/package.json +1 -1
- package/lib/cjs/recipes/RowLineChart.stories.js +0 -578
- package/lib/recipes/RowLineChart.stories.js +0 -565
- /package/lib/cjs/{experimental → components}/ButtonBar/index.js +0 -0
- /package/lib/{experimental → components}/ButtonBar/index.js +0 -0
@@ -14,23 +14,20 @@ var _index = require("../../index");
|
|
14
14
|
var _react2 = require("@emotion/react");
|
15
15
|
var _excluded = ["align", "children"];
|
16
16
|
var ButtonBar = function ButtonBar(props) {
|
17
|
-
var
|
18
|
-
align = _props$align === void 0 ? 'left' : _props$align,
|
17
|
+
var align = props.align,
|
19
18
|
children = props.children,
|
20
19
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
21
20
|
return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
|
22
21
|
isRow: true,
|
23
|
-
|
24
|
-
sx: {
|
25
|
-
bg: 'white',
|
26
|
-
px: 'lg',
|
27
|
-
py: 'md',
|
28
|
-
justifyContent: align === 'right' ? 'right' : 'left'
|
29
|
-
}
|
22
|
+
variant: align === 'right' ? 'buttonBar.justifyRightContainer' : 'buttonBar.container'
|
30
23
|
}, others), children);
|
31
24
|
};
|
32
25
|
ButtonBar.propTypes = {
|
26
|
+
/** Justifies the component's children. */
|
33
27
|
align: _propTypes["default"].oneOf(['left', 'right'])
|
34
28
|
};
|
29
|
+
ButtonBar.defaultProps = {
|
30
|
+
align: 'left'
|
31
|
+
};
|
35
32
|
var _default = ButtonBar;
|
36
33
|
exports["default"] = _default;
|
@@ -1,9 +1,8 @@
|
|
1
1
|
import { Meta } from '@storybook/addon-docs';
|
2
2
|
|
3
|
-
<Meta title="
|
3
|
+
<Meta title="Components/ButtonBar/ButtonBar" />
|
4
4
|
|
5
5
|
# ButtonBar
|
6
6
|
|
7
7
|
This is a composed component that renders children in a simplified, organized and consistent manner.
|
8
8
|
|
9
|
-
If the **align** prop is set to right it will justify the children to the right. Default is left justification.
|
@@ -8,12 +8,13 @@ _Object$defineProperty(exports, "__esModule", {
|
|
8
8
|
exports["default"] = exports.RightAligned = exports.Default = void 0;
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
10
10
|
var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
|
11
|
-
var
|
11
|
+
var _index = require("../../index");
|
12
|
+
var _figmaLinks = require("../../utils/designUtils/figmaLinks");
|
12
13
|
var _ButtonBar = _interopRequireDefault(require("./ButtonBar.mdx"));
|
13
14
|
var _react2 = require("@emotion/react");
|
14
15
|
var _default = {
|
15
|
-
title: '
|
16
|
-
component:
|
16
|
+
title: 'Components/ButtonBar',
|
17
|
+
component: _index.ButtonBar,
|
17
18
|
parameters: {
|
18
19
|
docs: {
|
19
20
|
source: {
|
@@ -34,13 +35,13 @@ var _default = {
|
|
34
35
|
};
|
35
36
|
exports["default"] = _default;
|
36
37
|
var Default = function Default(args) {
|
37
|
-
return (0, _react2.jsx)(
|
38
|
+
return (0, _react2.jsx)(_index.ButtonBar, args, (0, _react2.jsx)(_index.Button, {
|
38
39
|
variant: "primary",
|
39
40
|
"data-id": "save-button",
|
40
41
|
onPress: function onPress() {
|
41
42
|
return alert('Save button pressed');
|
42
43
|
}
|
43
|
-
}, "Save"), (0, _react2.jsx)(
|
44
|
+
}, "Save"), (0, _react2.jsx)(_index.Button, {
|
44
45
|
variant: "link",
|
45
46
|
"data-id": "cancel-button",
|
46
47
|
onPress: function onPress() {
|
@@ -49,16 +50,22 @@ var Default = function Default(args) {
|
|
49
50
|
}, "Cancel"));
|
50
51
|
};
|
51
52
|
exports.Default = Default;
|
53
|
+
Default.parameters = {
|
54
|
+
design: {
|
55
|
+
type: 'figma',
|
56
|
+
url: _figmaLinks.FIGMA_LINKS.buttonBar["default"]
|
57
|
+
}
|
58
|
+
};
|
52
59
|
var RightAligned = function RightAligned() {
|
53
|
-
return (0, _react2.jsx)(
|
60
|
+
return (0, _react2.jsx)(_index.ButtonBar, {
|
54
61
|
align: "right"
|
55
|
-
}, (0, _react2.jsx)(
|
62
|
+
}, (0, _react2.jsx)(_index.Button, {
|
56
63
|
variant: "primary",
|
57
64
|
"data-id": "next-button",
|
58
65
|
onPress: function onPress() {
|
59
66
|
return alert('Next button pressed');
|
60
67
|
}
|
61
|
-
}, "Next"), (0, _react2.jsx)(
|
68
|
+
}, "Next"), (0, _react2.jsx)(_index.Button, {
|
62
69
|
variant: "link",
|
63
70
|
"data-id": "cancel-button",
|
64
71
|
onPress: function onPress() {
|
@@ -66,4 +73,10 @@ var RightAligned = function RightAligned() {
|
|
66
73
|
}
|
67
74
|
}, "Cancel"));
|
68
75
|
};
|
69
|
-
exports.RightAligned = RightAligned;
|
76
|
+
exports.RightAligned = RightAligned;
|
77
|
+
RightAligned.parameters = {
|
78
|
+
design: {
|
79
|
+
type: 'figma',
|
80
|
+
url: _figmaLinks.FIGMA_LINKS.buttonBar.rightAligned
|
81
|
+
}
|
82
|
+
};
|
@@ -0,0 +1,33 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
4
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
5
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
6
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
7
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
8
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
9
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
10
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
11
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
12
|
+
_Object$defineProperty(exports, "__esModule", {
|
13
|
+
value: true
|
14
|
+
});
|
15
|
+
exports["default"] = void 0;
|
16
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
17
|
+
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; }
|
18
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
19
|
+
var container = {
|
20
|
+
bg: 'white',
|
21
|
+
gap: 'md',
|
22
|
+
justifyContent: 'left',
|
23
|
+
px: 'lg',
|
24
|
+
py: 'md'
|
25
|
+
};
|
26
|
+
var justifyRightContainer = _objectSpread(_objectSpread({}, container), {}, {
|
27
|
+
justifyContent: 'right'
|
28
|
+
});
|
29
|
+
var _default = {
|
30
|
+
container: container,
|
31
|
+
justifyRightContainer: justifyRightContainer
|
32
|
+
};
|
33
|
+
exports["default"] = _default;
|
@@ -3,7 +3,7 @@
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
4
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
5
5
|
var _react = _interopRequireDefault(require("react"));
|
6
|
-
var
|
6
|
+
var _index = require("../../index");
|
7
7
|
var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
|
8
8
|
var _testWrapper = require("../../utils/testUtils/testWrapper");
|
9
9
|
var _react2 = require("@emotion/react");
|
@@ -13,13 +13,13 @@ var defaultProps = {
|
|
13
13
|
};
|
14
14
|
var getComponent = function getComponent() {
|
15
15
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
16
|
-
return (0, _testWrapper.render)((0, _react2.jsx)(
|
16
|
+
return (0, _testWrapper.render)((0, _react2.jsx)(_index.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_index.Button, {
|
17
17
|
variant: "primary",
|
18
18
|
"data-id": "save-button",
|
19
19
|
onPress: function onPress() {
|
20
20
|
return alert('Save button pressed');
|
21
21
|
}
|
22
|
-
}, "Save"), (0, _react2.jsx)(
|
22
|
+
}, "Save"), (0, _react2.jsx)(_index.Button, {
|
23
23
|
variant: "link",
|
24
24
|
"data-id": "cancel-button",
|
25
25
|
onPress: function onPress() {
|
@@ -29,11 +29,11 @@ var getComponent = function getComponent() {
|
|
29
29
|
};
|
30
30
|
var getComponentCustomChildren = function getComponentCustomChildren() {
|
31
31
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
32
|
-
return (0, _testWrapper.render)((0, _react2.jsx)(
|
32
|
+
return (0, _testWrapper.render)((0, _react2.jsx)(_index.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("button", null, "custom text"), (0, _react2.jsx)("button", null, "Also custom text")));
|
33
33
|
};
|
34
34
|
var getComponentTextChildren = function getComponentTextChildren() {
|
35
35
|
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
36
|
-
return (0, _testWrapper.render)((0, _react2.jsx)(
|
36
|
+
return (0, _testWrapper.render)((0, _react2.jsx)(_index.ButtonBar, props, "custom text"));
|
37
37
|
};
|
38
38
|
(0, _testAxe["default"])(getComponent);
|
39
39
|
afterEach(function () {
|
@@ -109,7 +109,10 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
109
109
|
ref: triggerRef,
|
110
110
|
variant: "forms.colorField.container"
|
111
111
|
}, (0, _reactAria.mergeProps)(buttonProps, ariaProps, triggerProps))), (0, _react2.jsx)(_.Box, fieldControlWrapperProps, (0, _react2.jsx)(_.Input, (0, _extends2["default"])({}, visuallyHiddenProps, fieldControlInputProps, {
|
112
|
-
ref: colorRef
|
112
|
+
ref: colorRef,
|
113
|
+
sx: {
|
114
|
+
display: 'none'
|
115
|
+
}
|
113
116
|
}))), helperText && (0, _react2.jsx)(_.FieldHelperText, {
|
114
117
|
status: status
|
115
118
|
}, helperText), (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({
|
@@ -34,7 +34,7 @@ var _Loader = _interopRequireDefault(require("../Loader"));
|
|
34
34
|
var _ListViewContext = require("./ListViewContext");
|
35
35
|
var _ListViewItem = _interopRequireDefault(require("./ListViewItem"));
|
36
36
|
var _react2 = require("@emotion/react");
|
37
|
-
var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle"];
|
37
|
+
var _excluded = ["disabledKeys", "isHoverable", "loadingState", "onLoadMore", "onSelectionChange", "selectedKeys", "selectionMode", "selectionStyle", "items"];
|
38
38
|
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); }
|
39
39
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
40
40
|
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; }
|
@@ -76,6 +76,7 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
76
76
|
selectedKeys = props.selectedKeys,
|
77
77
|
selectionMode = props.selectionMode,
|
78
78
|
selectionStyle = props.selectionStyle,
|
79
|
+
items = props.items,
|
79
80
|
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
80
81
|
var _useState = (0, _react.useState)(null),
|
81
82
|
_useState2 = (0, _slicedToArray2["default"])(_useState, 2),
|
@@ -119,6 +120,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
119
120
|
layout.isLoading = isLoading;
|
120
121
|
var focusedKey = selectionManager.focusedKey;
|
121
122
|
delete gridProps.onMouseDown;
|
123
|
+
if (!items) {
|
124
|
+
delete others['aria-label'];
|
125
|
+
}
|
122
126
|
var onFocus = function onFocus(e) {
|
123
127
|
gridProps.onFocus(e);
|
124
128
|
if (others.onFocus) {
|
@@ -134,7 +138,9 @@ var ListView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
134
138
|
value: {
|
135
139
|
state: state
|
136
140
|
}
|
137
|
-
}, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, gridProps
|
141
|
+
}, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, items ? gridProps : {
|
142
|
+
role: 'presentation'
|
143
|
+
}, {
|
138
144
|
onLoadMore: onLoadMore,
|
139
145
|
ref: listViewRef,
|
140
146
|
focusedKey: focusedKey,
|
@@ -0,0 +1,100 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
4
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
5
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
6
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
7
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
8
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
9
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
10
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
11
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
12
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
13
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
14
|
+
_Object$defineProperty(exports, "__esModule", {
|
15
|
+
value: true
|
16
|
+
});
|
17
|
+
exports["default"] = exports.SectionOrItemRender = void 0;
|
18
|
+
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
19
|
+
var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
|
20
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
21
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
22
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
23
|
+
var _react = _interopRequireWildcard(require("react"));
|
24
|
+
var _reactStately = require("react-stately");
|
25
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
26
|
+
var _TreeViewContext = require("../../context/TreeViewContext");
|
27
|
+
var _index = require("../../index");
|
28
|
+
var _isIterable = require("../../utils/devUtils/props/isIterable");
|
29
|
+
var _react2 = require("@emotion/react");
|
30
|
+
var _excluded = ["tree", "onExpandedChange"]; // split out and exported for ease of use across components
|
31
|
+
// and to facilitate easier testing (eliminates redundant conditional renders)
|
32
|
+
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); }
|
33
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
34
|
+
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; }
|
35
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
36
|
+
var SectionOrItemRender = function SectionOrItemRender(condition, SectionComponent, ItemComponent) {
|
37
|
+
if (condition) {
|
38
|
+
return SectionComponent;
|
39
|
+
}
|
40
|
+
return ItemComponent;
|
41
|
+
};
|
42
|
+
exports.SectionOrItemRender = SectionOrItemRender;
|
43
|
+
var TreeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
44
|
+
var _labelRef$current, _context;
|
45
|
+
var tree = props.tree,
|
46
|
+
onExpandedChange = props.onExpandedChange,
|
47
|
+
others = (0, _objectWithoutProperties2["default"])(props, _excluded);
|
48
|
+
var labelRef = (0, _react.useRef)();
|
49
|
+
var treeViewRef = (0, _react.useRef)();
|
50
|
+
/* istanbul ignore next */
|
51
|
+
(0, _react.useImperativeHandle)(ref, function () {
|
52
|
+
return treeViewRef.current;
|
53
|
+
});
|
54
|
+
var state = (0, _reactStately.useTreeState)(_objectSpread({
|
55
|
+
onExpandedChange: onExpandedChange
|
56
|
+
}, others));
|
57
|
+
return (0, _react2.jsx)(_TreeViewContext.TreeViewContext.Provider, {
|
58
|
+
value: {
|
59
|
+
state: state,
|
60
|
+
tree: tree
|
61
|
+
}
|
62
|
+
}, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
|
63
|
+
as: "ul",
|
64
|
+
role: "tree",
|
65
|
+
ref: treeViewRef,
|
66
|
+
"aria-labelledby": labelRef === null || labelRef === void 0 || (_labelRef$current = labelRef.current) === null || _labelRef$current === void 0 ? void 0 : _labelRef$current.id,
|
67
|
+
sx: {
|
68
|
+
overflow: 'hidden'
|
69
|
+
}
|
70
|
+
}, others), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
|
71
|
+
return SectionOrItemRender(item.type === 'section', (0, _react2.jsx)(_index.TreeViewSection, {
|
72
|
+
item: item,
|
73
|
+
items: item.props.items,
|
74
|
+
title: item.props.title,
|
75
|
+
key: item.props.title
|
76
|
+
}), (0, _react2.jsx)(_index.TreeViewItem, {
|
77
|
+
item: item,
|
78
|
+
title: item.value.value.title,
|
79
|
+
key: item.value.value.title
|
80
|
+
}));
|
81
|
+
})));
|
82
|
+
});
|
83
|
+
TreeView.defaultProps = {
|
84
|
+
'aria-label': 'tree'
|
85
|
+
};
|
86
|
+
TreeView.propTypes = {
|
87
|
+
/** data object prop that is required to make the tree function
|
88
|
+
this is returned from the useTreeData hook in React-Aria */
|
89
|
+
tree: _propTypes["default"].shape({}).isRequired,
|
90
|
+
/** The currently disabled keys in the collection. */
|
91
|
+
disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
|
92
|
+
/** Callback function that is called when items are expanded or collapsed. */
|
93
|
+
onExpandedChange: _propTypes["default"].func,
|
94
|
+
/** The list of TreeView items. */
|
95
|
+
items: _isIterable.isIterableProp,
|
96
|
+
/** String that describes the treeview when using a screen reader. */
|
97
|
+
'aria-label': _propTypes["default"].string
|
98
|
+
};
|
99
|
+
var _default = TreeView;
|
100
|
+
exports["default"] = _default;
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { Meta } from '@storybook/addon-docs';
|
2
|
+
|
3
|
+
<Meta title="Experimental/TreeView/TreeView" />
|
4
|
+
|
5
|
+
# TreeView
|
6
|
+
|
7
|
+
The TreeView component represents a nested structure of data.
|
8
|
+
|
9
|
+
### Required components
|
10
|
+
|
11
|
+
This component requires the the use of Item and Section, both exported from [react-stately/collections](https://react-spectrum.adobe.com/react-stately/collections.html).
|
12
|
+
This component will also require the use of the [useTreeData](https://react-spectrum.adobe.com/react-stately/useTreeData.html) hook, which is exported through react-stately.
|
13
|
+
|
14
|
+
### Accessibility
|
15
|
+
|
16
|
+
This component should adhere to the [WAI-ARIA TreeView](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) accessibility guidelines.
|
@@ -0,0 +1,89 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
5
|
+
_Object$defineProperty(exports, "__esModule", {
|
6
|
+
value: true
|
7
|
+
});
|
8
|
+
exports["default"] = exports.Default = void 0;
|
9
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
11
|
+
var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
|
12
|
+
var _index = require("../../index");
|
13
|
+
var _TreeView = require("./TreeView");
|
14
|
+
var _TreeView2 = _interopRequireDefault(require("./TreeView.mdx"));
|
15
|
+
var _react2 = require("@emotion/react");
|
16
|
+
var _default = {
|
17
|
+
title: 'Experimental/TreeView',
|
18
|
+
component: _index.TreeView,
|
19
|
+
parameters: {
|
20
|
+
docs: {
|
21
|
+
page: function page() {
|
22
|
+
return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_TreeView2["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
|
23
|
+
},
|
24
|
+
source: {
|
25
|
+
type: 'code'
|
26
|
+
}
|
27
|
+
}
|
28
|
+
}
|
29
|
+
};
|
30
|
+
exports["default"] = _default;
|
31
|
+
var data = [{
|
32
|
+
title: 'Policies',
|
33
|
+
items: [{
|
34
|
+
title: 'Registration',
|
35
|
+
items: [{
|
36
|
+
title: 'Registration A'
|
37
|
+
}, {
|
38
|
+
title: 'Registration B',
|
39
|
+
items: [{
|
40
|
+
title: 'Registration B1'
|
41
|
+
}, {
|
42
|
+
title: 'Registration B2'
|
43
|
+
}]
|
44
|
+
}, {
|
45
|
+
title: 'Registration C'
|
46
|
+
}, {
|
47
|
+
title: 'Registration D'
|
48
|
+
}]
|
49
|
+
}, {
|
50
|
+
title: 'Authentication',
|
51
|
+
items: [{
|
52
|
+
title: 'Authentication A'
|
53
|
+
}, {
|
54
|
+
title: 'Authentication B'
|
55
|
+
}]
|
56
|
+
}]
|
57
|
+
}, {
|
58
|
+
title: 'Other',
|
59
|
+
items: [{
|
60
|
+
title: 'Other A'
|
61
|
+
}]
|
62
|
+
}, {
|
63
|
+
title: 'Single Item'
|
64
|
+
}];
|
65
|
+
var Default = function Default(args) {
|
66
|
+
var tree = (0, _index.useTreeData)({
|
67
|
+
initialItems: data,
|
68
|
+
getKey: function getKey(item) {
|
69
|
+
return item.title;
|
70
|
+
},
|
71
|
+
getChildren: function getChildren(item) {
|
72
|
+
return item.items;
|
73
|
+
}
|
74
|
+
});
|
75
|
+
return (0, _react2.jsx)(_index.TreeView, (0, _extends2["default"])({}, args, {
|
76
|
+
items: tree.items,
|
77
|
+
tree: tree
|
78
|
+
}), function (section) {
|
79
|
+
return (0, _TreeView.SectionOrItemRender)(section.children.length > 0, (0, _react2.jsx)(_index.Section, {
|
80
|
+
key: section.key,
|
81
|
+
items: section.children,
|
82
|
+
title: section.value.title
|
83
|
+
}), (0, _react2.jsx)(_index.Item, {
|
84
|
+
key: section.key,
|
85
|
+
title: section.title
|
86
|
+
}));
|
87
|
+
});
|
88
|
+
};
|
89
|
+
exports.Default = Default;
|
@@ -0,0 +1,32 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
4
|
+
_Object$defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports["default"] = void 0;
|
8
|
+
var treeRow = {
|
9
|
+
flexGrow: 1,
|
10
|
+
cursor: 'pointer',
|
11
|
+
height: '31px',
|
12
|
+
outline: 'none',
|
13
|
+
'&.is-selected, &.is-hovered, &.is-focused': {
|
14
|
+
backgroundColor: 'active',
|
15
|
+
'& span': {
|
16
|
+
color: 'white'
|
17
|
+
},
|
18
|
+
'& svg': {
|
19
|
+
fill: 'white'
|
20
|
+
},
|
21
|
+
'& button': {
|
22
|
+
fill: 'white'
|
23
|
+
}
|
24
|
+
},
|
25
|
+
'&.is-expanded': {
|
26
|
+
marginBottom: 'xs'
|
27
|
+
}
|
28
|
+
};
|
29
|
+
var _default = {
|
30
|
+
treeRow: treeRow
|
31
|
+
};
|
32
|
+
exports["default"] = _default;
|
@@ -0,0 +1,124 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
5
|
+
var _react = _interopRequireDefault(require("react"));
|
6
|
+
var _reactStately = require("react-stately");
|
7
|
+
var _index = require("../../index");
|
8
|
+
var _testWrapper = require("../../utils/testUtils/testWrapper");
|
9
|
+
var _TreeView = require("./TreeView");
|
10
|
+
var _ = _interopRequireDefault(require("."));
|
11
|
+
var _react2 = require("@emotion/react");
|
12
|
+
var testId = 'test-TreeView';
|
13
|
+
var defaultProps = {
|
14
|
+
'data-testid': testId
|
15
|
+
};
|
16
|
+
var data = [{
|
17
|
+
title: 'People',
|
18
|
+
items: [{
|
19
|
+
title: 'David',
|
20
|
+
customProp: 1
|
21
|
+
}, {
|
22
|
+
title: 'Sam'
|
23
|
+
}, {
|
24
|
+
title: 'Jane'
|
25
|
+
}]
|
26
|
+
}, {
|
27
|
+
title: 'Animals',
|
28
|
+
items: [{
|
29
|
+
title: 'Bears',
|
30
|
+
items: [{
|
31
|
+
title: 'Black Bear'
|
32
|
+
}, {
|
33
|
+
title: 'Brown Bear'
|
34
|
+
}]
|
35
|
+
}, {
|
36
|
+
title: 'Kangaroo'
|
37
|
+
}, {
|
38
|
+
title: 'Snake'
|
39
|
+
}]
|
40
|
+
}, {
|
41
|
+
title: 'Plant'
|
42
|
+
}];
|
43
|
+
var TreeViewComponent = function TreeViewComponent(props) {
|
44
|
+
var tree = (0, _reactStately.useTreeData)({
|
45
|
+
initialItems: data,
|
46
|
+
getKey: function getKey(item) {
|
47
|
+
return item.title;
|
48
|
+
},
|
49
|
+
getChildren: function getChildren(item) {
|
50
|
+
return item.items;
|
51
|
+
}
|
52
|
+
});
|
53
|
+
return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props, {
|
54
|
+
items: tree.items,
|
55
|
+
tree: tree
|
56
|
+
}), function (section) {
|
57
|
+
var _section$children;
|
58
|
+
return (0, _TreeView.SectionOrItemRender)(((_section$children = section.children) === null || _section$children === void 0 ? void 0 : _section$children.length) > 0, (0, _react2.jsx)(_index.Section, {
|
59
|
+
key: section.key,
|
60
|
+
items: section.children,
|
61
|
+
title: section.key,
|
62
|
+
customProp: {
|
63
|
+
testp: 1
|
64
|
+
}
|
65
|
+
}), (0, _react2.jsx)(_index.Item, {
|
66
|
+
key: section.key,
|
67
|
+
title: section.key
|
68
|
+
}));
|
69
|
+
});
|
70
|
+
};
|
71
|
+
test('Can select an Item using the mouse', function () {
|
72
|
+
(0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
|
73
|
+
var element = _testWrapper.screen.getByTestId(testId);
|
74
|
+
expect(element).toBeInTheDocument();
|
75
|
+
var peopleElement = _testWrapper.screen.getByText('People');
|
76
|
+
expect(peopleElement).not.toHaveClass('is-selected');
|
77
|
+
_testWrapper.fireEvent.click(peopleElement);
|
78
|
+
expect(peopleElement).toHaveClass('is-selected');
|
79
|
+
});
|
80
|
+
test('Renders both Sections and Items', function () {
|
81
|
+
(0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
|
82
|
+
var peopleElement = _testWrapper.screen.getByText('People');
|
83
|
+
expect(peopleElement).toBeInTheDocument();
|
84
|
+
var plantElement = _testWrapper.screen.getByText('Plant');
|
85
|
+
expect(plantElement).toBeInTheDocument();
|
86
|
+
var allListItems = _testWrapper.screen.getAllByRole('treeitem');
|
87
|
+
expect(allListItems).toHaveLength(3);
|
88
|
+
});
|
89
|
+
test('Can expand an Item using the mouse', function () {
|
90
|
+
(0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, null));
|
91
|
+
|
92
|
+
// The children of collapsed sections will not
|
93
|
+
// be rendered by default.
|
94
|
+
expect(_testWrapper.screen.queryByText(data[0].items[0].title)).not.toBeInTheDocument();
|
95
|
+
|
96
|
+
// Clicking the dropdown icon, renders the children
|
97
|
+
// of the collapsed section.
|
98
|
+
var buttons = _testWrapper.screen.queryAllByRole('button');
|
99
|
+
_testWrapper.fireEvent.click(buttons[0]);
|
100
|
+
expect(_testWrapper.screen.queryByText(data[0].items[0].title)).toBeInTheDocument();
|
101
|
+
});
|
102
|
+
test('onExpandedChange change prop calls when used', function () {
|
103
|
+
var onPress = jest.fn();
|
104
|
+
(0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, {
|
105
|
+
onExpandedChange: onPress
|
106
|
+
}));
|
107
|
+
expect(onPress).not.toHaveBeenCalled();
|
108
|
+
var buttons = _testWrapper.screen.queryAllByRole('button');
|
109
|
+
_testWrapper.fireEvent.click(buttons[0]);
|
110
|
+
expect(onPress).toHaveBeenCalled();
|
111
|
+
});
|
112
|
+
test('disabledKeys prop disables items in the tree -- rendering them unclickable', function () {
|
113
|
+
(0, _testWrapper.render)((0, _react2.jsx)(TreeViewComponent, {
|
114
|
+
disabledKeys: ['Plant']
|
115
|
+
}));
|
116
|
+
var listItems = _testWrapper.screen.getAllByRole('treeitem');
|
117
|
+
var thisItem = listItems[2];
|
118
|
+
expect(thisItem).not.toHaveClass('is-selected');
|
119
|
+
expect(thisItem).toHaveAttribute('aria-disabled', 'true');
|
120
|
+
_testWrapper.fireEvent.mouseDown(thisItem);
|
121
|
+
_testWrapper.fireEvent.mouseUp(thisItem);
|
122
|
+
expect(thisItem).not.toHaveClass('is-selected');
|
123
|
+
expect(thisItem).toHaveAttribute('aria-selected', 'false');
|
124
|
+
});
|