@pingux/astro 2.234.1 → 2.236.0-alpha.0

package/lib/cjs/components/ComboBox/ComboBoxInput.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ComboBoxInputProps } from '../../types';
+declare const ComboBoxInput: React.ForwardRefExoticComponent<ComboBoxInputProps & React.RefAttributes<HTMLInputElement>>;
+export default ComboBoxInput;

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -15,20 +15,16 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _hooks = require("../../hooks");
 var _useGetTheme2 = _interopRequireDefault(require("../../hooks/useGetTheme"));
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
-var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _react2 = require("@emotion/react");
 var _excluded = ["controlProps", "containerProps", "hasAutoFocus", "isDisabled", "isReadOnly", "isOpen", "loadingState", "style", "inputWrapperRef", "inputRef", "inputProps", "triggerRef", "triggerProps", "menuTrigger", "onInputChange", "onLoadMore", "onOpenChange", "onSelectionChange", "wrapperProps"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -55,6 +51,9 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     onSelectionChange = props.onSelectionChange,
     wrapperProps = props.wrapperProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
@@ -69,12 +68,10 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   (0, _react.useImperativeHandle)(ref, function () {
     return inputRef.current;
   });
-  var _useHover = (0, _interactions.useHover)({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
   var _useInputLoader = (0, _hooks.useInputLoader)({
       loadingState: loadingState,
-      inputValue: inputProps.value
+      // eslint-disable-next-line max-len
+      inputValue: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value
     }),
     isLoading = _useInputLoader.isLoading;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
@@ -101,7 +98,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     size: isOnyx ? 'sm' : 'md',
     sx: isOpen ? {
       transform: 'rotate(180deg)'
-    } : null,
+    } : undefined,
     title: {
       name: ''
     },
@@ -124,40 +121,14 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
+    tabIndex: -1,
     statusClasses: {
       isHovered: isHovered
     },
     ref: inputRef,
     slots: {
       inContainer: button
-    },
-    tabIndex: -1
+    }
   }))));
 });
-ComboBoxInput.propTypes = _objectSpread(_objectSpread({
-  containerProps: _propTypes["default"].shape({}),
-  controlProps: _propTypes["default"].shape({}),
-  hasAutoFocus: _propTypes["default"].bool,
-  helperText: _propTypes["default"].node,
-  inputProps: _propTypes["default"].shape({
-    value: _propTypes["default"].string
-  }),
-  inputRef: _propTypes["default"].shape({}),
-  inputWrapperRef: _propTypes["default"].shape({}),
-  isDisabled: _propTypes["default"].bool,
-  isOpen: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool,
-  label: _propTypes["default"].node,
-  labelProps: _propTypes["default"].shape({}),
-  loadingState: _propTypes["default"].oneOf((0, _values["default"])(_loadingStates["default"])),
-  menuTrigger: _propTypes["default"].oneOf(['focus', 'input', 'manual']),
-  onInputChange: _propTypes["default"].func,
-  onLoadMore: _propTypes["default"].func,
-  onOpenChange: _propTypes["default"].func,
-  onSelectionChange: _propTypes["default"].func,
-  style: _propTypes["default"].shape({}),
-  triggerProps: _propTypes["default"].shape({}),
-  triggerRef: _propTypes["default"].shape({}),
-  wrapperProps: _propTypes["default"].shape({})
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 var _default = exports["default"] = ComboBoxInput;

package/lib/cjs/components/ComboBox/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ComboBoxInput';

package/lib/cjs/components/ComboBoxField/ComboBoxField.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ComboBoxFieldProps } from '../../types';
+interface ComboBoxFieldFC {
+    <T extends object>(props: ComboBoxFieldProps<T> & React.RefAttributes<HTMLInputElement>): React.ReactElement | null;
+    displayName?: string;
+    defaultProps?: Partial<ComboBoxFieldProps> | undefined;
+}
+declare const ComboBoxField: ComboBoxFieldFC;
+export default ComboBoxField;

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -17,7 +17,6 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
-var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
@@ -27,13 +26,10 @@ var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
 var _i18n = require("@react-aria/i18n");
 var _utils = require("@react-aria/utils");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
-var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
-var _statusProp = require("../../utils/docUtils/statusProp");
 var _ComboBox = _interopRequireDefault(require("../ComboBox"));
 var _ListBox = _interopRequireDefault(require("../ListBox"));
 var _Popover = _interopRequireDefault(require("../Popover"));
@@ -86,11 +82,11 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     label: 'default',
     allowsEmptyCollection: allowsEmptyCollection
   }, nonAriaProps);
