@razorpay/blade 12.110.0 → 12.119.1

package/build/lib/web/development/components/TreeView/TreeView.web.js

@@ -0,0 +1,696 @@
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import React__default from 'react';
+import styled from 'styled-components';
+import { componentIds } from './componentIds.js';
+import { TreeViewContext } from './useTreeView.js';
+import { getTreeViewProperties, getSelectedLeafValues, getSelectedGroups, getSelectionOnNodeToggle, getSelectionAfterLoad, getVisibleOptionIndices, getBranchSelectionState, getDisplayOverride, getVisibleValues } from './treeViewUtils.js';
+import { useTreeViewMountScopeRef, TreeViewMountScopeContext } from './TreeViewAnimator.web.js';
+import { useDropdown } from '../Dropdown/useDropdown.js';
+import { useBottomSheetContext } from '../BottomSheet/BottomSheetContext.js';
+import { getBaseListBoxWrapperStyles } from '../ActionList/styles/getBaseListBoxWrapperStyles.js';
+import '../Box/BaseBox/index.js';
+import '../../utils/assignWithoutSideEffects/index.js';
+import '../../utils/makeAccessible/index.js';
+import '../../utils/metaAttribute/index.js';
+import '../../utils/makeAnalyticsAttribute/index.js';
+import '../../utils/logger/index.js';
+import { useId } from '../../utils/useId.js';
+import { jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { throwBladeError, logger } from '../../utils/logger/logger.js';
+import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
+import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
+import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
+import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
+import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+
+var _excluded = ["children", "selectionType", "value", "defaultValue", "onChange", "name", "testID"];
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(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 t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var StyledTreeViewListBoxWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
+  displayName: "TreeViewweb__StyledTreeViewListBoxWrapper",
+  componentId: "kz3iog-0"
+})(function (props) {
+  return _objectSpread({
+    overflowY: 'auto'
+  }, getBaseListBoxWrapperStyles({
+    theme: props.theme,
+    isInBottomSheet: false
+  }));
+});
+var _TreeView = function _TreeView(_ref) {
+  var _dropdown$selectionTy, _visibleValues$;
+  var children = _ref.children,
+    selectionType = _ref.selectionType,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    name = _ref.name,
+    testID = _ref.testID,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var dropdown = useDropdown();
+  var _useBottomSheetContex = useBottomSheetContext(),
+    isInBottomSheet = _useBottomSheetContex.isInBottomSheet;
+  var isInsideDropdown = dropdown.dropdownBaseId !== '';
+  var baseId = useId('treeview');
+  if (true && isInBottomSheet) {
+    // §6.9: BottomSheet is explicitly out of scope for TreeView v1
+    throwBladeError({
+      message: 'TreeView is not supported inside BottomSheet',
+      moduleName: 'TreeView'
+    });
+  }
+  React__default.useEffect(function () {
+    if (true && isInsideDropdown) {
+      if (value !== undefined || defaultValue !== undefined || onChange !== undefined) {
+        logger({
+          type: 'warn',
+          moduleName: 'TreeView',
+          message: 'value, defaultValue, and onChange props of TreeView are ignored inside Dropdown. Use them on the Dropdown trigger (SelectInput / FilterChipSelectInput) instead'
+        });
+      }
+      if (selectionType !== undefined && dropdown.selectionType !== undefined && selectionType !== dropdown.selectionType) {
+        logger({
+          type: 'warn',
+          moduleName: 'TreeView',
+          message: "selectionType=\"".concat(selectionType, "\" on TreeView conflicts with selectionType=\"").concat(dropdown.selectionType, "\" on Dropdown. Dropdown's selectionType wins")
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isInsideDropdown]);
+
+  // §2.1 dual-mode rule: inside Dropdown, selection is owned by Dropdown state and its trigger
+  var effectiveSelectionType = isInsideDropdown ? (_dropdown$selectionTy = dropdown.selectionType) !== null && _dropdown$selectionTy !== void 0 ? _dropdown$selectionTy : 'single' : selectionType !== null && selectionType !== void 0 ? selectionType : 'single';
+  var properties = React__default.useMemo(function () {
+    return getTreeViewProperties(children);
+  }, [children]);
+  var orderedNodes = properties.orderedNodes,
+    nodeMap = properties.nodeMap,
+    rootValues = properties.rootValues,
+    options = properties.options;
+
+  // ---------------- expansion ----------------
+  var _React$useState = React__default.useState(function () {
+      return new Set(properties.orderedNodes.filter(function (node) {
+        return node.kind === 'item' && node.isBranch && node.defaultIsExpanded;
+      }).map(function (node) {
+        return node.value;
+      }));
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    uncontrolledExpandedValues = _React$useState2[0],
+    setUncontrolledExpandedValues = _React$useState2[1];
+  var expandedValues = React__default.useMemo(function () {
+    var merged = new Set();
+    var _iterator = _createForOfIteratorHelper(orderedNodes),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _node$controlledIsExp;
+        var node = _step.value;
+        if (!node.isBranch) {
+          continue;
+        }
+        var isExpanded = (_node$controlledIsExp = node.controlledIsExpanded) !== null && _node$controlledIsExp !== void 0 ? _node$controlledIsExp : uncontrolledExpandedValues.has(node.value);
+        if (isExpanded) {
+          merged.add(node.value);
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return merged;
+  }, [orderedNodes, uncontrolledExpandedValues]);
+  var onNodeExpandToggle = function onNodeExpandToggle(nodeValue) {
+    var _node$onExpandChange;
+    var node = nodeMap[nodeValue];
+    if (!(node !== null && node !== void 0 && node.isBranch) || node.isDisabled) {
+      return;
+    }
+    var isExpanded = expandedValues.has(nodeValue);
+    if (node.controlledIsExpanded === undefined) {
+      setUncontrolledExpandedValues(function (previous) {
+        var next = new Set(previous);
+        if (isExpanded) {
+          next["delete"](nodeValue);
+        } else {
+          next.add(nodeValue);
+        }
+        return next;
+      });
+    }
+    (_node$onExpandChange = node.onExpandChange) === null || _node$onExpandChange === void 0 || _node$onExpandChange.call(node, {
+      isExpanded: !isExpanded
+    });
+  };
+
+  // ---------------- selection (standalone: B11 - a Set of selected leaf values) ----------------
+  var isControlledSelection = !isInsideDropdown && value !== undefined;
+  var _React$useState3 = React__default.useState(function () {
+      return new Set(defaultValue !== null && defaultValue !== void 0 ? defaultValue : []);
+    }),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    uncontrolledSelectedValues = _React$useState4[0],
+    setUncontrolledSelectedValues = _React$useState4[1];
+  var standaloneSelectedValues = React__default.useMemo(function () {
+    return isControlledSelection ? new Set(value) : uncontrolledSelectedValues;
+  }, [isControlledSelection, value, uncontrolledSelectedValues]);
+
+  // dropdown mode: B11 - no TreeView-owned selection state, everything derives from Dropdown's indices
+  var dropdownSelectedValues = React__default.useMemo(function () {
+    var selected = new Set();
+    if (!isInsideDropdown) {
+      return selected;
+    }
+    var _iterator2 = _createForOfIteratorHelper(dropdown.selectedIndices),
+      _step2;
+    try {
+      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+        var _dropdown$options$sel;
+        var selectedIndex = _step2.value;
+        var optionValue = (_dropdown$options$sel = dropdown.options[selectedIndex]) === null || _dropdown$options$sel === void 0 ? void 0 : _dropdown$options$sel.value;
+        if (optionValue !== undefined) {
+          selected.add(optionValue);
+        }
+      }
+    } catch (err) {
+      _iterator2.e(err);
+    } finally {
+      _iterator2.f();
+    }
+    return selected;
+  }, [isInsideDropdown, dropdown.selectedIndices, dropdown.options]);
+  var selectedValuesSet = isInsideDropdown ? dropdownSelectedValues : standaloneSelectedValues;
+  var emitStandaloneChange = function emitStandaloneChange(next) {
+    if (effectiveSelectionType === 'single') {
+      onChange === null || onChange === void 0 || onChange({
+        name: name,
+        values: _toConsumableArray(next),
+        selectedGroups: []
+      });
+      return;
+    }
+    onChange === null || onChange === void 0 || onChange({
+      name: name,
+      values: getSelectedLeafValues(orderedNodes, next),
+      selectedGroups: getSelectedGroups({
+        rootValues: rootValues,
+        nodeMap: nodeMap,
+        selectedValues: next
+      })
+    });
+  };
+  var onNodeSelect = function onNodeSelect(nodeValue) {
+    var node = nodeMap[nodeValue];
+    if (!node || node.isDisabled || node.kind === 'loadMore') {
+      return;
+    }
+
+    // a branch that opted out of selection toggles expansion instead (row click / Enter / Space)
+    if (node.isBranch && !node.isSelectable) {
+      onNodeExpandToggle(nodeValue);
+      return;
+    }
+    var next;
+    if (effectiveSelectionType === 'single') {
+      // radio semantics (B1) - reselecting the current selection is a no-op
+      if (standaloneSelectedValues.has(nodeValue) && standaloneSelectedValues.size === 1) {
+        return;
+      }
+      next = new Set([nodeValue]);
+    } else {
+      if (node.isBranch && node.selectableLeafValues.length === 0) {
+        return;
+      }
+      next = getSelectionOnNodeToggle({
+        node: node,
+        selectedValues: standaloneSelectedValues
+      });
+    }
+    if (!isControlledSelection) {
+      setUncontrolledSelectedValues(next);
+    }
+    emitStandaloneChange(next);
+  };
+
+  // ---------------- dropdown mode: selection routing (§6.2) ----------------
+  var toggleBranchInDropdown = function toggleBranchInDropdown(node) {
+    // multiple mode invariant: branch indices never enter selectedIndices
+    var leafIndices = node.selectableLeafValues.map(function (leafValue) {
+      var _nodeMap$leafValue$op, _nodeMap$leafValue;
+      return (_nodeMap$leafValue$op = (_nodeMap$leafValue = nodeMap[leafValue]) === null || _nodeMap$leafValue === void 0 ? void 0 : _nodeMap$leafValue.optionIndex) !== null && _nodeMap$leafValue$op !== void 0 ? _nodeMap$leafValue$op : -1;
+    }).filter(function (optionIndex) {
+      return optionIndex >= 0;
+    });
+    if (leafIndices.length === 0) {
+      return;
+    }
+    var areAllSelected = leafIndices.every(function (optionIndex) {
+      return dropdown.selectedIndices.includes(optionIndex);
+    });
+    dropdown.selectOptionsBatch(leafIndices, areAllSelected ? 'deselect' : 'select');
+  };
+  var onDropdownNodeClick = function onDropdownNodeClick(event, clickedValue) {
+    var node = nodeMap[clickedValue];
+    if (!node || node.isDisabled || node.optionIndex < 0) {
+      return;
+    }
+    if (node.kind === 'loadMore') {
+      var _options$node$optionI, _options$node$optionI2, _dropdown$triggererRe;
+      (_options$node$optionI = (_options$node$optionI2 = options[node.optionIndex]).onClickTrigger) === null || _options$node$optionI === void 0 || _options$node$optionI.call(_options$node$optionI2, true);
+      dropdown.setActiveIndex(node.optionIndex);
+      (_dropdown$triggererRe = dropdown.triggererRef.current) === null || _dropdown$triggererRe === void 0 || _dropdown$triggererRe.focus();
+      return;
+    }
+
+    // non-selectable branch: toggle expansion, keep the overlay open, never enter selectedIndices
+    if (node.isBranch && !node.isSelectable) {
+      var _dropdown$triggererRe2;
+      onNodeExpandToggle(node.value);
+      dropdown.setActiveIndex(node.optionIndex);
+      (_dropdown$triggererRe2 = dropdown.triggererRef.current) === null || _dropdown$triggererRe2 === void 0 || _dropdown$triggererRe2.focus();
+      return;
+    }
+    if (effectiveSelectionType === 'multiple' && node.isBranch) {
+      var _dropdown$triggererRe3;
+      toggleBranchInDropdown(node);
+      dropdown.setActiveIndex(node.optionIndex);
+      (_dropdown$triggererRe3 = dropdown.triggererRef.current) === null || _dropdown$triggererRe3 === void 0 || _dropdown$triggererRe3.focus();
+      return;
+    }
+
+    // leaf click (and branch click in single mode) goes through the standard path
+    dropdown.onOptionClick(event, node.optionIndex);
+  };
+
+  // ---------------- registration (§6.1) + uncontrolled remap + B6 inheritance ----------------
+  var previousPropertiesRef = React__default.useRef(properties);
+  React__default.useEffect(function () {
+    var previousProperties = previousPropertiesRef.current;
+    previousPropertiesRef.current = properties;
+    if (isInsideDropdown) {
+      dropdown.setOptions(options);
+      if (previousProperties !== properties && !dropdown.isControlled) {
+        // indices are positional: when the registered list changes (async children, loadMore),
+        // remap uncontrolled selection by value and apply B6 inheritance.
+        // Controlled mode re-syncs through useControlledDropdownInput on [value, options] - not duplicated here
+        var previousSelectedValues = new Set(dropdown.selectedIndices.map(function (selectedIndex) {
+          var _previousProperties$o;
+          return (_previousProperties$o = previousProperties.options[selectedIndex]) === null || _previousProperties$o === void 0 ? void 0 : _previousProperties$o.value;
+        }).filter(function (optionValue) {
+          return optionValue !== undefined;
+        }));
+        var inherited = getSelectionAfterLoad({
+          previousNodeMap: previousProperties.nodeMap,
+          nodeMap: nodeMap,
+          orderedNodes: orderedNodes,
+          selectedValues: previousSelectedValues
+        });
+        var nextIndices = _toConsumableArray(inherited).map(function (selectedValue) {
+          return options.findIndex(function (option) {
+            return option.value === selectedValue;
+          });
+        }).filter(function (optionIndex) {
+          return optionIndex >= 0;
+        });
+        var hasChanged = nextIndices.length !== dropdown.selectedIndices.length || nextIndices.some(function (optionIndex, i) {
+          return optionIndex !== dropdown.selectedIndices[i];
+        });
+        if (hasChanged) {
+          dropdown.setSelectedIndices(nextIndices);
+          if (inherited.size !== previousSelectedValues.size) {
+            // selection actually grew through inheritance - let the trigger fire onChange
+            dropdown.setChangeCallbackTriggerer(dropdown.changeCallbackTriggerer + 1);
+          }
+        }
+      }
+      return;
+    }
+
+    // standalone B6 inheritance (uncontrolled multiple selection only;
+    // in controlled mode the consumer owns `value` and can react to loads themselves)
+    if (previousProperties !== properties && !isControlledSelection && effectiveSelectionType === 'multiple') {
+      var _inherited = getSelectionAfterLoad({
+        previousNodeMap: previousProperties.nodeMap,
+        nodeMap: nodeMap,
+        orderedNodes: orderedNodes,
+        selectedValues: uncontrolledSelectedValues
+      });
+      if (_inherited.size !== uncontrolledSelectedValues.size) {
+        setUncontrolledSelectedValues(_inherited);
+        emitStandaloneChange(_inherited);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [properties]);
+
+  // ---------------- dropdown keyboard controller (§6.4) ----------------
+  var getNodeAtIndex = function getNodeAtIndex(optionIndex) {
+    var _options$optionIndex;
+    var optionValue = (_options$optionIndex = options[optionIndex]) === null || _options$optionIndex === void 0 ? void 0 : _options$optionIndex.value;
+    return optionValue === undefined ? undefined : nodeMap[optionValue];
+  };
+  if (isInsideDropdown && dropdown.treeViewControllerRef) {
+    // Published during render (not in an effect): the trigger's effects
+    // (e.g. useControlledDropdownInput's onChange effect reading getSelectedGroups) run
+    // before this component's effects would re-assign the controller, so an effect-based
+    // assignment with a cleanup leaves a null window on every commit
+    dropdown.treeViewControllerRef.current = {
+      getVisibleOptionIndices: function getVisibleOptionIndices$1() {
+        return getVisibleOptionIndices({
+          orderedNodes: orderedNodes,
+          nodeMap: nodeMap,
+          expandedValues: expandedValues
+        });
+      },
+      onArrowRightKeydown: function onArrowRightKeydown(currentActiveIndex) {
+        var node = getNodeAtIndex(currentActiveIndex);
+        if (!(node !== null && node !== void 0 && node.isBranch)) {
+          return;
+        }
+        if (!expandedValues.has(node.value)) {
+          onNodeExpandToggle(node.value);
+          return;
+        }
+        // already expanded: move to the first traversable child
+        var firstChildIndex = node.childValues.map(function (childValue) {
+          return nodeMap[childValue];
+        }).filter(function (childNode) {
+          return childNode && !childNode.isDisabled;
+        }).map(function (childNode) {
+          return childNode.optionIndex;
+        }).find(function (optionIndex) {
+          return optionIndex >= 0;
+        });
+        if (firstChildIndex !== undefined) {
+          dropdown.setActiveIndex(firstChildIndex);
+        }
+      },
+      onArrowLeftKeydown: function onArrowLeftKeydown(currentActiveIndex) {
+        var node = getNodeAtIndex(currentActiveIndex);
+        if (!node) {
+          return;
+        }
+        if (node.isBranch && expandedValues.has(node.value)) {
+          onNodeExpandToggle(node.value);
+          return;
+        }
+        if (node.parentValue !== null) {
+          var _nodeMap$node$parentV, _nodeMap$node$parentV2;
+          var parentIndex = (_nodeMap$node$parentV = (_nodeMap$node$parentV2 = nodeMap[node.parentValue]) === null || _nodeMap$node$parentV2 === void 0 ? void 0 : _nodeMap$node$parentV2.optionIndex) !== null && _nodeMap$node$parentV !== void 0 ? _nodeMap$node$parentV : -1;
+          if (parentIndex >= 0) {
+            dropdown.setActiveIndex(parentIndex);
+          }
+        }
+      },
+      handleOptionSelect: function handleOptionSelect(optionIndex) {
+        var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+          key = _ref2.key;
+        var node = getNodeAtIndex(optionIndex);
+        if (!node) {
+          return false;
+        }
+        if (node.kind === 'loadMore') {
+          // B7: Enter activates, Space is a no-op
+          if (key !== ' ') {
+            var _options$optionIndex$, _options$optionIndex2;
+            (_options$optionIndex$ = (_options$optionIndex2 = options[optionIndex]).onClickTrigger) === null || _options$optionIndex$ === void 0 || _options$optionIndex$.call(_options$optionIndex2, true);
+          }
+          return true;
+        }
+        if (node.isBranch && !node.isSelectable) {
+          var _options$optionIndex$2, _options$optionIndex3;
+          // non-selectable branch: Enter/Space toggle expansion, never select
+          onNodeExpandToggle(node.value);
+          (_options$optionIndex$2 = (_options$optionIndex3 = options[optionIndex]).onClickTrigger) === null || _options$optionIndex$2 === void 0 || _options$optionIndex$2.call(_options$optionIndex3, false);
+          return true;
+        }
+        if (effectiveSelectionType === 'multiple' && node.isBranch) {
+          var _options$optionIndex$3, _options$optionIndex4;
+          // §6.2: branch toggle routes through the batch setter - exactly one onChange
+          var branchSelected = getBranchSelectionState(node, selectedValuesSet) === 'all';
+          toggleBranchInDropdown(node);
+          (_options$optionIndex$3 = (_options$optionIndex4 = options[optionIndex]).onClickTrigger) === null || _options$optionIndex$3 === void 0 || _options$optionIndex$3.call(_options$optionIndex4, !branchSelected);
+          return true;
+        }
+        // leaf (and branch in single mode): default selectOption path
+        return false;
+      },
+      getSelectedGroups: function getSelectedGroups$1(selectedIndices) {
+        var selected = new Set(selectedIndices.map(function (selectedIndex) {
+          var _options$selectedInde;
+          return (_options$selectedInde = options[selectedIndex]) === null || _options$selectedInde === void 0 ? void 0 : _options$selectedInde.value;
+        }).filter(function (optionValue) {
+          return optionValue !== undefined;
+        }));
+        return getSelectedGroups({
+          rootValues: rootValues,
+          nodeMap: nodeMap,
+          selectedValues: selected
+        });
+      },
+      getDisplayOverride: function getDisplayOverride$1(selectedIndices) {
+        var selected = new Set(selectedIndices.map(function (selectedIndex) {
+          var _options$selectedInde2;
+          return (_options$selectedInde2 = options[selectedIndex]) === null || _options$selectedInde2 === void 0 ? void 0 : _options$selectedInde2.value;
+        }).filter(function (optionValue) {
+          return optionValue !== undefined;
+        }));
+        return getDisplayOverride({
+          orderedNodes: orderedNodes,
+          rootValues: rootValues,
+          nodeMap: nodeMap,
+          selectedValues: selected
+        });
+      }
+    };
+  }
+  var treeViewControllerRef = dropdown.treeViewControllerRef;
+  React__default.useEffect(function () {
+    return function () {
+      if (treeViewControllerRef) {
+        treeViewControllerRef.current = null;
+      }
+    };
+  }, [treeViewControllerRef]);
+
+  // ---------------- focus management ----------------
+  var rowRefs = React__default.useRef({});
+  var registerRowRef = function registerRowRef(nodeValue, element) {
+    rowRefs.current[nodeValue] = element;
+  };
+  var _React$useState5 = React__default.useState(null),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    focusedValue = _React$useState6[0],
+    setFocusedValue = _React$useState6[1];
+  var visibleValues = React__default.useMemo(function () {
+    return getVisibleValues({
+      orderedNodes: orderedNodes,
+      nodeMap: nodeMap,
+      expandedValues: expandedValues
+    });
+  }, [orderedNodes, nodeMap, expandedValues]);
+  // roving tabindex (standalone): the focused row is tabbable, falling back to the first visible row
+  var tabbableValue = isInsideDropdown ? null : focusedValue && visibleValues.includes(focusedValue) ? focusedValue : (_visibleValues$ = visibleValues[0]) !== null && _visibleValues$ !== void 0 ? _visibleValues$ : null;
+
+  // dropdown mode: keep the active row scrolled into view (focus stays on the trigger)
+  React__default.useEffect(function () {
+    var _options$dropdown$act;
+    if (!isInsideDropdown || dropdown.activeIndex < 0) {
+      return;
+    }
+    var activeValue = (_options$dropdown$act = options[dropdown.activeIndex]) === null || _options$dropdown$act === void 0 ? void 0 : _options$dropdown$act.value;
+    if (activeValue !== undefined) {
+      var _rowRefs$current$acti, _rowRefs$current$acti2;
+      (_rowRefs$current$acti = rowRefs.current[activeValue]) === null || _rowRefs$current$acti === void 0 || (_rowRefs$current$acti2 = _rowRefs$current$acti.scrollIntoView) === null || _rowRefs$current$acti2 === void 0 || _rowRefs$current$acti2.call(_rowRefs$current$acti, {
+        block: 'nearest'
+      });
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dropdown.activeIndex]);
+
+  // ---------------- standalone keyboard map (§5) ----------------
+  var handleKeyDown = function handleKeyDown(event) {
+    var _closest, _ref3;
+    if (isInsideDropdown) {
+      return;
+    }
+    var rowElement = (_closest = (_ref3 = event.target).closest) === null || _closest === void 0 ? void 0 : _closest.call(_ref3, '[data-tree-node-value]');
+    var currentValue = rowElement === null || rowElement === void 0 ? void 0 : rowElement.getAttribute('data-tree-node-value');
+    if (!currentValue) {
+      return;
+    }
+    var node = nodeMap[currentValue];
+    if (!node) {
+      return;
+    }
+    var currentVisibleIndex = visibleValues.indexOf(currentValue);
+    var focusRow = function focusRow(nodeValue) {
+      if (nodeValue !== undefined) {
+        var _rowRefs$current$node;
+        (_rowRefs$current$node = rowRefs.current[nodeValue]) === null || _rowRefs$current$node === void 0 || _rowRefs$current$node.focus();
+        setFocusedValue(nodeValue);
+      }
+    };
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        focusRow(visibleValues[currentVisibleIndex + 1]);
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        focusRow(visibleValues[currentVisibleIndex - 1]);
+        break;
+      case 'Home':
+        event.preventDefault();
+        focusRow(visibleValues[0]);
+        break;
+      case 'End':
+        event.preventDefault();
+        focusRow(visibleValues[visibleValues.length - 1]);
+        break;
+      case 'ArrowRight':
+        event.preventDefault();
+        if (!node.isBranch) {
+          break;
+        }
+        if (!expandedValues.has(currentValue)) {
+          onNodeExpandToggle(currentValue);
+        } else {
+          focusRow(node.childValues.find(function (childValue) {
+            return visibleValues.includes(childValue);
+          }));
+        }
+        break;
+      case 'ArrowLeft':
+        event.preventDefault();
+        if (node.isBranch && expandedValues.has(currentValue)) {
+          onNodeExpandToggle(currentValue);
+        } else if (node.parentValue !== null) {
+          focusRow(node.parentValue);
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (node.kind === 'loadMore') {
+          if (node.optionIndex >= 0) {
+            var _options$node$optionI3, _options$node$optionI4;
+            (_options$node$optionI3 = (_options$node$optionI4 = options[node.optionIndex]).onClickTrigger) === null || _options$node$optionI3 === void 0 || _options$node$optionI3.call(_options$node$optionI4, true);
+          }
+          break;
+        }
+        {
+          var isNodeSelected = node.isSelectable && (effectiveSelectionType === 'multiple' ? node.isBranch ? getBranchSelectionState(node, selectedValuesSet) === 'all' : selectedValuesSet.has(currentValue) : selectedValuesSet.has(currentValue));
+          onNodeSelect(currentValue);
+          if (node.optionIndex >= 0) {
+            var _options$node$optionI5, _options$node$optionI6;
+            (_options$node$optionI5 = (_options$node$optionI6 = options[node.optionIndex]).onClickTrigger) === null || _options$node$optionI5 === void 0 || _options$node$optionI5.call(_options$node$optionI6, isNodeSelected);
+          }
+        }
+        break;
+      case ' ':
+        event.preventDefault();
+        // B7: Space is a no-op on LoadMore
+        if (node.kind === 'loadMore') {
+          break;
+        }
+        {
+          var _isNodeSelected = node.isSelectable && (effectiveSelectionType === 'multiple' ? node.isBranch ? getBranchSelectionState(node, selectedValuesSet) === 'all' : selectedValuesSet.has(currentValue) : selectedValuesSet.has(currentValue));
+          onNodeSelect(currentValue);
+          if (node.optionIndex >= 0) {
+            var _options$node$optionI7, _options$node$optionI8;
+            (_options$node$optionI7 = (_options$node$optionI8 = options[node.optionIndex]).onClickTrigger) === null || _options$node$optionI7 === void 0 || _options$node$optionI7.call(_options$node$optionI8, _isNodeSelected);
+          }
+        }
+        break;
+      default:
+        break;
+    }
+  };
+
+  // ---------------- context ----------------
+  var contextValue = React__default.useMemo(function () {
+    return {
+      selectionType: effectiveSelectionType,
+      isInsideDropdown: isInsideDropdown,
+      baseId: baseId,
+      nodeMap: nodeMap,
+      selectedValuesSet: selectedValuesSet,
+      expandedValues: expandedValues,
+      tabbableValue: tabbableValue,
+      onNodeSelect: onNodeSelect,
+      onNodeExpandToggle: onNodeExpandToggle,
+      onDropdownNodeClick: onDropdownNodeClick,
+      registerRowRef: registerRowRef,
+      setFocusedValue: setFocusedValue
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [effectiveSelectionType, isInsideDropdown, baseId, nodeMap, selectedValuesSet, expandedValues, tabbableValue, dropdown.selectedIndices, dropdown.activeIndex, dropdown.isKeydownPressed]);
+
+  // root mount scope: rows appended at the root after the initial mount
+  // (e.g. through a root-level TreeViewLoadMore) animate their own mount
+  var isTreeFirstRenderRef = useTreeViewMountScopeRef();
+  var treeContent = /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
+    id: isInsideDropdown ? "".concat(dropdown.dropdownBaseId, "-actionlist") : undefined,
+    onKeyDown: handleKeyDown
+  }, makeAccessible({
+    role: 'tree',
+    multiSelectable: effectiveSelectionType === 'multiple' ? true : undefined,
+    labelledBy: isInsideDropdown ? "".concat(dropdown.dropdownBaseId, "-label") : undefined
+  })), {}, {
+    children: /*#__PURE__*/jsx(TreeViewMountScopeContext.Provider, {
+      value: isTreeFirstRenderRef,
+      children: children
+    })
+  }));
+  return /*#__PURE__*/jsx(TreeViewContext.Provider, {
+    value: contextValue,
+    children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
+      name: MetaConstants.TreeView,
+      testID: testID
+    })), makeAnalyticsAttribute(rest)), {}, {
+      children: isInsideDropdown ? /*#__PURE__*/jsx(StyledTreeViewListBoxWrapper, {
+        children: treeContent
+      }) : treeContent
+    }))
+  });
+};
+
+/**
+ * ### TreeView
+ *
+ * Hierarchical list of expandable, selectable items. Works standalone on a page,
+ * or inside `Dropdown` (in place of `ActionList`) where selection is controlled
+ * through the trigger's `value` / `onChange` (SelectInput, FilterChipSelectInput).
+ *
+ * #### Usage
+ *
+ * ```jsx
+ * <TreeView selectionType="multiple" onChange={({ values, selectedGroups }) => {}}>
+ *   <TreeViewItem title="India" value="india">
+ *     <TreeViewItem title="Karnataka" value="karnataka">
+ *       <TreeViewItem title="Bengaluru" value="bengaluru" />
+ *       <TreeViewItem title="Mysuru" value="mysuru" />
+ *     </TreeViewItem>
+ *     <TreeViewItem title="Goa" value="goa" />
+ *   </TreeViewItem>
+ * </TreeView>
+ * ```
+ */
+var TreeView = /*#__PURE__*/assignWithoutSideEffects(_TreeView, {
+  componentId: componentIds.TreeView,
+  displayName: componentIds.TreeView
+});
+
+export { TreeView };
+//# sourceMappingURL=TreeView.web.js.map