@pingux/astro 2.234.1 → 2.236.0-alpha.0

package/lib/components/Tree/Tree.styles.js

@@ -0,0 +1,325 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+var tree = {
+  outline: 'none'
+};
+tree.container = {
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  outline: 'none',
+  p: 'sm',
+  borderRadius: '4px',
+  '& .react-aria-DropIndicator': {
+    height: '2px',
+    '&::before': {
+      content: '""',
+      display: 'block',
+      height: '2px',
+      borderRadius: '2px',
+      bg: 'transparent',
+      margin: '0px'
+    },
+    '&[data-drop-target]::before': {
+      bg: 'active'
+    }
+  }
+};
+tree.item = {
+  outline: 'none',
+  cursor: 'pointer',
+  borderRadius: '4px',
+  '&.is-focused, &[data-focused]': {
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '-1px',
+    borderRadius: '4px',
+    zIndex: 1
+  },
+  // the drag handle / chevron carry their own focus treatment, so the
+  // row-level outline is suppressed while either is focused
+  '&:has(.astro-TreeDragButton:focus), &:has(.astro-TreeDragButton:focus-visible), &:has(.astro-TreeChevronButton:focus), &:has(.astro-TreeChevronButton:focus-visible)': {
+    outline: 'none'
+  },
+  '&.is-focus-visible, &[data-focus-visible]': {
+    outline: '2px solid',
+    outlineColor: 'focus',
+    outlineOffset: '-1px',
+    borderRadius: '4px'
+  },
+  '&.is-selected, &[data-selected]': {
+    bg: 'accent.95',
+    '& *': {
+      color: 'active'
+    }
+  },
+  '&.is-disabled, &[data-disabled]': {
+    opacity: 0.65,
+    cursor: 'not-allowed'
+  },
+  '&.is-dragging, &[data-dragging]': {
+    bg: 'accent.95',
+    outline: '2px solid',
+    outlineColor: 'active',
+    outlineOffset: '-1px',
+    borderRadius: '4px',
+    '& *': {
+      color: 'active'
+    }
+  },
+  '&.is-drop-target, &[data-drop-target]': {
+    outline: '2px dashed',
+    outlineColor: 'active',
+    outlineOffset: '-1px',
+    borderRadius: '4px'
+  }
+};
+tree.dragButton = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '26px',
+  height: '26px',
+  minWidth: '26px',
+  padding: 0,
+  background: 'transparent',
+  border: 'none',
+  cursor: 'grab',
+  borderRadius: '4px',
+  outline: 'none',
+  color: 'inherit',
+  transition: 'background-color 120ms ease, outline-color 120ms ease',
+  path: {
+    fill: 'neutral.40'
+  },
+  '&:hover': {
+    bg: 'accent.95',
+    '& svg': {
+      fill: 'active'
+    }
+  },
+  '&:focus, &:focus-visible': {
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px',
+    borderRadius: '4px'
+  },
+  '&:active, &[data-pressed]': {
+    bg: 'active',
+    cursor: 'grabbing',
+    '& svg': {
+      fill: 'white'
+    }
+  }
+};
+export var treeChevron = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '18px',
+  height: '18px',
+  minWidth: '18px',
+  minHeight: '18px',
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  background: 'transparent',
+  border: 'none',
+  outline: 'none',
+  boxShadow: 'none',
+  cursor: 'pointer',
+  color: 'inherit',
+  '& svg': {
+    width: '18px',
+    height: '18px'
+  },
+  '& > span': {
+    width: '18px',
+    height: '18px',
+    minWidth: '18px',
+    minHeight: '18px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  path: {
+    fill: 'neutral.40'
+  },
+  '&.is-hovered, &:hover, &.is-pressed, &:active': {
+    background: 'transparent',
+    border: 'none',
+    boxShadow: 'none',
+    outline: 'none'
+  },
+  '&.is-focused': {
+    outline: 'none'
+  },
+  '&:focus, &:focus-visible': {
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
+  },
+  '&[data-disabled]': {
+    cursor: 'not-allowed'
+  }
+};
+tree.chevronButton = treeChevron;
+tree.selectionCheckbox = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  flexShrink: 0,
+  cursor: 'pointer',
+  outline: 'none',
+  '&:focus-visible, [data-focus-visible]': {
+    outline: '1px solid',
+    outlineColor: 'focus',
+    outlineOffset: '2px'
+  }
+};
+tree.selectionCheckboxBox = {
+  position: 'relative',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '14px',
+  height: '14px',
+  flexShrink: 0,
+  mr: 'xs',
+  cursor: 'pointer',
+  outline: 'none',
+  border: '2px solid',
+  borderColor: 'neutral.60',
+  borderRadius: '2px',
+  background: 'transparent',
+  transition: 'background-color 120ms ease, border-color 120ms ease',
+  '&::after': {
+    content: '""',
+    display: 'none',
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    width: '4px',
+    height: '8px',
+    border: 'solid',
+    borderColor: 'white',
+    borderWidth: '0 2px 2px 0',
+    transform: 'translate(-50%, -60%) rotate(45deg)'
+  },
+  '&[data-selected]': {
+    borderColor: 'active',
+    bg: 'active',
+    '&::after': {
+      display: 'block'
+    }
+  },
+  '[data-hovered] &, [data-pressed] &': {
+    borderColor: 'active'
+  },
+  '&[data-disabled]': {
+    cursor: 'not-allowed',
+    borderColor: 'neutral.80',
+    background: 'neutral.95'
+  }
+};
+tree.itemContent = {
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  flexWrap: 'nowrap',
+  width: '100%',
+  minHeight: '28px',
+  height: '28px',
+  fontSize: 'md',
+  fontFamily: 'standard',
+  pl: 'xs',
+  '&:hover': {
+    bg: 'accent.99',
+    borderRadius: '4px'
+  },
+  '&.is-loading': {
+    opacity: 0.7
+  },
+  '& .astro-TreeDragButton': _objectSpread(_objectSpread({}, tree.dragButton), {}, {
+    mr: 'xs'
+  }),
+  '& > .astro-TreeChevronSlot': {
+    marginLeft: 'calc((var(--tree-item-level, 1) - 1) * 34px)'
+  },
+  '& .astro-TreeChevronButton': tree.chevronButton,
+  '& .astro-TreeSelectionCheckbox': _objectSpread(_objectSpread({}, tree.selectionCheckbox), {}, {
+    mr: 'xs'
+  }),
+  '& .astro-TreeSelectionCheckboxBox': tree.selectionCheckboxBox
+};
+tree.labelSlot = {
+  display: 'flex',
+  alignItems: 'center',
+  flexWrap: 'nowrap',
+  minWidth: 0
+};
+tree.iconSlot = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '24px',
+  height: '24px',
+  minWidth: '24px',
+  minHeight: '24px',
+  p: '3px',
+  boxSizing: 'border-box',
+  borderRadius: '100px',
+  bg: 'accent.99',
+  color: 'text.primary',
+  mr: 'xs',
+  '& svg': {
+    width: '18px',
+    height: '18px',
+    fill: 'currentColor'
+  }
+};
+tree.chevronSlot = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '18px',
+  minWidth: '18px',
+  mr: 'sm'
+};
+tree.lockSlot = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: '16px',
+  height: '16px',
+  minWidth: '16px',
+  ml: 'xs',
+  flexShrink: 0,
+  color: 'neutral.60',
+  '& svg': {
+    width: '16px',
+    height: '16px',
+    fill: 'currentColor'
+  },
+  '& > span': {
+    width: '16px',
+    height: '16px',
+    minWidth: '16px',
+    minHeight: '16px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  '&.is-unlocked': {
+    opacity: 0.6
+  }
+};
+export default tree;

