@fluentui/react-tree 9.0.0-beta.5 → 9.0.0-beta.6

package/lib-commonjs/components/TreeItem/TreeItem.types.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens_1","require"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/TreeItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, ExtractSlotProps, Slot } from '@fluentui/react-utilities';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport * as React from 'react';\n\nexport type TreeItemCSSProperties = React.CSSProperties & { [treeItemLevelToken]?: string | number };\n\nexport type TreeItemSlots = {\n  root: Slot<ExtractSlotProps<Slot<'div'> & { style?: TreeItemCSSProperties }>>;\n  content: NonNullable<Slot<'div'>>;\n  subtree?: Slot<'span'>;\n  /**\n   * Expand icon slot,\n   * by default renders a chevron icon to indicate opening and closing\n   */\n  expandIcon?: Slot<'span'>;\n  /**\n   * Actions slot that renders on the end of tree item\n   * when the item is hovered/focused\n   */\n  actions?: Slot<'span'>;\n};\n\nexport type TreeItemContextValues = {\n  treeItem: TreeItemContextValue;\n  button: ButtonContextValue;\n};\n\n/**\n * TreeItem Props\n */\nexport type TreeItemProps = ComponentProps<Partial<TreeItemSlots>> & {\n  /**\n   * If a TreeItem is a leaf, it'll not present the `expandIcon` slot by default.\n   * This attribute is used to force the decision if a TreeItem is a leaf or not. By not providing this property\n   * this will be inferred by the presence of a subtree as part of the TreeItem children.\n   */\n  leaf?: boolean;\n};\n\n/**\n * State used in rendering TreeItem\n */\nexport type TreeItemState = ComponentState<TreeItemSlots> & {\n  open: boolean;\n  isLeaf: boolean;\n  level: number;\n  /**\n   * By design, a button included on the actions slot should be small\n   */\n  buttonSize: 'small';\n  isActionsVisible: boolean;\n};\n"],"mappings":";;;;;AAGA,MAAAA,QAAA,gBAAAC,OAAA"}
+{"version":3,"sources":["../../../lib/components/TreeItem/TreeItem.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=TreeItem.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,0CAA0C"}

package/lib-commonjs/components/TreeItem/index.js

@@ -1,12 +1,13 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-const tslib_1 = /*#__PURE__*/require("tslib");
-tslib_1.__exportStar(require("./TreeItem"), exports);
-tslib_1.__exportStar(require("./TreeItem.types"), exports);
-tslib_1.__exportStar(require("./renderTreeItem"), exports);
-tslib_1.__exportStar(require("./useTreeItem"), exports);
-tslib_1.__exportStar(require("./useTreeItemStyles"), exports);
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./TreeItem"), exports);
+_exportStar(require("./TreeItem.types"), exports);
+_exportStar(require("./renderTreeItem"), exports);
+_exportStar(require("./useTreeItem"), exports);
+_exportStar(require("./useTreeItemStyles"), exports);
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

package/lib-commonjs/components/TreeItem/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/index.ts"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA"}
+{"version":3,"sources":["../../../lib/components/TreeItem/index.js"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/components/TreeItem/renderTreeItem.js

@@ -1,36 +1,23 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "renderTreeItem_unstable", {
+    enumerable: true,
+    get: ()=>renderTreeItem_unstable
 });
-exports.renderTreeItem_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const contexts_1 = /*#__PURE__*/require("../../contexts");
-const react_button_1 = /*#__PURE__*/require("@fluentui/react-button");
-/**
- * Render the final JSX of TreeItem
- */
-const renderTreeItem_unstable = (state, contextValues) => {
-  const {
-    slots,
-    slotProps
-  } = react_utilities_1.getSlots(state);
-  return React.createElement(contexts_1.TreeItemProvider, {
-    value: contextValues.treeItem
-  }, React.createElement(slots.root, {
-    ...slotProps.root
-  }, React.createElement(slots.content, {
-    ...slotProps.content
-  }, slots.expandIcon && React.createElement(slots.expandIcon, {
-    ...slotProps.expandIcon
-  }), slotProps.content.children, React.createElement(react_button_1.ButtonContextProvider, {
-    value: contextValues.button
-  }, slots.actions && React.createElement(slots.actions, {
-    ...slotProps.actions
-  }))), state.open && slots.subtree && React.createElement(slots.subtree, {
-    ...slotProps.subtree
-  })));
-};
-exports.renderTreeItem_unstable = renderTreeItem_unstable;
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactUtilities = require("@fluentui/react-utilities");
+const _contexts = require("../../contexts");
+const _reactButton = require("@fluentui/react-button");
+const renderTreeItem_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
+    return /*#__PURE__*/ _react.createElement(_contexts.TreeItemProvider, {
+        value: contextValues.treeItem
+    }, /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, /*#__PURE__*/ _react.createElement(slots.content, slotProps.content, slots.expandIcon && /*#__PURE__*/ _react.createElement(slots.expandIcon, slotProps.expandIcon), slotProps.content.children, /*#__PURE__*/ _react.createElement(_reactButton.ButtonContextProvider, {
+        value: contextValues.button
+    }, slots.actions && /*#__PURE__*/ _react.createElement(slots.actions, slotProps.actions))), state.open && slots.subtree && /*#__PURE__*/ _react.createElement(slots.subtree, slotProps.subtree)));
+}; //# sourceMappingURL=renderTreeItem.js.map
+
 //# sourceMappingURL=renderTreeItem.js.map

