@pingux/astro 2.234.1 → 2.236.0-alpha.0

package/lib/cjs/components/Tree/Tree.styles.d.ts

@@ -0,0 +1,4 @@
+import { ThemeUICSSObject } from 'theme-ui';
+declare const tree: ThemeUICSSObject;
+export declare const treeChevron: ThemeUICSSObject;
+export default tree;

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

@@ -0,0 +1,332 @@
+"use strict";
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.treeChevron = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/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) { (0, _defineProperty2["default"])(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'
+    }
+  }
+};
+var treeChevron = exports.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
+  }
+};
+var _default = exports["default"] = tree;

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

@@ -0,0 +1,300 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+var _every = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/every"));
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _Tree = _interopRequireDefault(require("./Tree"));
+var _TreeItem = _interopRequireDefault(require("./TreeItem"));
+var _TreeItemContent = _interopRequireDefault(require("./TreeItemContent"));
+var _useTreeDragAndDrop2 = _interopRequireDefault(require("./useTreeDragAndDrop"));
+var _react2 = require("@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 (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], (0, _extends2["default"])({
+    "aria-label": "Test tree",
+    selectionMode: "multiple",
+    items: items
+  }, props), function (item) {
+    return (0, _react2.jsx)(_TreeItem["default"], {
+      key: item.id,
+      id: item.id,
+      textValue: item.name
+    }, (0, _react2.jsx)(_TreeItemContent["default"], null, item.name));
+  }));
+};
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_Tree["default"], (0, _extends2["default"])({
+      "aria-label": "Universal tree",
+      items: items
+    }, props), function (item) {
+      return (0, _react2.jsx)(_TreeItem["default"], {
+        key: item.id,
+        id: item.id,
+        textValue: item.name
+      }, (0, _react2.jsx)(_TreeItemContent["default"], null, item.name));
+    });
+  },
+  rules: {
+    'aria-allowed-attr': {
+      enabled: false
+    }
+  }
+});
+test('renders all items', function () {
+  getComponent();
+  (0, _forEach["default"])(items).call(items, function (_ref) {
+    var name = _ref.name;
+    expect(_testWrapper.screen.getByText(name)).toBeInTheDocument();
+  });
+});
+test('renders a row per item with the item role', function () {
+  getComponent();
+  expect(_testWrapper.screen.getAllByRole('row')).toHaveLength(items.length);
+});
+test('renders a visible checkbox input per item when selection is enabled', function () {
+  getComponent();
+  var checkboxes = _testWrapper.screen.getAllByRole('checkbox');
+  expect(checkboxes).toHaveLength(items.length);
+  (0, _forEach["default"])(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 = _testWrapper.screen.getAllByRole('checkbox'),
+    _screen$getAllByRole2 = (0, _slicedToArray2["default"])(_screen$getAllByRole, 1),
+    first = _screen$getAllByRole2[0];
+  _testWrapper.fireEvent.click(first);
+  expect(_testWrapper.screen.getAllByRole('row')[0]).toHaveAttribute('data-selected');
+  _testWrapper.fireEvent.click(first);
+  expect(_testWrapper.screen.getAllByRole('row')[0]).not.toHaveAttribute('data-selected');
+});
+test('no checkboxes render when selectionMode is none', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], {
+    "aria-label": "Unselectable tree",
+    items: items,
+    selectionMode: "none"
+  }, function (item) {
+    return (0, _react2.jsx)(_TreeItem["default"], {
+      key: item.id,
+      id: item.id,
+      textValue: item.name
+    }, (0, _react2.jsx)(_TreeItemContent["default"], null, item.name));
+  }));
+  expect(_testWrapper.screen.queryAllByRole('checkbox')).toHaveLength(0);
+});
+test('renders expand chevron only for items with children', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], {
+    "aria-label": "Nested tree",
+    selectionMode: "none"
+  }, (0, _react2.jsx)(_TreeItem["default"], {
+    id: "parent",
+    textValue: "Parent"
+  }, (0, _react2.jsx)(_TreeItemContent["default"], null, "Parent"), (0, _react2.jsx)(_TreeItem["default"], {
+    id: "child",
+    textValue: "Child"
+  }, (0, _react2.jsx)(_TreeItemContent["default"], null, "Child"))), (0, _react2.jsx)(_TreeItem["default"], {
+    id: "leaf",
+    textValue: "Leaf"
+  }, (0, _react2.jsx)(_TreeItemContent["default"], null, "Leaf"))));
+  expect(_testWrapper.screen.getByLabelText('Expand')).toBeInTheDocument();
+  expect(_testWrapper.screen.getAllByLabelText('Expand')).toHaveLength(1);
+});
+test('expanding a parent reveals its children and toggles aria-expanded', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], {
+    "aria-label": "Nested tree",
+    selectionMode: "none"
+  }, (0, _react2.jsx)(_TreeItem["default"], {
+    id: "parent",
+    textValue: "Parent"
+  }, (0, _react2.jsx)(_TreeItemContent["default"], null, "Parent"), (0, _react2.jsx)(_TreeItem["default"], {
+    id: "child",
+    textValue: "Child"
+  }, (0, _react2.jsx)(_TreeItemContent["default"], null, "Child")))));
+  expect(_testWrapper.screen.queryByText('Child')).not.toBeInTheDocument();
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByLabelText('Expand'));
+  expect(_testWrapper.screen.getByText('Child')).toBeInTheDocument();
+  expect(_testWrapper.screen.getByLabelText('Collapse')).toBeInTheDocument();
+});
+test('disabled item cannot be selected', function () {
+  (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], {
+    "aria-label": "Disabled tree",
+    selectionMode: "multiple",
+    disabledKeys: ['reports'],
+    disabledBehavior: "all",
+    items: items
+  }, function (item) {
+    return (0, _react2.jsx)(_TreeItem["default"], {
+      key: item.id,
+      id: item.id,
+      textValue: item.name
+    }, (0, _react2.jsx)(_TreeItemContent["default"], null, item.name));
+  }));
+  var rows = _testWrapper.screen.getAllByRole('row');
+  var reportsRow = rows[1];
+  expect(reportsRow).toHaveAttribute('data-disabled');
+  var checkboxes = _testWrapper.screen.getAllByRole('checkbox');
+  expect(checkboxes[1]).toBeDisabled();
+  _testWrapper.fireEvent.click(_testWrapper.screen.getByText('Reports'));
+  expect(reportsRow).not.toHaveAttribute('data-selected');
+});
+test('selected rows receive the is-selected status class', function () {
+  getComponent();
+  _testWrapper.fireEvent.click(_testWrapper.screen.getAllByRole('checkbox')[0]);
+  expect(_testWrapper.screen.getAllByRole('row')[0]).toHaveClass('is-selected');
+});
+describe('TreeItem default content', function () {
+  test('renders bare children without an explicit TreeItemContent', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], {
+      "aria-label": "Bare children tree",
+      selectionMode: "none"
+    }, (0, _react2.jsx)(_TreeItem["default"], {
+      id: "parent",
+      textValue: "Parent"
+    }, "Parent", (0, _react2.jsx)(_TreeItem["default"], {
+      id: "child",
+      textValue: "Child"
+    }, "Child")), (0, _react2.jsx)(_TreeItem["default"], {
+      id: "leaf",
+      textValue: "Leaf"
+    }, "Leaf")));
+    expect(_testWrapper.screen.getByText('Parent')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByText('Leaf')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByLabelText('Expand')).toBeInTheDocument();
+  });
+  test('wraps bare children in the default content, including drag and selection controls', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], {
+      "aria-label": "Default content tree",
+      selectionMode: "multiple",
+      dragAndDropHooks: undefined
+    }, (0, _react2.jsx)(_TreeItem["default"], {
+      id: "a",
+      textValue: "Alpha"
+    }, "Alpha")));
+    expect(_testWrapper.screen.getByRole('checkbox')).toBeInTheDocument();
+  });
+  test('showDefaultIcon and showDefaultLock hide the built-in icons on auto-wrapped content', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], {
+      "aria-label": "Icon toggles tree",
+      selectionMode: "none"
+    }, (0, _react2.jsx)(_TreeItem["default"], {
+      id: "plain",
+      textValue: "Plain",
+      showDefaultIcon: false,
+      showDefaultLock: false
+    }, "Plain"), (0, _react2.jsx)(_TreeItem["default"], {
+      id: "default",
+      textValue: "Default"
+    }, "Default")));
+    expect(_testWrapper.screen.getByText('Plain')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByText('Default')).toBeInTheDocument();
+  });
+  test('does not wrap when an explicit TreeItemContent is provided', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(_Tree["default"], {
+      "aria-label": "Explicit content tree",
+      selectionMode: "none"
+    }, (0, _react2.jsx)(_TreeItem["default"], {
+      id: "a",
+      textValue: "Alpha"
+    }, (0, _react2.jsx)(_TreeItemContent["default"], null, "Alpha"))));
+    expect(_testWrapper.screen.getByText('Alpha')).toBeInTheDocument();
+  });
+});
+describe('useTreeDragAndDrop', function () {
+  var Harness = function Harness(_ref2) {
+    var onItemDrop = _ref2.onItemDrop,
+      onReorder = _ref2.onReorder;
+    var _useTreeDragAndDrop = (0, _useTreeDragAndDrop2["default"])({
+        getItems: function getItems(keys) {
+          var _context;
+          return (0, _map["default"])(_context = (0, _from["default"])(keys)).call(_context, function (key) {
+            return {
+              'text/plain': String(key)
+            };
+          });
+        },
+        onItemDrop: onItemDrop,
+        onReorder: onReorder
+      }),
+      dragAndDropHooks = _useTreeDragAndDrop.dragAndDropHooks;
+    return (0, _react2.jsx)(_Tree["default"], {
+      "aria-label": "DnD tree",
+      items: items,
+      selectionMode: "none",
+      dragAndDropHooks: dragAndDropHooks
+    }, function (item) {
+      return (0, _react2.jsx)(_TreeItem["default"], {
+        key: item.id,
+        id: item.id,
+        textValue: item.name
+      }, (0, _react2.jsx)(_TreeItemContent["default"], null, item.name));
+    });
+  };
+  test('renders drag buttons when drag and drop hooks are provided', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(Harness, null));
+    expect(_testWrapper.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();
+    (0, _testWrapper.render)((0, _react2.jsx)(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((0, _every["default"])(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["default"](['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/cjs/components/Tree/TreeItem.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TreeItemProps } from 'react-aria-components';
+export interface TreeItemPropsWithDefaultIcon extends TreeItemProps<unknown> {
+    /**
+     * Set to false to hide the built-in folder/file icon. Only applies to the
+     * default row content TreeItem renders when no explicit TreeItemContent
+     * child is given.
+     */
+    showDefaultIcon?: boolean;
+    /**
+     * Set to false to hide the built-in trailing lock indicator. Only applies
+     * to the default row content.
+     */
+    showDefaultLock?: boolean;
+    /**
+     * Whether the item is locked (drives the built-in lock indicator's state).
+     * Only applies to the default row content.
+     */
+    isLocked?: boolean;
+}
+declare const TreeItem: React.ForwardRefExoticComponent<TreeItemPropsWithDefaultIcon & React.RefAttributes<HTMLDivElement>>;
+export default TreeItem;