-  var popoverRef = (0, _react.useRef)();
-  var buttonRef = (0, _react.useRef)();
-  var listBoxRef = (0, _react.useRef)();
-  var inputRef = (0, _react.useRef)();
-  var inputWrapperRef = (0, _react.useRef)();
+  var popoverRef = (0, _react.useRef)(null);
+  var buttonRef = (0, _react.useRef)(null);
+  var listBoxRef = (0, _react.useRef)(null);
+  var inputRef = (0, _react.useRef)(null);
+  var inputWrapperRef = (0, _react.useRef)(null);
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
@@ -101,7 +97,7 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var getItemsArr = function getItemsArr(initialArr) {
     if (initialArr && shouldShowAddOption) {
       var _context;
-      return (0, _concat["default"])(_context = []).call(_context, initialArr, [{
+      return (0, _concat["default"])(_context = []).call(_context, (0, _from["default"])(initialArr), [{
         name: addOption,
         key: addOption
       }]);
@@ -143,10 +139,11 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     inputProps = _useComboBox.inputProps,
     listBoxProps = _useComboBox.listBoxProps,
     labelProps = _useComboBox.labelProps;
-  var shouldFocusOnHover = listBoxProps.shouldFocusOnHover,
-    shouldSelectOnPressUp = listBoxProps.shouldSelectOnPressUp,
-    action = listBoxProps['UNSTABLE_itemBehavior'],
-    otherListBoxProps = (0, _objectWithoutProperties2["default"])(listBoxProps, _excluded2);
+  var _ref = listBoxProps,
+    shouldFocusOnHover = _ref.shouldFocusOnHover,
+    shouldSelectOnPressUp = _ref.shouldSelectOnPressUp,
+    action = _ref['UNSTABLE_itemBehavior'],
+    otherListBoxProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded2);
   var _useOverlayPosition = (0, _reactAria.useOverlayPosition)({
       offset: 1,
       targetRef: inputWrapperRef,
@@ -234,125 +231,6 @@ var ComboBoxField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     "aria-invalid": status === 'error' && true
   })), listBox);
 });
