@pingux/astro 2.235.0-alpha.0 → 2.236.0

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.