package/lib-commonjs/components/TreeItem/renderTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","require","react_utilities_1","contexts_1","react_button_1","renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlots","createElement","TreeItemProvider","value","treeItem","root","content","expandIcon","children","ButtonContextProvider","button","actions","open","subtree","exports"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/renderTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TreeItemState, TreeItemSlots, TreeItemContextValues } from './TreeItem.types';\nimport { TreeItemProvider } from '../../contexts';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state: TreeItemState, contextValues: TreeItemContextValues) => {\n  const { slots, slotProps } = getSlots<TreeItemSlots>(state);\n\n  return (\n    <TreeItemProvider value={contextValues.treeItem}>\n      <slots.root {...slotProps.root}>\n        <slots.content {...slotProps.content}>\n          {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n          {slotProps.content.children}\n          <ButtonContextProvider value={contextValues.button}>\n            {slots.actions && <slots.actions {...slotProps.actions} />}\n          </ButtonContextProvider>\n        </slots.content>\n        {state.open && slots.subtree && <slots.subtree {...slotProps.subtree} />}\n      </slots.root>\n    </TreeItemProvider>\n  );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAEA,MAAAE,UAAA,gBAAAF,OAAA;AACA,MAAAG,cAAA,gBAAAH,OAAA;AAEA;;;AAGO,MAAMI,uBAAuB,GAAGA,CAACC,KAAoB,EAAEC,aAAoC,KAAI;EACpG,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGP,iBAAA,CAAAQ,QAAQ,CAAgBJ,KAAK,CAAC;EAE3D,OACEN,KAAA,CAAAW,aAAA,CAACR,UAAA,CAAAS,gBAAgB;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GAC7Cd,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACO,IAAI;IAAA,GAAKN,SAAS,CAACM;EAAI,GAC5Bf,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACQ,OAAO;IAAA,GAAKP,SAAS,CAACO;EAAO,GACjCR,KAAK,CAACS,UAAU,IAAIjB,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACS,UAAU;IAAA,GAAKR,SAAS,CAACQ;EAAU,EAAI,EAClER,SAAS,CAACO,OAAO,CAACE,QAAQ,EAC3BlB,KAAA,CAAAW,aAAA,CAACP,cAAA,CAAAe,qBAAqB;IAACN,KAAK,EAAEN,aAAa,CAACa;EAAM,GAC/CZ,KAAK,CAACa,OAAO,IAAIrB,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACa,OAAO;IAAA,GAAKZ,SAAS,CAACY;EAAO,EAAI,CACpC,CACV,EACff,KAAK,CAACgB,IAAI,IAAId,KAAK,CAACe,OAAO,IAAIvB,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACe,OAAO;IAAA,GAAKd,SAAS,CAACc;EAAO,EAAI,CAC7D,CACI;AAEvB,CAAC;AAjBYC,OAAA,CAAAnB,uBAAuB,GAAAA,uBAAA"}
+{"version":3,"sources":["../../../lib/components/TreeItem/renderTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { TreeItemProvider } from '../../contexts';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n/**\n * Render the final JSX of TreeItem\n */\nexport const renderTreeItem_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  return /*#__PURE__*/React.createElement(TreeItemProvider, {\n    value: contextValues.treeItem\n  }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, /*#__PURE__*/React.createElement(slots.content, slotProps.content, slots.expandIcon && /*#__PURE__*/React.createElement(slots.expandIcon, slotProps.expandIcon), slotProps.content.children, /*#__PURE__*/React.createElement(ButtonContextProvider, {\n    value: contextValues.button\n  }, slots.actions && /*#__PURE__*/React.createElement(slots.actions, slotProps.actions))), state.open && slots.subtree && /*#__PURE__*/React.createElement(slots.subtree, slotProps.subtree)));\n};\n//# sourceMappingURL=renderTreeItem.js.map"],"names":["renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlots","React","createElement","TreeItemProvider","value","treeItem","root","content","expandIcon","children","ButtonContextProvider","button","actions","open","subtree"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;gCACE;0BACQ;6BACK;AAI/B,MAAMA,0BAA0B,CAACC,OAAOC,gBAAkB;IAC/D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACC,0BAAgB,EAAE;QACxDC,OAAOP,cAAcQ,QAAQ;IAC/B,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACJ,MAAMQ,IAAI,EAAEP,UAAUO,IAAI,EAAE,WAAW,GAAEL,OAAMC,aAAa,CAACJ,MAAMS,OAAO,EAAER,UAAUQ,OAAO,EAAET,MAAMU,UAAU,IAAI,WAAW,GAAEP,OAAMC,aAAa,CAACJ,MAAMU,UAAU,EAAET,UAAUS,UAAU,GAAGT,UAAUQ,OAAO,CAACE,QAAQ,EAAE,WAAW,GAAER,OAAMC,aAAa,CAACQ,kCAAqB,EAAE;QACnTN,OAAOP,cAAcc,MAAM;IAC7B,GAAGb,MAAMc,OAAO,IAAI,WAAW,GAAEX,OAAMC,aAAa,CAACJ,MAAMc,OAAO,EAAEb,UAAUa,OAAO,KAAKhB,MAAMiB,IAAI,IAAIf,MAAMgB,OAAO,IAAI,WAAW,GAAEb,OAAMC,aAAa,CAACJ,MAAMgB,OAAO,EAAEf,UAAUe,OAAO;AAC5L,GACA,0CAA0C"}

package/lib-commonjs/components/TreeItem/useTreeItem.js

@@ -1,257 +1,237 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useTreeItem_unstable = void 0;
-const React = /*#__PURE__*/require("react");
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
-const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
-const useTreeItemStyles_1 = /*#__PURE__*/require("./useTreeItemStyles");
-const keyboard_keys_1 = /*#__PURE__*/require("@fluentui/keyboard-keys");
-const react_utilities_3 = /*#__PURE__*/require("@fluentui/react-utilities");
-const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
-const index_1 = /*#__PURE__*/require("../../contexts/index");
-const tokens_1 = /*#__PURE__*/require("../../utils/tokens");
-/**
- * Create the state required to render TreeItem.
- *
- * The returned state can be modified with hooks such as useTreeItemStyles_unstable,
- * before being passed to renderTreeItem_unstable.
- *
- * @param props - props from this instance of TreeItem
- * @param ref - reference to root HTMLElement of TreeItem
- */
-const useTreeItem_unstable = (props, ref) => {
-  const [children, subtreeChildren] = React.Children.toArray(props.children);
-  const contextLevel = index_1.useTreeContext_unstable(ctx => ctx.level);
-  const {
-    content,
-    subtree,
-    expandIcon,
-    leaf: isLeaf = subtreeChildren === undefined,
-    actions,
-    as = 'div',
-    onClick,
-    onKeyDown,
-    ['aria-level']: level = contextLevel,
-    ...rest
-  } = props;
-  const requestOpenChange = index_1.useTreeContext_unstable(ctx => ctx.requestOpenChange);
-  const requestNavigation = index_1.useTreeContext_unstable(ctx => ctx.requestNavigation);
-  const id = react_utilities_1.useId('fui-TreeItem-', props.id);
-  const isBranch = !isLeaf;
-  const open = index_1.useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));
-  const {
-    dir,
-    targetDocument
-  } = react_shared_contexts_1.useFluent_unstable();
-  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
-  const actionsRef = React.useRef(null);
-  const expandIconRef = React.useRef(null);
-  const subtreeRef = React.useRef(null);
-  const handleArrowRight = event => {
-    if (!open && isBranch) {
-      return requestOpenChange({
-        event,
-        open: true,
-        type: tokens_1.treeDataTypes.arrowRight,
-        target: event.currentTarget
-      });
-    }
-    if (open && isBranch) {
-      return requestNavigation({
-        event,
-        type: tokens_1.treeDataTypes.arrowRight,
-        target: event.currentTarget
-      });
-    }
-  };
-  const handleArrowLeft = event => {
-    if (open && isBranch) {
-      return requestOpenChange({
-        event,
-        open: false,
-        type: tokens_1.treeDataTypes.arrowLeft,
-        target: event.currentTarget
-      });
-    }
-    if (!open && level > 1) {
-      return requestNavigation({
-        event,
-        target: event.currentTarget,
-        type: tokens_1.treeDataTypes.arrowLeft
-      });
-    }
-  };
-  const handleEnter = event => {
-    requestOpenChange({
-      event,
-      open: isLeaf ? open : !open,
-      type: tokens_1.treeDataTypes.enter,
-      target: event.currentTarget
-    });
-  };
-  const handleClick = react_utilities_2.useEventCallback(event => {
-    onClick === null || onClick === void 0 ? void 0 : onClick(event);
-    const isEventFromActions = actionsRef.current && react_portal_1.elementContains(actionsRef.current, event.target);
-    if (isEventFromActions) {
-      return;
-    }
-    const isEventFromSubtree = subtreeRef.current && react_portal_1.elementContains(subtreeRef.current, event.target);
-    if (isEventFromSubtree) {
-      return;
-    }
-    const isFromExpandIcon = expandIconRef.current && react_portal_1.elementContains(expandIconRef.current, event.target);
-    requestOpenChange({
-      event,
-      open: isLeaf ? open : !open,
-      type: isFromExpandIcon ? tokens_1.treeDataTypes.expandIconClick : tokens_1.treeDataTypes.click,
-      target: event.currentTarget
-    });
-    requestNavigation({
-      event,
-      target: event.currentTarget,
-      type: tokens_1.treeDataTypes.click
-    });
-  });
-  const handleKeyDown = react_utilities_2.useEventCallback(event => {
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-    if (event.currentTarget !== event.target) {
-      return;
-    }
-    if (event.isDefaultPrevented()) {
-      return;
-    }
-    switch (event.key) {
-      case keyboard_keys_1.Enter:
-        return handleEnter(event);
-      case keyboard_keys_1.ArrowRight:
-        return handleArrowRight(event);
-      case keyboard_keys_1.ArrowLeft:
-        return handleArrowLeft(event);
-      case keyboard_keys_1.End:
-        return requestNavigation({
-          event,
-          type: tokens_1.treeDataTypes.end,
-          target: event.currentTarget
-        });
-      case keyboard_keys_1.Home:
-        return requestNavigation({
-          event,
-          type: tokens_1.treeDataTypes.home,
-          target: event.currentTarget
+Object.defineProperty(exports, "useTreeItem_unstable", {
+    enumerable: true,
+    get: ()=>useTreeItem_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactUtilities = require("@fluentui/react-utilities");
+const _reactIcons = require("@fluentui/react-icons");
+const _reactSharedContexts = require("@fluentui/react-shared-contexts");
+const _useTreeItemStyles = require("./useTreeItemStyles");
+const _keyboardKeys = require("@fluentui/keyboard-keys");
+const _reactPortal = require("@fluentui/react-portal");
+const _index = require("../../contexts/index");
+const _tokens = require("../../utils/tokens");
+const useTreeItem_unstable = (props, ref)=>{
+    const [children, subtreeChildren] = _react.Children.toArray(props.children);
+    const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
+    const { content , subtree , expandIcon , leaf: isLeaf = subtreeChildren === undefined , actions , as ='div' , onClick , onKeyDown , ['aria-level']: level = contextLevel , ...rest } = props;
+    const requestOpenChange = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestOpenChange);
+    const requestNavigation = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestNavigation);
+    const id = (0, _reactUtilities.useId)('fui-TreeItem-', props.id);
+    const isBranch = !isLeaf;
+    const open = (0, _index.useTreeContext_unstable)((ctx)=>isBranch && ctx.openItems.has(id));
+    const { dir , targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
+    const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;
+    const actionsRef = _react.useRef(null);
+    const expandIconRef = _react.useRef(null);
+    const subtreeRef = _react.useRef(null);
+    const handleArrowRight = (event)=>{
+        if (!open && isBranch) {
+            return requestOpenChange({
+                event,
+                open: true,
+                type: _tokens.treeDataTypes.arrowRight,
+                target: event.currentTarget
+            });
+        }
+        if (open && isBranch) {
+            return requestNavigation({
+                event,
+                type: _tokens.treeDataTypes.arrowRight,
+                target: event.currentTarget
+            });
+        }
+    };
+    const handleArrowLeft = (event)=>{
+        if (open && isBranch) {
+            return requestOpenChange({
+                event,
+                open: false,
+                type: _tokens.treeDataTypes.arrowLeft,
+                target: event.currentTarget
+            });
+        }
+        if (!open && level > 1) {
+            return requestNavigation({
+                event,
+                target: event.currentTarget,
+                type: _tokens.treeDataTypes.arrowLeft
+            });
+        }
+    };
+    const handleEnter = (event)=>{
+        requestOpenChange({
+            event,
+            open: isLeaf ? open : !open,
+            type: _tokens.treeDataTypes.enter,
+            target: event.currentTarget
         });
-      case keyboard_keys_1.ArrowUp:
-        return requestNavigation({
-          event,
-          type: tokens_1.treeDataTypes.arrowUp,
-          target: event.currentTarget
+    };
+    const handleClick = (0, _reactUtilities.useEventCallback)((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        const isEventFromActions = actionsRef.current && (0, _reactPortal.elementContains)(actionsRef.current, event.target);
+        if (isEventFromActions) {
+            return;
+        }
+        const isEventFromSubtree = subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target);
+        if (isEventFromSubtree) {
+            return;
+        }
+        const isFromExpandIcon = expandIconRef.current && (0, _reactPortal.elementContains)(expandIconRef.current, event.target);
+        requestOpenChange({
+            event,
+            open: isLeaf ? open : !open,
+            type: isFromExpandIcon ? _tokens.treeDataTypes.expandIconClick : _tokens.treeDataTypes.click,
+            target: event.currentTarget
         });
-      case keyboard_keys_1.ArrowDown:
-        return requestNavigation({
-          event,
-          type: tokens_1.treeDataTypes.arrowDown,
-          target: event.currentTarget
+        requestNavigation({
+            event,
+            target: event.currentTarget,
+            type: _tokens.treeDataTypes.click
         });
-    }
-    const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
-    if (isTypeAheadCharacter) {
-      return requestNavigation({
-        event,
-        target: event.currentTarget,
-        type: tokens_1.treeDataTypes.typeAhead
-      });
-    }
-  });
-  const [isActionsVisible, setActionsVisible] = React.useState(false);
-  const showActions = react_utilities_2.useEventCallback(event => {
-    const isEventFromSubtree = subtreeRef.current && react_portal_1.elementContains(subtreeRef.current, event.target);
-    if (!isEventFromSubtree) {
-      setActionsVisible(true);
-    }
-  });
-  const hideActions = react_utilities_2.useEventCallback(event => {
-    const isEventFromSubtree = subtreeRef.current && react_portal_1.elementContains(subtreeRef.current, event.target);
-    if (!isEventFromSubtree) {
-      setActionsVisible(false);
-    }
-  });
-  // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios
-  // TODO: find a better way to ensure this behavior
-  React.useEffect(() => {
-    if (actionsRef.current) {
-      const handleFocusOut = event => {
-        setActionsVisible(react_portal_1.elementContains(actionsRef.current, event.relatedTarget));
-      };
-      targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusout', handleFocusOut, {
-        passive: true
-      });
-      return () => {
-        targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusout', handleFocusOut);
-      };
-    }
-  }, [targetDocument]);
-  return {
-    isLeaf,
-    open,
-    level,
-    buttonSize: 'small',
-    isActionsVisible: actions ? isActionsVisible : false,
-    components: {
-      content: 'div',
-      root: 'div',
-      expandIcon: 'span',
-      actions: 'span',
-      subtree: 'span'
-    },
-    subtree: react_utilities_1.resolveShorthand(subtree, {
-      required: Boolean(subtreeChildren),
-      defaultProps: {
-        children: subtreeChildren,
-        ref: react_utilities_3.useMergedRefs(subtreeRef, react_utilities_1.isResolvedShorthand(subtree) ? subtree.ref : undefined)
-      }
-    }),
-    content: react_utilities_1.resolveShorthand(content, {
-      required: true,
-      defaultProps: {
-        children
-      }
-    }),
-    root: react_utilities_1.getNativeElementProps(as, {
-      tabIndex: -1,
-      ...rest,
-      id,
-      ref,
-      children: null,
-      'aria-level': level,
-      'aria-expanded': isBranch ? open : undefined,
-      role: 'treeitem',
-      onClick: handleClick,
-      onKeyDown: handleKeyDown,
-      onMouseOver: actions ? showActions : undefined,
-      onFocus: actions ? showActions : undefined,
-      onMouseOut: actions ? hideActions : undefined,
-      onBlur: actions ? hideActions : undefined
-    }),
-    expandIcon: react_utilities_1.resolveShorthand(expandIcon, {
-      required: isBranch,
-      defaultProps: {
-        children: React.createElement(react_icons_1.ChevronRight12Regular, {
-          style: useTreeItemStyles_1.expandIconInlineStyles[expandIconRotation]
+    });
+    const handleKeyDown = (0, _reactUtilities.useEventCallback)((event)=>{
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        if (event.currentTarget !== event.target) {
+            return;
+        }
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        switch(event.key){
+            case _keyboardKeys.Enter:
+                return handleEnter(event);
+            case _keyboardKeys.ArrowRight:
+                return handleArrowRight(event);
+            case _keyboardKeys.ArrowLeft:
+                return handleArrowLeft(event);
+            case _keyboardKeys.End:
+                return requestNavigation({
+                    event,
+                    type: _tokens.treeDataTypes.end,
+                    target: event.currentTarget
+                });
+            case _keyboardKeys.Home:
+                return requestNavigation({
+                    event,
+                    type: _tokens.treeDataTypes.home,
+                    target: event.currentTarget
+                });
+            case _keyboardKeys.ArrowUp:
+                return requestNavigation({
+                    event,
+                    type: _tokens.treeDataTypes.arrowUp,
+                    target: event.currentTarget
+                });
+            case _keyboardKeys.ArrowDown:
+                return requestNavigation({
+                    event,
+                    type: _tokens.treeDataTypes.arrowDown,
+                    target: event.currentTarget
+                });
+        }
+        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
+        if (isTypeAheadCharacter) {
+            return requestNavigation({
+                event,
+                target: event.currentTarget,
+                type: _tokens.treeDataTypes.typeAhead
+            });
+        }
+    });
+    const [isActionsVisible, setActionsVisible] = _react.useState(false);
+    const showActions = (0, _reactUtilities.useEventCallback)((event)=>{
+        const isEventFromSubtree = subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target);
+        if (!isEventFromSubtree) {
+            setActionsVisible(true);
+        }
+    });
+    const hideActions = (0, _reactUtilities.useEventCallback)((event)=>{
+        const isEventFromSubtree = subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target);
+        if (!isEventFromSubtree) {
+            setActionsVisible(false);
+        }
+    });
+    // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios
+    // TODO: find a better way to ensure this behavior
+    _react.useEffect(()=>{
+        if (actionsRef.current) {
+            const handleFocusOut = (event)=>{
+                setActionsVisible((0, _reactPortal.elementContains)(actionsRef.current, event.relatedTarget));
+            };
+            targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.addEventListener('focusout', handleFocusOut, {
+                passive: true
+            });
+            return ()=>{
+                targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.removeEventListener('focusout', handleFocusOut);
+            };
+        }
+    }, [
+        targetDocument
+    ]);
+    return {
+        isLeaf,
+        open,
+        level,
+        buttonSize: 'small',
+        isActionsVisible: actions ? isActionsVisible : false,
+        components: {
+            content: 'div',
+            root: 'div',
+            expandIcon: 'span',
+            actions: 'span',
+            subtree: 'span'
+        },
+        subtree: (0, _reactUtilities.resolveShorthand)(subtree, {
+            required: Boolean(subtreeChildren),
+            defaultProps: {
+                children: subtreeChildren,
+                ref: (0, _reactUtilities.useMergedRefs)(subtreeRef, (0, _reactUtilities.isResolvedShorthand)(subtree) ? subtree.ref : undefined)
+            }
+        }),
+        content: (0, _reactUtilities.resolveShorthand)(content, {
+            required: true,
+            defaultProps: {
+                children
+            }
         }),
-        'aria-hidden': true,
-        ref: react_utilities_3.useMergedRefs(react_utilities_1.isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
-      }
-    }),
-    actions: react_utilities_1.resolveShorthand(actions, {
-      defaultProps: {
-        ref: react_utilities_3.useMergedRefs(react_utilities_1.isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef)
-      }
-    })
-  };
-};
-exports.useTreeItem_unstable = useTreeItem_unstable;
+        root: (0, _reactUtilities.getNativeElementProps)(as, {
+            tabIndex: -1,
+            ...rest,
+            id,
+            ref,
+            children: null,
+            'aria-level': level,
+            'aria-expanded': isBranch ? open : undefined,
+            role: 'treeitem',
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            onMouseOver: actions ? showActions : undefined,
+            onFocus: actions ? showActions : undefined,
+            onMouseOut: actions ? hideActions : undefined,
+            onBlur: actions ? hideActions : undefined
+        }),
+        expandIcon: (0, _reactUtilities.resolveShorthand)(expandIcon, {
+            required: isBranch,
+            defaultProps: {
+                children: /*#__PURE__*/ _react.createElement(_reactIcons.ChevronRight12Regular, {
+                    style: _useTreeItemStyles.expandIconInlineStyles[expandIconRotation]
+                }),
+                'aria-hidden': true,
+                ref: (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(expandIcon) ? expandIcon.ref : undefined, expandIconRef)
+            }
+        }),
+        actions: (0, _reactUtilities.resolveShorthand)(actions, {
+            defaultProps: {
+                ref: (0, _reactUtilities.useMergedRefs)((0, _reactUtilities.isResolvedShorthand)(actions) ? actions.ref : undefined, actionsRef)
+            }
+        })
+    };
+}; //# sourceMappingURL=useTreeItem.js.map
+
 //# sourceMappingURL=useTreeItem.js.map