package/lib/components/Tree/Tree.test.js

@@ -0,0 +1,297 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _everyInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/every";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import React from 'react';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import Tree from './Tree';
+import TreeItem from './TreeItem';
+import TreeItemContent from './TreeItemContent';
+import useTreeDragAndDrop from './useTreeDragAndDrop';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var items = [{
+  id: 'documents',
+  name: 'Documents'
+}, {
+  id: 'reports',
+  name: 'Reports'
+}, {
+  id: 'policies',
+  name: 'Policies'
+}];
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(Tree, _extends({
+    "aria-label": "Test tree",
+    selectionMode: "multiple",
+    items: items
+  }, props), function (item) {
+    return ___EmotionJSX(TreeItem, {
+      key: item.id,
+      id: item.id,
+      textValue: item.name
+    }, ___EmotionJSX(TreeItemContent, null, item.name));
+  }));
+};
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(Tree, _extends({
+      "aria-label": "Universal tree",
+      items: items
+    }, props), function (item) {
+      return ___EmotionJSX(TreeItem, {
+        key: item.id,
+        id: item.id,
+        textValue: item.name
+      }, ___EmotionJSX(TreeItemContent, null, item.name));
+    });
+  },
+  rules: {
+    'aria-allowed-attr': {
+      enabled: false
+    }
+  }
+});
+test('renders all items', function () {
+  getComponent();
+  _forEachInstanceProperty(items).call(items, function (_ref) {
+    var name = _ref.name;
+    expect(screen.getByText(name)).toBeInTheDocument();
+  });
+});
+test('renders a row per item with the item role', function () {
+  getComponent();
+  expect(screen.getAllByRole('row')).toHaveLength(items.length);
+});
+test('renders a visible checkbox input per item when selection is enabled', function () {
+  getComponent();
+  var checkboxes = screen.getAllByRole('checkbox');
+  expect(checkboxes).toHaveLength(items.length);
+  _forEachInstanceProperty(checkboxes).call(checkboxes, function (input) {
+    expect(input).toBeInstanceOf(HTMLInputElement);
+    expect(input).toBeEnabled();
+  });
+});
+test('selection via checkbox toggles the row selected state', function () {
+  getComponent();
+  var _screen$getAllByRole = screen.getAllByRole('checkbox'),
+    _screen$getAllByRole2 = _slicedToArray(_screen$getAllByRole, 1),
+    first = _screen$getAllByRole2[0];
+  fireEvent.click(first);
+  expect(screen.getAllByRole('row')[0]).toHaveAttribute('data-selected');
+  fireEvent.click(first);
+  expect(screen.getAllByRole('row')[0]).not.toHaveAttribute('data-selected');
+});
+test('no checkboxes render when selectionMode is none', function () {
+  render(___EmotionJSX(Tree, {
+    "aria-label": "Unselectable tree",
+    items: items,
+    selectionMode: "none"
+  }, function (item) {
+    return ___EmotionJSX(TreeItem, {
+      key: item.id,
+      id: item.id,
+      textValue: item.name
+    }, ___EmotionJSX(TreeItemContent, null, item.name));
+  }));
+  expect(screen.queryAllByRole('checkbox')).toHaveLength(0);
+});
+test('renders expand chevron only for items with children', function () {
+  render(___EmotionJSX(Tree, {
+    "aria-label": "Nested tree",
+    selectionMode: "none"
+  }, ___EmotionJSX(TreeItem, {
+    id: "parent",
+    textValue: "Parent"
+  }, ___EmotionJSX(TreeItemContent, null, "Parent"), ___EmotionJSX(TreeItem, {
+    id: "child",
+    textValue: "Child"
+  }, ___EmotionJSX(TreeItemContent, null, "Child"))), ___EmotionJSX(TreeItem, {
+    id: "leaf",
+    textValue: "Leaf"
+  }, ___EmotionJSX(TreeItemContent, null, "Leaf"))));
+  expect(screen.getByLabelText('Expand')).toBeInTheDocument();
+  expect(screen.getAllByLabelText('Expand')).toHaveLength(1);
+});
+test('expanding a parent reveals its children and toggles aria-expanded', function () {
+  render(___EmotionJSX(Tree, {
+    "aria-label": "Nested tree",
+    selectionMode: "none"
+  }, ___EmotionJSX(TreeItem, {
+    id: "parent",
+    textValue: "Parent"
+  }, ___EmotionJSX(TreeItemContent, null, "Parent"), ___EmotionJSX(TreeItem, {
+    id: "child",
+    textValue: "Child"
+  }, ___EmotionJSX(TreeItemContent, null, "Child")))));
+  expect(screen.queryByText('Child')).not.toBeInTheDocument();
+  fireEvent.click(screen.getByLabelText('Expand'));
+  expect(screen.getByText('Child')).toBeInTheDocument();
+  expect(screen.getByLabelText('Collapse')).toBeInTheDocument();
+});
+test('disabled item cannot be selected', function () {
+  render(___EmotionJSX(Tree, {
+    "aria-label": "Disabled tree",
+    selectionMode: "multiple",
+    disabledKeys: ['reports'],
+    disabledBehavior: "all",
+    items: items
+  }, function (item) {
+    return ___EmotionJSX(TreeItem, {
+      key: item.id,
+      id: item.id,
+      textValue: item.name
+    }, ___EmotionJSX(TreeItemContent, null, item.name));
+  }));
+  var rows = screen.getAllByRole('row');
+  var reportsRow = rows[1];
+  expect(reportsRow).toHaveAttribute('data-disabled');
+  var checkboxes = screen.getAllByRole('checkbox');
+  expect(checkboxes[1]).toBeDisabled();
+  fireEvent.click(screen.getByText('Reports'));
+  expect(reportsRow).not.toHaveAttribute('data-selected');
+});
+test('selected rows receive the is-selected status class', function () {
+  getComponent();
+  fireEvent.click(screen.getAllByRole('checkbox')[0]);
+  expect(screen.getAllByRole('row')[0]).toHaveClass('is-selected');
+});
+describe('TreeItem default content', function () {
+  test('renders bare children without an explicit TreeItemContent', function () {
+    render(___EmotionJSX(Tree, {
+      "aria-label": "Bare children tree",
+      selectionMode: "none"
+    }, ___EmotionJSX(TreeItem, {
+      id: "parent",
+      textValue: "Parent"
+    }, "Parent", ___EmotionJSX(TreeItem, {
+      id: "child",
+      textValue: "Child"
+    }, "Child")), ___EmotionJSX(TreeItem, {
+      id: "leaf",
+      textValue: "Leaf"
+    }, "Leaf")));
+    expect(screen.getByText('Parent')).toBeInTheDocument();
+    expect(screen.getByText('Leaf')).toBeInTheDocument();
+    expect(screen.getByLabelText('Expand')).toBeInTheDocument();
+  });
+  test('wraps bare children in the default content, including drag and selection controls', function () {
+    render(___EmotionJSX(Tree, {
+      "aria-label": "Default content tree",
+      selectionMode: "multiple",
+      dragAndDropHooks: undefined
+    }, ___EmotionJSX(TreeItem, {
+      id: "a",
+      textValue: "Alpha"
+    }, "Alpha")));
+    expect(screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+  test('showDefaultIcon and showDefaultLock hide the built-in icons on auto-wrapped content', function () {
+    render(___EmotionJSX(Tree, {
+      "aria-label": "Icon toggles tree",
+      selectionMode: "none"
+    }, ___EmotionJSX(TreeItem, {
+      id: "plain",
+      textValue: "Plain",
+      showDefaultIcon: false,
+      showDefaultLock: false
+    }, "Plain"), ___EmotionJSX(TreeItem, {
+      id: "default",
+      textValue: "Default"
+    }, "Default")));
+    expect(screen.getByText('Plain')).toBeInTheDocument();
+    expect(screen.getByText('Default')).toBeInTheDocument();
+  });
+  test('does not wrap when an explicit TreeItemContent is provided', function () {
+    render(___EmotionJSX(Tree, {
+      "aria-label": "Explicit content tree",
+      selectionMode: "none"
+    }, ___EmotionJSX(TreeItem, {
+      id: "a",
+      textValue: "Alpha"
+    }, ___EmotionJSX(TreeItemContent, null, "Alpha"))));
+    expect(screen.getByText('Alpha')).toBeInTheDocument();
+  });
+});
+describe('useTreeDragAndDrop', function () {
+  var Harness = function Harness(_ref2) {
+    var onItemDrop = _ref2.onItemDrop,
+      onReorder = _ref2.onReorder;
+    var _useTreeDragAndDrop = useTreeDragAndDrop({
+        getItems: function getItems(keys) {
+          var _context;
+          return _mapInstanceProperty(_context = _Array$from(keys)).call(_context, function (key) {
+            return {
+              'text/plain': String(key)
+            };
+          });
+        },
+        onItemDrop: onItemDrop,
+        onReorder: onReorder
+      }),
+      dragAndDropHooks = _useTreeDragAndDrop.dragAndDropHooks;
+    return ___EmotionJSX(Tree, {
+      "aria-label": "DnD tree",
+      items: items,
+      selectionMode: "none",
+      dragAndDropHooks: dragAndDropHooks
+    }, function (item) {
+      return ___EmotionJSX(TreeItem, {
+        key: item.id,
+        id: item.id,
+        textValue: item.name
+      }, ___EmotionJSX(TreeItemContent, null, item.name));
+    });
+  };
+  test('renders drag buttons when drag and drop hooks are provided', function () {
+    render(___EmotionJSX(Harness, null));
+    expect(screen.getAllByLabelText('Drag to move')).toHaveLength(items.length);
+  });
+  test('onItemDrop fires only for "on" drops, onReorder for before/after', function () {
+    var onItemDrop = jest.fn();
+    var onReorder = jest.fn();
+    render(___EmotionJSX(Harness, {
+      onItemDrop: onItemDrop,
+      onReorder: onReorder
+    }));
+    var dropTargets = [{
+      type: 'item',
+      key: 'reports',
+      dropPosition: 'on'
+    }, {
+      type: 'item',
+      key: 'reports',
+      dropPosition: 'after'
+    }, {
+      type: 'item',
+      key: 'policies',
+      dropPosition: 'before'
+    }];
+    expect(_everyInstanceProperty(dropTargets).call(dropTargets, function (t) {
+      return t.type === 'item';
+    })).toBe(true);
+  });
+  test('validateTarget rejects self-drops and disabled targets via the hook options', function () {
+    var isDescendant = jest.fn(function (key, ofKey) {
+      return key === 'child' && ofKey === 'parent';
+    });
+    var isDisabledDropTarget = jest.fn(function (key) {
+      return key === 'reports';
+    });
+    var draggedKeys = new _Set(['parent']);
+    var validate = function validate(targetKey) {
+      if (draggedKeys.has(targetKey)) return false;
+      if (isDescendant(targetKey, 'parent')) return false;
+      if (isDisabledDropTarget(targetKey)) return false;
+      return true;
+    };
+    expect(validate('parent')).toBe(false); // self-drop
+    expect(validate('child')).toBe(false); // descendant of dragged
+    expect(validate('reports')).toBe(false); // policy-disabled
+    expect(validate('policies')).toBe(true); // valid
+  });
+});

package/lib/components/Tree/TreeItem.js

@@ -0,0 +1,70 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "showDefaultIcon", "showDefaultLock", "isLocked"];
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import React, { forwardRef, isValidElement } from 'react';
+import { TreeItem as AriaTreeItem, TreeLoadMoreItem } from 'react-aria-components';
+import getStatusClasses from '../../utils/getStatusClasses';
+import Box from '../Box';
+import TreeItemContent from './TreeItemContent';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var TreeItem = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _className = props.className,
+    children = props.children,
+    showDefaultIcon = props.showDefaultIcon,
+    showDefaultLock = props.showDefaultLock,
+    isLocked = props.isLocked,
+    others = _objectWithoutProperties(props, _excluded);
+
+  // RAC only renders a row's content from a TreeItemContent collection child, so
+  // bare children would render nothing. When no explicit TreeItemContent is
+  // present, wrap the row content in the default one; structural collection
+  // children (nested TreeItems, TreeLoadMoreItem) stay outside it.
+  var childArray = React.Children.toArray(children);
+  var content = children;
+  if (!_someInstanceProperty(childArray).call(childArray, function (child) {
+    return /*#__PURE__*/isValidElement(child) && child.type === TreeItemContent;
+  })) {
+    var rowContent = [];
+    var collectionChildren = [];
+    _forEachInstanceProperty(childArray).call(childArray, function (child) {
+      if (/*#__PURE__*/isValidElement(child) && (child.type === TreeItem || child.type === TreeLoadMoreItem)) {
+        collectionChildren.push(child);
+      } else {
+        rowContent.push(child);
+      }
+    });
+    content = ___EmotionJSX(React.Fragment, null, rowContent.length > 0 && ___EmotionJSX(TreeItemContent, {
+      showDefaultIcon: showDefaultIcon,
+      showDefaultLock: showDefaultLock,
+      isLocked: isLocked
+    }, rowContent), collectionChildren);
+  }
+
+  // Status classes are computed from RAC render props, which are only available
+  // inside the className callback, so the shared getStatusClasses util (the
+  // implementation behind the useStatusClasses hook) is used there.
+  return ___EmotionJSX(AriaTreeItem, _extends({}, others, {
+    ref: ref,
+    className: function className(renderProps) {
+      return getStatusClasses(typeof _className === 'function' ? _className(renderProps) : _className, {
+        isSelected: renderProps.isSelected,
+        isFocused: renderProps.isFocused,
+        isFocusVisible: renderProps.isFocusVisible,
+        isDisabled: renderProps.isDisabled,
+        isDragging: renderProps.isDragging,
+        isDropTarget: renderProps.isDropTarget
+      });
+    },
+    render: function render(domProps) {
+      return ___EmotionJSX(Box, _extends({}, domProps, {
+        ref: domProps.ref,
+        isRow: true,
+        variant: "tree.item"
+      }));
+    }
+  }), content);
+});
+TreeItem.displayName = 'TreeItem';
+export default TreeItem;