-ComboBoxField.propTypes = _objectSpread(_objectSpread({
-  /* Whether or not adding new options to the list is enabled. */
-  hasAddOption: _propTypes["default"].bool,
-  /** Whether the ComboBox allows a non-item matching input value to be set. */
-  hasCustomValue: _propTypes["default"].bool,
-  /** Whether the collection allows empty selection. */
-  hasNoEmptySelection: _propTypes["default"].bool,
-  /**
-   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
-   * interacted with.
-   */
-  disabledKeys: _isIterable.isIterableProp,
-  /** The interaction required to display the ComboBox menu. */
-  menuTrigger: _propTypes["default"].oneOf(['focus', 'input', 'manual']),
-  /**
-   * Whether the ComboBox menu is prevented from flipping directions when insufficient space is
-   * available for the given `direction` placement.
-   */
-  isNotFlippable: _propTypes["default"].bool,
-  /** Where the ComboBox menu opens relative to its trigger. */
-  direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
-  /** Text rendered below the input. */
-  helperText: _propTypes["default"].node,
-  /** The initial selected key in the collection (uncontrolled). */
-  defaultSelectedKey: _propTypes["default"].string,
-  /** The currently selected key in the collection (controlled). */
-  selectedKey: _propTypes["default"].string,
-  /**
-   * Handler that is called when the selection changes.
-   *
-   * `(key: Key) => any`
-   */
-  onSelectionChange: _propTypes["default"].func,
-  /** The list of ComboBox items (uncontrolled). */
-  defaultItems: _isIterable.isIterableProp,
-  /** The list of ComboBox items (controlled). */
-  items: _isIterable.isIterableProp,
-  /**
-   * Method that is called when the open state of the menu changes.
-   * Returns the new open state and the action that caused the opening of the menu.
-   *
-   * `(isOpen: boolean, menuTrigger: MenuTriggerAction) => void`
-   */
-  onOpenChange: _propTypes["default"].func,
-  loadingState: _propTypes["default"].oneOf((0, _values["default"])(_loadingStates["default"])),
-  onLoadMore: _propTypes["default"].func,
-  /** The default value of the ComboBox input (uncontrolled). */
-  defaultInputValue: _propTypes["default"].string,
-  /** The value of the ComboBox input (controlled). */
-  inputValue: _propTypes["default"].string,
-  /**
-   * Handler that is called when the ComboBox input value changes.
-   *
-   * `(value: string) => void`
-   */
-  onInputChange: _propTypes["default"].func,
-  /** Whether user input is required on the input before form submission. */
-  isRequired: _propTypes["default"].bool,
-  /** Whether the input is disabled. */
-  isDisabled: _propTypes["default"].bool,
-  /** Whether the input can be selected but not changed by the user. */
-  isReadOnly: _propTypes["default"].bool,
-  /** The rendered label for the field. */
-  label: _propTypes["default"].node,
-  /** Temporary text that occupies the text input when it is empty. */
-  placeholder: _propTypes["default"].string,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /** Whether the element should receive focus on render. */
-  hasAutoFocus: _propTypes["default"].bool,
-  /** Whether the field has a status indicator. */
-  hasNoStatusIndicator: _propTypes["default"].bool,
-  /**
-   * Handler that is called when the element receives focus.
-   *
-   * `(e: FocusEvent) => void`
-   */
-  onFocus: _propTypes["default"].func,
-  /**
-   * Handler that is called when the element loses focus.
-   *
-   * `(e: FocusEvent) => void`
-   */
-  onBlur: _propTypes["default"].func,
-  /**
-   * Handler that is called when the element's focus status changes.
-   *
-   * `(isFocused: boolean) => void`
-   */
-  onFocusChange: _propTypes["default"].func,
-  /**
-   * Handler that is called when a key is pressed.
-   *
-   * `(e: KeyboardEvent) => void`
-   */
-  onKeyDown: _propTypes["default"].func,
-  /**
-   * Handler that is called when a key is released.
-   *
-   * `(e: KeyboardEvent) => void`
-   */
-  onKeyUp: _propTypes["default"].func,
-  /**
-   * Handler that determines the default filtering for items. If undefined, `contains` from
-   * [useFilter](https://react-spectrum.adobe.com/react-aria/useFilter.html) is used.
-   *
-   * `(option: string, inputValue: string) => boolean`
-   */
-  defaultFilter: _propTypes["default"].func,
-  // /** Props object that is spread directly into the ScrollBox element. */
-  /** @ignore */
-  scrollBoxProps: _propTypes["default"].shape({
-    maxHeight: _propTypes["default"].string
-  }),
-  /** Props object that is spread directly into the ComboBoxInput element. */
-  controlProps: _propTypes["default"].shape({
-    onClick: _propTypes["default"].func
-  })
-}, _statusProp.statusPropTypes), _ariaAttributes.ariaAttributesBasePropTypes);
 ComboBoxField.defaultProps = {
   menuTrigger: 'focus',
   direction: 'bottom',

package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js

@@ -340,9 +340,10 @@ var AsyncLoading = exports.AsyncLoading = function AsyncLoading() {
     loadingState: loading,
     onLoadMore: handleLoadMore
   }), function (item) {
+    var _item$name, _item$name2;
     return (0, _react2.jsx)(_index.Item, {
-      key: item.name.given
-    }, item.name.given);
+      key: (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.given
+    }, (_item$name2 = item.name) === null || _item$name2 === void 0 ? void 0 : _item$name2.given);
   }));
 };
 var ControlledInput = exports.ControlledInput = function ControlledInput() {
@@ -421,8 +422,8 @@ var ControlledFiltering = exports.ControlledFiltering = function ControlledFilte
       inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
       selectedKey: key,
       itemsList: (0, _filter["default"])(items).call(items, function (item) {
-        var _selectedItem$name;
-        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+        var _name;
+        return startsWith(item.name, (_name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _name !== void 0 ? _name : '');
       })
     });
   };

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

@@ -152,8 +152,8 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
       inputValue: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name,
       selectedKey: key,
       itemsList: (0, _filter["default"])(items).call(items, function (item) {
-        var _selectedItem$name;
-        return startsWith(item.name, (_selectedItem$name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _selectedItem$name !== void 0 ? _selectedItem$name : '');
+        var _name;
+        return startsWith(item.name, (_name = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.name) !== null && _name !== void 0 ? _name : '');
       })
     });
   };
