@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.
Files changed (52) hide show
  1. package/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.js +6 -9
  2. package/lib/{experimental → cjs/components}/ButtonBar/ButtonBar.mdx +1 -2
  3. package/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.stories.js +22 -9
  4. package/lib/cjs/components/ButtonBar/ButtonBar.styles.js +33 -0
  5. package/lib/cjs/{experimental → components}/ButtonBar/ButtonBar.test.js +5 -5
  6. package/lib/cjs/components/ColorField/ColorField.js +4 -1
  7. package/lib/cjs/components/ListView/ListView.js +8 -2
  8. package/lib/cjs/components/TreeView/TreeView.js +100 -0
  9. package/lib/cjs/components/TreeView/TreeView.mdx +16 -0
  10. package/lib/cjs/components/TreeView/TreeView.stories.js +89 -0
  11. package/lib/cjs/components/TreeView/TreeView.styles.js +32 -0
  12. package/lib/cjs/components/TreeView/TreeView.test.js +124 -0
  13. package/lib/cjs/components/TreeView/TreeViewItem.js +74 -0
  14. package/lib/cjs/components/TreeView/TreeViewRow.js +147 -0
  15. package/lib/cjs/components/TreeView/TreeViewSection.js +88 -0
  16. package/lib/cjs/components/TreeView/index.js +28 -0
  17. package/lib/cjs/context/TreeViewContext/index.js +14 -0
  18. package/lib/cjs/index.d.ts +4 -2
  19. package/lib/cjs/index.js +32 -6
  20. package/lib/cjs/recipes/CountryPicker.stories.js +11 -2
  21. package/lib/cjs/recipes/{EditableInput.stories.js → InlineEditing.stories.js} +12 -2
  22. package/lib/cjs/recipes/OneWayToBidirectionalArrow.stories.js +8 -1
  23. package/lib/cjs/styles/variants/variants.js +5 -1
  24. package/lib/cjs/utils/designUtils/figmaLinks.js +13 -0
  25. package/lib/{experimental → components}/ButtonBar/ButtonBar.js +6 -9
  26. package/lib/{cjs/experimental → components}/ButtonBar/ButtonBar.mdx +1 -2
  27. package/lib/{experimental → components}/ButtonBar/ButtonBar.stories.js +15 -2
  28. package/lib/components/ButtonBar/ButtonBar.styles.js +25 -0
  29. package/lib/{experimental → components}/ButtonBar/ButtonBar.test.js +1 -1
  30. package/lib/components/ColorField/ColorField.js +4 -1
  31. package/lib/components/ListView/ListView.js +8 -2
  32. package/lib/components/TreeView/TreeView.js +89 -0
  33. package/lib/components/TreeView/TreeView.mdx +16 -0
  34. package/lib/components/TreeView/TreeView.stories.js +79 -0
  35. package/lib/components/TreeView/TreeView.styles.js +24 -0
  36. package/lib/components/TreeView/TreeView.test.js +121 -0
  37. package/lib/components/TreeView/TreeViewItem.js +60 -0
  38. package/lib/components/TreeView/TreeViewRow.js +135 -0
  39. package/lib/components/TreeView/TreeViewSection.js +74 -0
  40. package/lib/components/TreeView/index.js +3 -0
  41. package/lib/context/TreeViewContext/index.js +5 -0
  42. package/lib/index.js +4 -2
  43. package/lib/recipes/CountryPicker.stories.js +10 -1
  44. package/lib/recipes/{EditableInput.stories.js → InlineEditing.stories.js} +10 -1
  45. package/lib/recipes/OneWayToBidirectionalArrow.stories.js +7 -0
  46. package/lib/styles/variants/variants.js +5 -1
  47. package/lib/utils/designUtils/figmaLinks.js +13 -0
  48. package/package.json +1 -1
  49. package/lib/cjs/recipes/RowLineChart.stories.js +0 -578
  50. package/lib/recipes/RowLineChart.stories.js +0 -565
  51. /package/lib/cjs/{experimental → components}/ButtonBar/index.js +0 -0
  52. /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 _props$align = props.align,
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
- gap: "md",
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="Experimental/ButtonBar/ButtonBar" />
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 _ = require("../..");
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: 'Experimental/ButtonBar',
16
- component: _.ButtonBar,
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)(_.ButtonBar, args, (0, _react2.jsx)(_.Button, {
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)(_.Button, {
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)(_.ButtonBar, {
60
+ return (0, _react2.jsx)(_index.ButtonBar, {
54
61
  align: "right"
55
- }, (0, _react2.jsx)(_.Button, {
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)(_.Button, {
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 _ = require("../..");
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)(_.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_.Button, {
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)(_.Button, {
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)(_.ButtonBar, (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)("button", null, "custom text"), (0, _react2.jsx)("button", null, "Also custom text")));
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)(_.ButtonBar, props, "custom text"));
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
+ });