@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

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

@@ -1,775 +0,0 @@
-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.'
-    }
-  }
-};