@pingux/astro 2.235.0-alpha.0 → 2.236.0-alpha.0

package/lib/components/Tree/Tree.stories.js

@@ -0,0 +1,775 @@
+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 _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 _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
+import _Object$create from "@babel/runtime-corejs3/core-js-stable/object/create";
+import _bindInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/bind";
+import _Object$getPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/get-prototype-of";
+import _Object$setPrototypeOf from "@babel/runtime-corejs3/core-js-stable/object/set-prototype-of";
+import _Symbol$asyncIterator from "@babel/runtime-corejs3/core-js-stable/symbol/async-iterator";
+import _Symbol$iterator from "@babel/runtime-corejs3/core-js-stable/symbol/iterator";
+import _reverseInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reverse";
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+function _regeneratorRuntime() { "use strict"; var r = _regenerator(), e = r.m(_regeneratorRuntime), t = (_Object$getPrototypeOf ? _Object$getPrototypeOf(e) : e.__proto__).constructor; function n(r) { var e = "function" == typeof r && r.constructor; return !!e && (e === t || "GeneratorFunction" === (e.displayName || e.name)); } var o = { "throw": 1, "return": 2, "break": 3, "continue": 3 }; function a(r) { var e, t; return function (n) { e || (e = { stop: function stop() { return t(n.a, 2); }, "catch": function _catch() { return n.v; }, abrupt: function abrupt(r, e) { return t(n.a, o[r], e); }, delegateYield: function delegateYield(r, o, a) { return e.resultName = o, t(n.d, _regeneratorValues(r), a); }, finish: function finish(r) { return t(n.f, r); } }, t = function t(r, _t, o) { n.p = e.prev, n.n = e.next; try { return r(_t, o); } finally { e.next = n.n; } }), e.resultName && (e[e.resultName] = n.v, e.resultName = void 0), e.sent = n.v, e.next = n.n; try { return r.call(this, e); } finally { n.p = e.prev, n.n = e.next; } }; } return (_regeneratorRuntime = function _regeneratorRuntime() { return { wrap: function wrap(e, t, n, o) { return r.w(a(e), t, n, o && _reverseInstanceProperty(o).call(o)); }, isGeneratorFunction: n, mark: r.m, awrap: function awrap(r, e) { return new _OverloadYield(r, e); }, AsyncIterator: _regeneratorAsyncIterator, async: function async(r, e, t, o, u) { return (n(e) ? _regeneratorAsyncGen : _regeneratorAsync)(a(r), e, t, o, u); }, keys: _regeneratorKeys, values: _regeneratorValues }; })(); }
+function _regeneratorValues(e) { if (null != e) { var t = e["function" == typeof _Symbol && _Symbol$iterator || "@@iterator"], r = 0; if (t) return t.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) return { next: function next() { return e && r >= e.length && (e = void 0), { value: e && e[r++], done: !e }; } }; } throw new TypeError(_typeof(e) + " is not iterable"); }
+function _regeneratorKeys(e) { var n = Object(e), r = []; for (var t in n) r.unshift(t); return function e() { for (; r.length;) if ((t = r.pop()) in n) return e.value = t, e.done = !1, e; return e.done = !0, e; }; }
+function _regeneratorAsync(n, e, r, t, o) { var a = _regeneratorAsyncGen(n, e, r, t, o); return a.next().then(function (n) { return n.done ? n.value : a.next(); }); }
+function _regeneratorAsyncGen(r, e, t, o, n) { return new _regeneratorAsyncIterator(_regenerator().w(r, e, t, o), n || _Promise); }
+function _regeneratorAsyncIterator(t, e) { function n(r, o, i, f) { try { var c = t[r](o), u = c.value; return u instanceof _OverloadYield ? e.resolve(u.v).then(function (t) { n("next", t, i, f); }, function (t) { n("throw", t, i, f); }) : e.resolve(u).then(function (t) { c.value = t, i(c); }, function (t) { return n("throw", t, i, f); }); } catch (t) { f(t); } } var r; this.next || (_regeneratorDefine2(_regeneratorAsyncIterator.prototype), _regeneratorDefine2(_regeneratorAsyncIterator.prototype, "function" == typeof _Symbol && _Symbol$asyncIterator || "@asyncIterator", function () { return this; })), _regeneratorDefine2(this, "_invoke", function (t, o, i) { function f() { return new e(function (e, r) { n(t, i, e, r); }); } return r = r ? r.then(f, f) : f(); }, !0); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof _Symbol ? _Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = _Object$create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: _bindInstanceProperty(d).call(d, e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = _Object$getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = _Object$create(c); function f(e) { return _Object$setPrototypeOf ? _Object$setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = _Object$create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = _Object$defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function _OverloadYield(e, d) { this.v = e, this.k = d; }
+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 _context9, _context0; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context9 = ownKeys(Object(t), !0)).call(_context9, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context0 = ownKeys(Object(t))).call(_context0, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import React, { useState } from 'react';
+import { useTreeData } from 'react-aria-components/useTreeData';
+import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
+import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
+import FormatListGroupIcon from '@pingux/mdi-react/FormatListGroupIcon';
+import PaperclipIcon from '@pingux/mdi-react/PaperclipIcon';
+import RefreshIcon from '@pingux/mdi-react/RefreshIcon';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import { Box, Icon, IconButton, Loader, Text, Tree, TreeItem, TreeItemContent, TreeLoadMoreItem, useTreeDragAndDrop } from '../../index';
+import TreeReadme from './Tree.mdx';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Tree',
+  component: Tree,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(TreeReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  }
+};
+export var StaticNestedTree = function StaticNestedTree() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Tree, {
+    "aria-label": "Static files"
+  }, ___EmotionJSX(TreeItem, {
+    textValue: "Documents"
+  }, ___EmotionJSX(TreeItemContent, null, ___EmotionJSX(Text, null, "Documents")), ___EmotionJSX(TreeItem, {
+    textValue: "Reports"
+  }, ___EmotionJSX(TreeItemContent, null, ___EmotionJSX(Text, null, "Reports"))), ___EmotionJSX(TreeItem, {
+    textValue: "Policies"
+  }, ___EmotionJSX(TreeItemContent, null, ___EmotionJSX(Text, null, "Policies")))), ___EmotionJSX(TreeItem, {
+    textValue: "Downloads"
+  }, ___EmotionJSX(TreeItemContent, null, ___EmotionJSX(Text, null, "Downloads")))));
+};
+StaticNestedTree.parameters = {
+  docs: {
+    description: {
+      story: 'The simplest usage: declare TreeItem children directly with nested TreeItems for sub-levels. Best for small, fixed trees that do not change at runtime.'
+    }
+  }
+};
+export var DynamicRecursiveTree = function DynamicRecursiveTree() {
+  var initiallyExpandedKeys = ['projects', 'resources'];
+  var items = [{
+    id: 'projects',
+    name: 'Projects',
+    children: [{
+      id: 'astro',
+      name: 'Astro',
+      children: [{
+        id: 'components',
+        name: 'Components'
+      }]
+    }, {
+      id: 'onyx',
+      name: 'Onyx'
+    }]
+  }, {
+    id: 'resources',
+    name: 'Resources',
+    children: [{
+      id: 'guides',
+      name: 'Guides',
+      children: [{
+        id: 'getting-started',
+        name: 'Getting Started'
+      }]
+    }, {
+      id: 'examples',
+      name: 'Examples'
+    }]
+  }];
+  var _renderItem = function renderItem(item) {
+    var _item$children, _item$children2;
+    return ___EmotionJSX(TreeItem, {
+      key: item.id,
+      id: item.id,
+      textValue: item.name,
+      hasChildItems: Boolean((_item$children = item.children) === null || _item$children === void 0 ? void 0 : _item$children.length)
+    }, ___EmotionJSX(TreeItemContent, null, function (_ref) {
+      var _context, _context2;
+      var isExpanded = _ref.isExpanded,
+        level = _ref.level;
+      return ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, _concatInstanceProperty(_context = _concatInstanceProperty(_context2 = "".concat(item.name, " (")).call(_context2, isExpanded ? 'expanded' : 'collapsed', ", level ")).call(_context, level, ")")));
+    }), (_item$children2 = item.children) === null || _item$children2 === void 0 ? void 0 : _mapInstanceProperty(_item$children2).call(_item$children2, _renderItem));
+  };
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Tree, {
+    "aria-label": "Dynamic projects",
+    items: items,
+    defaultExpandedKeys: initiallyExpandedKeys
+  }, _renderItem));
+};
+DynamicRecursiveTree.parameters = {
+  docs: {
+    description: {
+      story: 'Pass a nested array via the `items` prop and render each node recursively with a render function. Use this for trees backed by data — each TreeItem gets `hasChildItems` from the node so the chevron renders correctly.'
+    }
+  }
+};
+var richItems = [{
+  id: 'production',
+  name: 'Policies',
+  status: 'Healthy',
+  color: 'blue',
+  children: [{
+    id: 'registration',
+    name: 'Registration',
+    status: 'Healthy',
+    color: 'blue',
+    locked: true,
+    children: [{
+      id: 'registration-a',
+      name: 'Registration A',
+      status: 'Healthy',
+      color: 'indigo',
+      locked: true
+    }, {
+      id: 'registration-b',
+      name: 'Registration B',
+      status: 'Healthy',
+      color: 'indigo',
+      locked: true
+    }]
+  }, {
+    id: 'authentication',
+    name: 'Authentication',
+    status: 'Needs review',
+    color: 'blue',
+    locked: true
+  }, {
+    id: 'other',
+    name: 'Other',
+    status: 'In progress',
+    color: 'blue'
+  }]
+}, {
+  id: 'staging',
+  name: 'Single Item',
+  status: 'In progress',
+  color: 'indigo'
+}];
+export var Selection = function Selection(_ref2) {
+  var selectionMode = _ref2.selectionMode,
+    selectionBehavior = _ref2.selectionBehavior;
+  var _useState = useState(richItems),
+    _useState2 = _slicedToArray(_useState, 1),
+    items = _useState2[0];
+  var _renderItem2 = function renderItem(item) {
+    var _item$children3, _item$children4;
+    return ___EmotionJSX(TreeItem, {
+      key: item.id,
+      id: item.id,
+      textValue: item.name,
+      hasChildItems: Boolean((_item$children3 = item.children) === null || _item$children3 === void 0 ? void 0 : _item$children3.length)
+    }, ___EmotionJSX(TreeItemContent, null, item.name), (_item$children4 = item.children) === null || _item$children4 === void 0 ? void 0 : _mapInstanceProperty(_item$children4).call(_item$children4, _renderItem2));
+  };
+  var productionExpandedKeys = ['production', 'registration'];
+  return ___EmotionJSX(Tree, {
+    "aria-label": "Selection example",
+    items: items,
+    selectionMode: selectionMode,
+    selectionBehavior: selectionBehavior,
+    defaultSelectedKeys: selectionMode === 'none' ? undefined : ['registration-a'],
+    defaultExpandedKeys: productionExpandedKeys
+  }, function (item) {
+    return _renderItem2(item);
+  });
+};
+Selection.parameters = {
+  docs: {
+    description: {
+      story: 'Uncontrolled selection: the tree manages selection internally from `defaultSelectedKeys` (seeded with registration-a). Use the Controls panel to try `selectionMode` and `selectionBehavior` combinations. For selection that lives in app state, pass `selectedKeys`/`onSelectionChange` instead of `defaultSelectedKeys`.'
+    }
+  }
+};
+Selection.args = {
+  selectionMode: 'multiple',
+  selectionBehavior: 'toggle'
+};
+Selection.argTypes = {
+  selectionMode: {
+    control: 'radio',
+    options: ['none', 'single', 'multiple'],
+    description: 'Whether none, one, or many items can be selected.'
+  },
+  selectionBehavior: {
+    control: 'radio',
+    options: ['toggle', 'replace'],
+    description: 'How multiple selection responds to pointer/keyboard selection: toggle adds to the selection, replace swaps it.'
+  }
+};
+export var DisabledItems = function DisabledItems(_ref3) {
+  var disabledBehavior = _ref3.disabledBehavior;
+  var _useState3 = useState(richItems),
+    _useState4 = _slicedToArray(_useState3, 1),
+    items = _useState4[0];
+  var disabledItemKeys = ['staging'];
+  var productionExpandedKeys = ['production'];
+  var _renderDisabledItem = function renderDisabledItem(item) {
+    var _item$children5, _item$children6;
+    return ___EmotionJSX(TreeItem, {
+      key: item.id,
+      id: item.id,
+      textValue: item.name,
+      hasChildItems: Boolean((_item$children5 = item.children) === null || _item$children5 === void 0 ? void 0 : _item$children5.length),
+      isDisabled: item.id === 'staging'
+    }, ___EmotionJSX(TreeItemContent, null, item.name), (_item$children6 = item.children) === null || _item$children6 === void 0 ? void 0 : _mapInstanceProperty(_item$children6).call(_item$children6, _renderDisabledItem));
+  };
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    as: "p"
+  }, "Single Item is disabled. With", ' ', ___EmotionJSX("code", null, "disabledBehavior=\"", disabledBehavior, "\""), ", a disabled item is", ' ', disabledBehavior === 'all' ? 'inert — it cannot be selected, expanded, or focused.' : 'blocked from selection only, but can still be expanded and focused.'), ___EmotionJSX(Tree, {
+    "aria-label": "Tree with disabled items",
+    items: items,
+    selectionMode: "multiple",
+    disabledKeys: disabledItemKeys,
+    disabledBehavior: disabledBehavior,
+    defaultExpandedKeys: productionExpandedKeys
+  }, function (item) {
+    return _renderDisabledItem(item);
+  }));
+};
+DisabledItems.args = {
+  disabledBehavior: 'all'
+};
+DisabledItems.argTypes = {
+  disabledBehavior: {
+    control: 'radio',
+    options: ['selection', 'all'],
+    description: 'Whether disabledKeys blocks selection only, or all interactions.'
+  }
+};
+DisabledItems.parameters = {
+  docs: {
+    description: {
+      story: 'Mark an item disabled with `isDisabled` on its TreeItem. Use the control to compare `disabledBehavior="selection"` (item can still expand and focus) with `disabledBehavior="all"` (item is fully inert).'
+    }
+  }
+};
+export var CustomItemContent = function CustomItemContent() {
+  var _useState5 = useState(richItems),
+    _useState6 = _slicedToArray(_useState5, 2),
+    items = _useState6[0],
+    setItems = _useState6[1];
+  var updateItem = function updateItem(id, update) {
+    var _updateItems = function updateItems(nodes) {
+      return _mapInstanceProperty(nodes).call(nodes, function (node) {
+        if (node.id === id) return update(node);
+        return node.children ? _objectSpread(_objectSpread({}, node), {}, {
+          children: _updateItems(node.children)
+        }) : node;
+      });
+    };
+    setItems(_updateItems);
+  };
+  var refreshItem = function refreshItem(id) {
+    updateItem(id, function (item) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        status: 'In progress'
+      });
+    });
+  };
+  var statusIconProps = function statusIconProps(item) {
+    return {
+      icon: item.color === 'indigo' ? FormatListGroupIcon : PaperclipIcon,
+      sx: {
+        width: '24px',
+        height: '24px',
+        minWidth: '24px',
+        minHeight: '24px',
+        p: '3px',
+        borderRadius: '100px',
+        boxSizing: 'border-box',
+        bg: item.color === 'indigo' ? 'avatar.indigo.bg' : 'avatar.blue.bg',
+        color: item.color === 'indigo' ? 'avatar.indigo.text' : 'gray.600',
+        '& svg': {
+          fill: 'currentColor'
+        }
+      }
+    };
+  };
+  var _renderEnvironmentItem = function renderEnvironmentItem(item) {
+    var _context3, _item$children7, _item$children8;
+    return ___EmotionJSX(TreeItem, {
+      key: item.id,
+      id: item.id,
+      textValue: _concatInstanceProperty(_context3 = "".concat(item.name, " ")).call(_context3, item.status || ''),
+      hasChildItems: Boolean((_item$children7 = item.children) === null || _item$children7 === void 0 ? void 0 : _item$children7.length),
+      showDefaultIcon: false,
+      showDefaultLock: false
+    }, ___EmotionJSX(Icon, _extends({}, statusIconProps(item), {
+      "aria-hidden": "true"
+    })), ___EmotionJSX(Text, {
+      sx: {
+        flexShrink: 0
+      }
+    }, item.name), item.status === 'Healthy' ? ___EmotionJSX(Icon, {
+      icon: CheckCircleIcon,
+      "aria-label": "Healthy",
+      size: "sm",
+      sx: {
+        color: 'success.bright'
+      }
+    }) : ___EmotionJSX(Icon, {
+      icon: AlertCircleIcon,
+      "aria-label": item.status,
+      size: "sm",
+      sx: {
+        color: 'warning.bright'
+      }
+    }), ___EmotionJSX(IconButton, {
+      "aria-label": "Refresh ".concat(item.name),
+      sx: {
+        ml: 'auto',
+        alignSelf: 'center',
+        width: '24px',
+        height: '24px',
+        '&.is-focused': {
+          outline: 'none'
+        },
+        '&:focus-visible': {
+          outline: 'none'
+        }
+      },
+      onClick: function onClick(event) {
+        event.stopPropagation();
+        refreshItem(item.id);
+      }
+    }, ___EmotionJSX(Icon, {
+      icon: RefreshIcon,
+      "aria-hidden": "true"
+    })), (_item$children8 = item.children) === null || _item$children8 === void 0 ? void 0 : _mapInstanceProperty(_item$children8).call(_item$children8, _renderEnvironmentItem));
+  };
+  return ___EmotionJSX(Tree, {
+    "aria-label": "Environments",
+    items: items
+  }, _renderEnvironmentItem);
+};
+CustomItemContent.parameters = {
+  docs: {
+    description: {
+      story: 'TreeItem children render directly as row content — no TreeItemContent wrapper needed. The default row scaffolding (selection checkbox, expand chevron) is still provided, while the built-in folder/file and lock icons are turned off with showDefaultIcon and showDefaultLock. Row actions do not select or expand the row because each handler calls event.stopPropagation().'
+    }
+  }
+};
+export var AsyncChildLoading = function AsyncChildLoading() {
+  var _useState7 = useState([{
+      id: 'region-us',
+      name: 'US Region',
+      hasLoadedChildren: false,
+      canLoadMore: true
+    }, {
+      id: 'region-eu',
+      name: 'EU Region',
+      hasLoadedChildren: false,
+      canLoadMore: true
+    }, {
+      id: 'single-tenant',
+      name: 'Single Tenant'
+    }]),
+    _useState8 = _slicedToArray(_useState7, 2),
+    items = _useState8[0],
+    setItems = _useState8[1];
+  var _useState9 = useState(new _Set()),
+    _useState0 = _slicedToArray(_useState9, 2),
+    loadingKeys = _useState0[0],
+    setLoadingKeys = _useState0[1];
+  var _useState1 = useState(new _Set()),
+    _useState10 = _slicedToArray(_useState1, 2),
+    expandedKeys = _useState10[0],
+    setExpandedKeys = _useState10[1];
+  var loadChildren = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(parent) {
+      return _regeneratorRuntime().wrap(function _callee$(_context4) {
+        while (1) switch (_context4.prev = _context4.next) {
+          case 0:
+            _context4.next = 2;
+            return new _Promise(function (resolve) {
+              return _setTimeout(resolve, 1000);
+            });
+          case 2:
+            return _context4.abrupt("return", [{
+              id: "".concat(parent.id, "-child-1"),
+              name: "".concat(parent.name, " Tenant 1")
+            }, {
+              id: "".concat(parent.id, "-child-2"),
+              name: "".concat(parent.name, " Tenant 2")
+            }]);
+          case 3:
+          case "end":
+            return _context4.stop();
+        }
+      }, _callee);
+    }));
+    return function loadChildren(_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  var handleExpandedChange = /*#__PURE__*/function () {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(keys) {
+      var _context5;
+      var newlyExpanded, parent, children;
+      return _regeneratorRuntime().wrap(function _callee2$(_context6) {
+        while (1) switch (_context6.prev = _context6.next) {
+          case 0:
+            setExpandedKeys(keys);
+            newlyExpanded = _findInstanceProperty(_context5 = _Array$from(keys)).call(_context5, function (key) {
+              return !loadingKeys.has(key) && _someInstanceProperty(items).call(items, function (item) {
+                return item.id === key && !item.hasLoadedChildren;
+              });
+            });
+            if (!newlyExpanded) {
+              _context6.next = 16;
+              break;
+            }
+            setLoadingKeys(function (prev) {
+              return new _Set(prev).add(newlyExpanded);
+            });
+
+            // Show a placeholder loading row while children are being fetched.
+            setItems(function (currentItems) {
+              return _mapInstanceProperty(currentItems).call(currentItems, function (item) {
+                return item.id === newlyExpanded ? _objectSpread(_objectSpread({}, item), {}, {
+                  children: [{
+                    id: "".concat(item.id, "-loading"),
+                    name: "Loading ".concat(item.name, " children"),
+                    isPendingRow: true
+                  }]
+                }) : item;
+              });
+            });
+            parent = _findInstanceProperty(items).call(items, function (item) {
+              return item.id === newlyExpanded;
+            });
+            if (!parent) {
+              _context6.next = 12;
+              break;
+            }
+            _context6.next = 9;
+            return loadChildren(parent);
+          case 9:
+            _context6.t0 = _context6.sent;
+            _context6.next = 13;
+            break;
+          case 12:
+            _context6.t0 = [];
+          case 13:
+            children = _context6.t0;
+            setItems(function (currentItems) {
+              return _mapInstanceProperty(currentItems).call(currentItems, function (item) {
+                return item.id === newlyExpanded ? _objectSpread(_objectSpread({}, item), {}, {
+                  children: children,
+                  hasLoadedChildren: true
+                }) : item;
+              });
+            });
+            setLoadingKeys(function (prev) {
+              var next = new _Set(prev);
+              next["delete"](newlyExpanded);
+              return next;
+            });
+          case 16:
+          case "end":
+            return _context6.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleExpandedChange(_x2) {
+      return _ref5.apply(this, arguments);
+    };
+  }();
+  var _renderAsyncItem = function renderAsyncItem(item) {
+    var _item$children9, _item$children0, _item$children1;
+    return ___EmotionJSX(TreeItem, {
+      key: item.id,
+      id: item.id,
+      textValue: item.name,
+      hasChildItems: Boolean((_item$children9 = item.children) === null || _item$children9 === void 0 ? void 0 : _item$children9.length) || item.canLoadMore
+    }, item.isPendingRow ? ___EmotionJSX(TreeItemContent, {
+      showDefaultIcon: false,
+      showDefaultLock: false
+    }, ___EmotionJSX(Loader, {
+      "aria-label": "Loading ".concat(item.name),
+      sx: {
+        p: 'xs'
+      }
+    })) : ___EmotionJSX(TreeItemContent, null, ___EmotionJSX(Box, {
+      isRow: true,
+      flexDirection: "row",
+      style: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'nowrap',
+        whiteSpace: 'nowrap',
+        minWidth: 'max-content'
+      },
+      sx: {
+        gap: 'sm',
+        alignItems: 'center'
+      }
+    }, ___EmotionJSX(Text, {
+      as: "span",
+      sx: {
+        flex: '0 0 auto',
+        whiteSpace: 'nowrap'
+      }
+    }, item.name))), (_item$children0 = item.children) === null || _item$children0 === void 0 ? void 0 : _mapInstanceProperty(_item$children0).call(_item$children0, function (child) {
+      return _renderAsyncItem(child);
+    }), item.canLoadMore && !item.hasLoadedChildren && !((_item$children1 = item.children) !== null && _item$children1 !== void 0 && _item$children1.length) && ___EmotionJSX(TreeLoadMoreItem, {
+      onLoadMore: function onLoadMore() {
+        setLoadingKeys(function (prev) {
+          return new _Set(prev).add(item.id);
+        });
+        loadChildren(item).then(function (children) {
+          setItems(function (currentItems) {
+            return _mapInstanceProperty(currentItems).call(currentItems, function (node) {
+              return node.id === item.id ? _objectSpread(_objectSpread({}, node), {}, {
+                children: children,
+                hasLoadedChildren: true
+              }) : node;
+            });
+          });
+          setLoadingKeys(function (prev) {
+            var next = new _Set(prev);
+            next["delete"](item.id);
+            return next;
+          });
+        });
+      }
+    }));
+  };
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    as: "p"
+  }, "Expand a region to load its tenants asynchronously"), ___EmotionJSX(Tree, {
+    "aria-label": "Async regions",
+    items: items,
+    expandedKeys: expandedKeys,
+    onExpandedChange: handleExpandedChange,
+    renderEmptyState: function renderEmptyState() {
+      return ___EmotionJSX(Loader, {
+        "aria-label": "Loading items",
+        sx: {
+          p: 'sm'
+        }
+      });
+    }
+  }, _renderAsyncItem));
+};
+AsyncChildLoading.parameters = {
+  docs: {
+    description: {
+      story: 'Lazily loads children on expand: hook `onExpandedChange`, fetch the parent\'s children, then merge them into the `items` state. A `Loader` shows next to the expanding row and via `renderEmptyState` while items load, and `TreeLoadMoreItem` provides a "load more" affordance for the same pattern.'
+    }
+  }
+};
+var makeIsDescendant = function makeIsDescendant(tree) {
+  return function (key, ofKey) {
+    var node = tree.getItem(key);
+    while (node) {
+      if (node.key === ofKey) return true;
+      node = node.parentKey != null ? tree.getItem(node.parentKey) : undefined;
+    }
+    return false;
+  };
+};
+var dragInitialItems = [{
+  id: 'environments',
+  name: 'Environments',
+  children: [{
+    id: 'dev',
+    name: 'Development',
+    isDragDisabled: true
+  }, {
+    id: 'qa',
+    name: 'QA'
+  }]
+}, {
+  id: 'tenants',
+  name: 'Tenants',
+  children: [{
+    id: 'tenant-1',
+    name: 'Tenant 1'
+  }]
+}, {
+  id: 'shared-services',
+  name: 'Shared Services'
+}];
+export var DragAndDrop = function DragAndDrop() {
+  var initiallyExpandedKeys = ['environments', 'tenants'];
+  var tree = useTreeData({
+    initialItems: dragInitialItems,
+    getKey: function getKey(item) {
+      return item.id;
+    },
+    getChildren: function getChildren(item) {
+      var _item$children10;
+      return (_item$children10 = item.children) !== null && _item$children10 !== void 0 ? _item$children10 : [];
+    }
+  });
+  var isDescendant = makeIsDescendant(tree);
+  var _useTreeDragAndDrop = useTreeDragAndDrop({
+      getItems: function getItems(keys, items) {
+        return _mapInstanceProperty(items).call(items, function (item) {
+          return {
+            'text/plain': item.value.name
+          };
+        });
+      },
+      isDescendant: isDescendant,
+      isDisabledDropTarget: function isDisabledDropTarget(key) {
+        var _tree$getItem;
+        return Boolean((_tree$getItem = tree.getItem(key)) === null || _tree$getItem === void 0 ? void 0 : _tree$getItem.value.isDragDisabled);
+      },
+      onItemDrop: function onItemDrop(_ref6) {
+        var _context7;
+        var keys = _keysInstanceProperty(_ref6),
+          targetKey = _ref6.targetKey;
+        var targetNode = tree.getItem(targetKey);
+        var targetIndex = targetNode !== null && targetNode !== void 0 && targetNode.children ? targetNode.children.length : 0;
+        _forEachInstanceProperty(_context7 = _Array$from(keys)).call(_context7, function (key, index) {
+          tree.move(key, targetKey, targetIndex + index);
+        });
+      },
+      onReorder: function onReorder(_ref7) {
+        var keys = _keysInstanceProperty(_ref7),
+          targetKey = _ref7.targetKey,
+          dropPosition = _ref7.dropPosition;
+        if (dropPosition === 'before') {
+          tree.moveBefore(targetKey, keys);
+        } else {
+          tree.moveAfter(targetKey, keys);
+        }
+      }
+    }),
+    dragAndDropHooks = _useTreeDragAndDrop.dragAndDropHooks;
+  var _renderDragItem = function renderDragItem(item) {
+    var _item$children11, _item$children12;
+    return ___EmotionJSX(TreeItem, {
+      key: item.key,
+      id: item.key,
+      textValue: item.value.name,
+      isDisabled: item.value.isDragDisabled,
+      hasChildItems: Boolean((_item$children11 = item.children) === null || _item$children11 === void 0 ? void 0 : _item$children11.length)
+    }, ___EmotionJSX(TreeItemContent, null, item.value.name), (_item$children12 = item.children) === null || _item$children12 === void 0 ? void 0 : _mapInstanceProperty(_item$children12).call(_item$children12, _renderDragItem));
+  };
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    as: "p"
+  }, "Drag an item onto another to make it a child, or between siblings to reorder. Keyboard dragging works too: focus the drag handle, press Enter to start a drag session, arrow to a target, and Enter again to drop. Self-drops, descendant drops, and the disabled Development item are rejected."), ___EmotionJSX(Tree, {
+    "aria-label": "Draggable services",
+    selectionMode: "multiple",
+    items: tree.items,
+    dragAndDropHooks: dragAndDropHooks,
+    defaultExpandedKeys: initiallyExpandedKeys
+  }, function (item) {
+    return _renderDragItem(item);
+  }));
+};
+DragAndDrop.parameters = {
+  docs: {
+    description: {
+      story: 'Full drag-and-drop via `useTreeDragAndDrop`: `onItemDrop` re-parents items dropped onto a target, `onReorder` moves items before/after siblings (backed by `useTreeData`\'s `move`/`moveBefore`/`moveAfter`). Self-drops, descendant/cycle drops, and disabled targets are rejected automatically.'
+    }
+  }
+};
+export var DragAndDropReparentOnly = function DragAndDropReparentOnly() {
+  var initiallyExpandedKeys = ['environments', 'tenants'];
+  var tree = useTreeData({
+    initialItems: dragInitialItems,
+    getKey: function getKey(item) {
+      return item.id;
+    },
+    getChildren: function getChildren(item) {
+      var _item$children13;
+      return (_item$children13 = item.children) !== null && _item$children13 !== void 0 ? _item$children13 : [];
+    }
+  });
+  var isDescendant = makeIsDescendant(tree);
+
+  // No onReorder handler: before/after drops become no-ops, drop-on still re-parents.
+  var _useTreeDragAndDrop2 = useTreeDragAndDrop({
+      getItems: function getItems(keys, items) {
+        return _mapInstanceProperty(items).call(items, function (item) {
+          return {
+            'text/plain': item.value.name
+          };
+        });
+      },
+      isDescendant: isDescendant,
+      isDisabledDropTarget: function isDisabledDropTarget(key) {
+        var _tree$getItem2;
+        return Boolean((_tree$getItem2 = tree.getItem(key)) === null || _tree$getItem2 === void 0 ? void 0 : _tree$getItem2.value.isDragDisabled);
+      },
+      onItemDrop: function onItemDrop(_ref8) {
+        var _context8;
+        var keysToMove = _keysInstanceProperty(_ref8),
+          targetKey = _ref8.targetKey;
+        var targetNode = tree.getItem(targetKey);
+        var targetIndex = targetNode !== null && targetNode !== void 0 && targetNode.children ? targetNode.children.length : 0;
+        _forEachInstanceProperty(_context8 = _Array$from(keysToMove)).call(_context8, function (key, index) {
+          tree.move(key, targetKey, targetIndex + index);
+        });
+      }
+    }),
+    dragAndDropHooks = _useTreeDragAndDrop2.dragAndDropHooks;
+  var _renderDragItem2 = function renderDragItem(item) {
+    var _item$children14, _item$children15;
+    return ___EmotionJSX(TreeItem, {
+      key: item.key,
+      id: item.key,
+      textValue: item.value.name,
+      isDisabled: item.value.isDragDisabled,
+      hasChildItems: Boolean((_item$children14 = item.children) === null || _item$children14 === void 0 ? void 0 : _item$children14.length)
+    }, ___EmotionJSX(TreeItemContent, null, item.value.name), (_item$children15 = item.children) === null || _item$children15 === void 0 ? void 0 : _mapInstanceProperty(_item$children15).call(_item$children15, _renderDragItem2));
+  };
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    as: "p"
+  }, "Drop-on only: dragging an item onto another re-parents it. Sibling reordering is disabled \u2014 no", ' ', ___EmotionJSX("code", null, "onReorder"), ' ', "handler is supplied, so dropping between siblings does nothing. Keyboard flow: focus the drag handle, Enter to start the drag session, arrows to a target (only drop-on targets are offered), Enter to drop. Self-drops, descendant drops, and the disabled Development item are rejected."), ___EmotionJSX(Tree, {
+    "aria-label": "Draggable services (re-parent only)",
+    selectionMode: "multiple",
+    items: tree.items,
+    dragAndDropHooks: dragAndDropHooks,
+    defaultExpandedKeys: initiallyExpandedKeys
+  }, function (item) {
+    return _renderDragItem2(item);
+  }));
+};
+DragAndDropReparentOnly.parameters = {
+  docs: {
+    description: {
+      story: 'Same setup as DragAndDrop but without an `onReorder` handler — sibling reordering becomes a no-op, so only drop-on (re-parent) gestures update the tree. Omit `onReorder` when your data model only supports nesting.'
+    }
+  }
+};