@@ -180,7 +180,6 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
     }
   };
   return (0, _react3.jsx)(_index.OverlayProvider, null, (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({
-    label: "Example label",
     items: fieldState.itemsList,
     inputValue: fieldState.inputValue,
     selectedKey: fieldState.selectedKey,

package/lib/cjs/components/ComboBoxField/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ComboBoxField';

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { TreeProps, useDragAndDrop } from 'react-aria-components';
+export interface TreeDragAndDropOptions {
+    /** Options that configure drag and drop behavior, returned by useDragAndDrop. */
+    dragAndDropHooks?: TreeProps<unknown>['dragAndDropHooks'];
+}
+declare const Tree: React.ForwardRefExoticComponent<TreeProps<unknown> & React.RefAttributes<HTMLDivElement>>;
+export { useDragAndDrop };
+export default Tree;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _typeof3 = require("@babel/runtime-corejs3/helpers/typeof");
+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 _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+_Object$defineProperty(exports, "useDragAndDrop", {
+  enumerable: true,
+  get: function get() {
+    return _reactAriaComponents.useDragAndDrop;
+  }
+});
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactAriaComponents = require("react-aria-components");
+var _Box = _interopRequireDefault(require("../Box"));
+var _react2 = require("@emotion/react");
+function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+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 = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  return (0, _react2.jsx)(_reactAriaComponents.Tree, (0, _extends2["default"])({}, props, {
+    ref: ref,
+    render: function render(domProps) {
+      return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, domProps, {
+        ref: domProps.ref,
+        isRow: false,
+        variant: "tree.container",
+        sx: _objectSpread({}, (0, _typeof2["default"])(props.style) === 'object' ? props.style : {})
+      }));
+    }
+  }));
+});
+Tree.displayName = 'Tree';
+var _default = exports["default"] = Tree;

package/lib/cjs/components/Tree/Tree.mdx

@@ -0,0 +1,58 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+import * as TreeStories from './Tree.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
+
+<Meta of={TreeStories} isTemplate />
+
+# Tree
+
+The Tree component displays hierarchical data in an expandable, collapsible tree structure. Users can expand and collapse levels, select one or many items, and — optionally — reorder and re-parent items with drag and drop.
+
+A Tree should:
+- Be used for data with a clear parent/child relationship, such as environments, regions, folders, or organization structures.
+- Be used when users need to navigate a nested structure that is deeper than a flat list.
+
+A Tree shouldn't:
+- Be used for flat data — use a [ListView](./?path=/docs/components-listview--docs) instead.
+- Be used for navigation that fits a menu or breadcrumbs.
+- Expose too many levels of depth; keep nesting shallow enough to stay scannable.
+
+### Required Components
+
+This component can be used with `TreeItem`, `TreeItemContent`, and `TreeLoadMoreItem` from this package. A chevron and expand/collapse behavior are provided by default. `TreeItem` children render as row content directly; place them inside `TreeItemContent` only when you need its render props or its built-in folder/file and lock icons.
+
+### Authoring Modes
+
+- **Static**: declare `TreeItem` children directly in JSX (see the *Static Nested Tree* story). Best for small, fixed trees.
+- **Dynamic**: pass a nested array via the `items` prop and render nodes with a recursive render function (see the *Dynamic Recursive Tree* story). Best for trees backed by data.
+
+### Accessibility
+
+This component should adhere to the [WAI-ARIA Tree View](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/) accessibility guidelines.
+
+<AccessibilityTable keyboardRows={[
+  { key: 'Space or Enter', description: 'When focused, selects the item (with selectionMode enabled) or toggles expand/collapse.' },
+  KeyboardRows.tabFocusesItem,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Right Arrow', description: 'Expands a collapsed parent item, or moves focus to its first child when expanded.' },
+  { key: 'Left Arrow', description: 'Collapses an expanded parent item, or moves focus to its parent when collapsed.' },
+  { key: 'Down / Up Arrow', description: 'Moves focus to the next or previous visible item.' },
+  {
+    key: 'Home (Fn + Right Arrow Key) Or Control/Command + Home',
+    description: 'Shifts the focus to the first item in the tree.',
+  },
+  {
+    key: 'End (Fn + Left Arrow Key) Or Control/Command + End',
+    description: 'Shifts the focus to the last item in the tree.',
+  },
+]} screenReaderRows={[
+  'The Tree uses the **`role="tree"`** attribute with each TreeItem using **`role="treeitem"`**.',
+  'Parent items use the **`aria-expanded`** attribute to indicate whether they are expanded or collapsed.',
+  'Selected items use the **`aria-selected`** attribute; disabled items use **`aria-disabled`**.',
+  'The Tree requires an **`aria-label`** to provide an accessible name.',
+]} />
+
+### Keyboard Drag and Drop
+
+When drag and drop is enabled, the drag handle is focusable. Press **Enter** to start a drag session, use the arrow keys to move the drop target, then press **Enter** to drop or **Escape** to cancel.