@fluentui/react-tree 9.0.0-beta.3 → 9.0.0-beta.31

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

@@ -1,22 +1,21 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.TreeItem = void 0;
-const React = /*#__PURE__*/require("react");
-const useTreeItem_1 = /*#__PURE__*/require("./useTreeItem");
-const renderTreeItem_1 = /*#__PURE__*/require("./renderTreeItem");
-const useTreeItemStyles_1 = /*#__PURE__*/require("./useTreeItemStyles");
-const useTreeItemContextValues_1 = /*#__PURE__*/require("./useTreeItemContextValues");
-/**
- * TreeItem component - TODO: add more docs
- */
-exports.TreeItem = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useTreeItem_1.useTreeItem_unstable(props, ref);
-  useTreeItemStyles_1.useTreeItemStyles_unstable(state);
-  const contextValues = useTreeItemContextValues_1.useTreeItemContextValues_unstable(state);
-  return renderTreeItem_1.renderTreeItem_unstable(state, contextValues);
+Object.defineProperty(exports, "TreeItem", {
+    enumerable: true,
+    get: ()=>TreeItem
 });
-exports.TreeItem.displayName = 'TreeItem';
-//# sourceMappingURL=TreeItem.js.map
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _useTreeItem = require("./useTreeItem");
+const _renderTreeItem = require("./renderTreeItem");
+const _useTreeItemStylesStyles = require("./useTreeItemStyles.styles");
+const _useTreeItemContextValues = require("./useTreeItemContextValues");
+const TreeItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useTreeItem.useTreeItem_unstable)(props, ref);
+    (0, _useTreeItemStylesStyles.useTreeItemStyles_unstable)(state);
+    const contextValues = (0, _useTreeItemContextValues.useTreeItemContextValues_unstable)(state);
+    return (0, _renderTreeItem.renderTreeItem_unstable)(state, contextValues);
+});
+TreeItem.displayName = 'TreeItem';

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","useTreeItem_1","renderTreeItem_1","useTreeItemStyles_1","useTreeItemContextValues_1","exports","TreeItem","forwardRef","props","ref","state","useTreeItem_unstable","useTreeItemStyles_unstable","contextValues","useTreeItemContextValues_unstable","renderTreeItem_unstable","displayName"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItem/TreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles';\nimport type { TreeItemProps } from './TreeItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n\n/**\n * TreeItem component - TODO: add more docs\n */\nexport const TreeItem: ForwardRefComponent<TreeItemProps> = React.forwardRef((props, ref) => {\n  const state = useTreeItem_unstable(props, ref);\n\n  useTreeItemStyles_unstable(state);\n  const contextValues = useTreeItemContextValues_unstable(state);\n  return renderTreeItem_unstable(state, contextValues);\n});\n\nTreeItem.displayName = 'TreeItem';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,aAAA,gBAAAD,OAAA;AACA,MAAAE,gBAAA,gBAAAF,OAAA;AACA,MAAAG,mBAAA,gBAAAH,OAAA;AAGA,MAAAI,0BAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,QAAQ,gBAAuCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC1F,MAAMC,KAAK,GAAGT,aAAA,CAAAU,oBAAoB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE9CN,mBAAA,CAAAS,0BAA0B,CAACF,KAAK,CAAC;EACjC,MAAMG,aAAa,GAAGT,0BAAA,CAAAU,iCAAiC,CAACJ,KAAK,CAAC;EAC9D,OAAOR,gBAAA,CAAAa,uBAAuB,CAACL,KAAK,EAAEG,aAAa,CAAC;AACtD,CAAC,CAAC;AAEFR,OAAA,CAAAC,QAAQ,CAACU,WAAW,GAAG,UAAU"}
+{"version":3,"sources":["TreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { useTreeItem_unstable } from './useTreeItem';\nimport { renderTreeItem_unstable } from './renderTreeItem';\nimport { useTreeItemStyles_unstable } from './useTreeItemStyles.styles';\nimport { useTreeItemContextValues_unstable } from './useTreeItemContextValues';\n/**\n * The `TreeItem` component represents a single item in a tree.\n * It expects a certain order of children to work properly: the first child should be the node itself,\n * and the second child should be a nested subtree in the form of another Tree component or a standalone TreeItem.\n * This order follows the same order as document traversal for the TreeWalker API in JavaScript:\n * https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker.\n * The content and layout of a TreeItem can be defined using the TreeItemLayout or TreeItemPersonaLayout component,\n * which should be used as a direct child of TreeItem.\n *\n * When a TreeItem has nested child subtree, an expand/collapse control is displayed,\n * allowing the user to show or hide the children.\n */ export const TreeItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n    const state = useTreeItem_unstable(props, ref);\n    useTreeItemStyles_unstable(state);\n    const contextValues = useTreeItemContextValues_unstable(state);\n    return renderTreeItem_unstable(state, contextValues);\n});\nTreeItem.displayName = 'TreeItem';\n"],"names":["TreeItem","React","forwardRef","props","ref","state","useTreeItem_unstable","useTreeItemStyles_unstable","contextValues","useTreeItemContextValues_unstable","renderTreeItem_unstable","displayName"],"mappings":";;;;+BAgBiBA;;aAAAA;;;6DAhBM;6BACc;gCACG;yCACG;0CACO;AAYvC,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAM;IACrE,MAAMC,QAAQC,IAAAA,iCAAoB,EAACH,OAAOC;IAC1CG,IAAAA,mDAA0B,EAACF;IAC3B,MAAMG,gBAAgBC,IAAAA,2DAAiC,EAACJ;IACxD,OAAOK,IAAAA,uCAAuB,EAACL,OAAOG;AAC1C;AACAR,SAASW,WAAW,GAAG"}

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

@@ -1,7 +1,6 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-const tokens_1 = /*#__PURE__*/require("../../utils/tokens");
-//# sourceMappingURL=TreeItem.types.js.map
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));

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":["TreeItem.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}

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

@@ -1,12 +1,11 @@
 "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);
-//# sourceMappingURL=index.js.map
+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.styles"), exports);
+_exportStar(require("./useTreeItemContextValues"), exports);

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":["index.js"],"sourcesContent":["export * from './TreeItem';\nexport * from './TreeItem.types';\nexport * from './renderTreeItem';\nexport * from './useTreeItem';\nexport * from './useTreeItemStyles.styles';\nexport * from './useTreeItemContextValues';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;oBACA"}

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

@@ -1,36 +1,17 @@
-"use strict";
-
+/** @jsxRuntime classic */ /** @jsx createElement */ "use strict";
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-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
-  })));
+Object.defineProperty(exports, "renderTreeItem_unstable", {
+    enumerable: true,
+    get: ()=>renderTreeItem_unstable
+});
+const _reactJsxRuntime = require("@fluentui/react-jsx-runtime");
+const _reactUtilities = require("@fluentui/react-utilities");
+const _contexts = require("../../contexts");
+const renderTreeItem_unstable = (state, contextValues)=>{
+    (0, _reactUtilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_contexts.TreeItemProvider, {
+        value: contextValues.treeItem
+    }, state.root.children));
 };
-exports.renderTreeItem_unstable = renderTreeItem_unstable;
-//# 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":["renderTreeItem.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { TreeItemProvider } from '../../contexts';\n/**\n * Render the final JSX of TreeItem\n */ export const renderTreeItem_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    return /*#__PURE__*/ createElement(state.root, null, /*#__PURE__*/ createElement(TreeItemProvider, {\n        value: contextValues.treeItem\n    }, state.root.children));\n};\n"],"names":["renderTreeItem_unstable","state","contextValues","assertSlots","createElement","root","TreeItemProvider","value","treeItem","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;0BACK;AAGtB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAgB;IAC/DC,IAAAA,2BAAW,EAACF;IACZ,OAAO,WAAW,GAAGG,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAE,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,0BAAgB,EAAE;QAC/FC,OAAOL,cAAcM,QAAQ;IACjC,GAAGP,MAAMI,IAAI,CAACI,QAAQ;AAC1B"}

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

@@ -1,257 +1,176 @@
 "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
+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 _reactPortal = require("@fluentui/react-portal");
+const _index = require("../../contexts/index");
+const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
+const _keyboardKeys = require("@fluentui/keyboard-keys");
+const _tokens = require("../../utils/tokens");
+function useTreeItem_unstable(props, ref) {
+    var _props_value;
+    const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
+    // note, if the value is not externally provided,
+    // then selection and expansion will not work properly
+    const value = (0, _reactUtilities.useId)('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());
+    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;
+    const requestTreeResponse = (0, _index.useTreeContext_unstable)((ctx)=>ctx.requestTreeResponse);
+    const [isActionsVisible, setActionsVisible] = _react.useState(false);
+    const [isAsideVisible, setAsideVisible] = _react.useState(true);
+    const handleActionsRef = (actionsElement)=>{
+        setAsideVisible(actionsElement === null);
+    };
+    const actionsRef = _react.useRef(null);
+    const expandIconRef = _react.useRef(null);
+    const layoutRef = _react.useRef(null);
+    const subtreeRef = _react.useRef(null);
+    const selectionRef = _react.useRef(null);
+    const open = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems.has(value));
+    const selectionMode = (0, _index.useTreeContext_unstable)((ctx)=>ctx.selectionMode);
+    var _ctx_checkedItems_get;
+    const checked = (0, _index.useTreeContext_unstable)((ctx)=>(_ctx_checkedItems_get = ctx.checkedItems.get(value)) !== null && _ctx_checkedItems_get !== void 0 ? _ctx_checkedItems_get : false);
+    const handleClick = (0, _reactUtilities.useEventCallback)((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        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 isEventFromSelection = selectionRef.current && (0, _reactPortal.elementContains)(selectionRef.current, event.target);
+        if (isEventFromSelection) {
+            return;
+        }
+        const isFromExpandIcon = expandIconRef.current && (0, _reactPortal.elementContains)(expandIconRef.current, event.target);
+        requestTreeResponse({
+            event,
+            value,
+            itemType,
+            target: event.currentTarget,
+            type: isFromExpandIcon ? _tokens.treeDataTypes.ExpandIconClick : _tokens.treeDataTypes.Click
+        });
     });
-  };
-  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
+    const handleKeyDown = (0, _reactUtilities.useEventCallback)((event)=>{
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+        // Ignore keyboard events that do not originate from the current tree item.
+        if (event.isDefaultPrevented() || event.currentTarget !== event.target) {
+            return;
+        }
+        switch(event.key){
+            case _keyboardKeys.Space:
+                if (selectionMode !== 'none') {
+                    var _selectionRef_current;
+                    (_selectionRef_current = selectionRef.current) === null || _selectionRef_current === void 0 ? void 0 : _selectionRef_current.click();
+                    event.preventDefault();
+                }
+                return;
+            case _tokens.treeDataTypes.End:
+            case _tokens.treeDataTypes.Home:
+            case _tokens.treeDataTypes.Enter:
+            case _tokens.treeDataTypes.ArrowUp:
+            case _tokens.treeDataTypes.ArrowDown:
+            case _tokens.treeDataTypes.ArrowLeft:
+            case _tokens.treeDataTypes.ArrowRight:
+                return requestTreeResponse({
+                    event,
+                    target: event.currentTarget,
+                    value,
+                    itemType,
+                    type: event.key
+                });
+        }
+        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;
+        if (isTypeAheadCharacter) {
+            requestTreeResponse({
+                event,
+                target: event.currentTarget,
+                value,
+                itemType,
+                type: _tokens.treeDataTypes.TypeAhead
+            });
+        }
     });
-    requestNavigation({
-      event,
-      target: event.currentTarget,
-      type: tokens_1.treeDataTypes.click
+    const handleActionsVisible = (0, _reactUtilities.useEventCallback)((event)=>{
+        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target));
+        if (!isTargetFromSubtree) {
+            setActionsVisible(true);
+        }
     });
-  });
-  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
-        });
-      case keyboard_keys_1.ArrowUp:
-        return requestNavigation({
-          event,
-          type: tokens_1.treeDataTypes.arrowUp,
-          target: event.currentTarget
-        });
-      case keyboard_keys_1.ArrowDown:
-        return requestNavigation({
-          event,
-          type: tokens_1.treeDataTypes.arrowDown,
-          target: event.currentTarget
+    const handleActionsInvisible = (0, _reactUtilities.useEventCallback)((event)=>{
+        const isTargetFromSubtree = Boolean(subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target));
+        const isRelatedTargetFromActions = Boolean(actionsRef.current && (0, _reactPortal.elementContains)(actionsRef.current, event.relatedTarget));
+        if (isRelatedTargetFromActions) {
+            return setActionsVisible(true);
+        }
+        if (!isTargetFromSubtree) {
+            return setActionsVisible(false);
+        }
+    });
+    const handleChange = (0, _reactUtilities.useEventCallback)((event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        const isEventFromSubtree = subtreeRef.current && (0, _reactPortal.elementContains)(subtreeRef.current, event.target);
+        if (isEventFromSubtree) {
+            return;
+        }
+        requestTreeResponse({
+            event,
+            value,
+            itemType,
+            type: 'Change',
+            target: event.currentTarget,
+            checked: checked === 'mixed' ? true : !checked
         });
-    }
-    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]
-        }),
-        '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;
-//# sourceMappingURL=useTreeItem.js.map
+    });
+    const isBranch = itemType === 'branch';
+    return {
+        value,
+        open,
+        checked,
+        subtreeRef,
+        layoutRef,
+        selectionRef,
+        expandIconRef,
+        actionsRef: (0, _reactUtilities.useMergedRefs)(handleActionsRef, actionsRef),
+        itemType,
+        level,
+        components: {
+            root: 'div'
+        },
+        isAsideVisible,
+        isActionsVisible,
+        root: _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)(as, {
+            tabIndex: -1,
+            ...rest,
+            ref,
+            role: 'treeitem',
+            'aria-level': level,
+            [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
+            'aria-checked': selectionMode === 'multiselect' ? checked === 'mixed' ? undefined : checked !== null && checked !== void 0 ? checked : false : undefined,
+            'aria-selected': selectionMode === 'single' ? checked : undefined,
+            'aria-expanded': isBranch ? open : undefined,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            onMouseOver: handleActionsVisible,
+            onFocus: handleActionsVisible,
+            onMouseOut: handleActionsInvisible,
+            onBlur: handleActionsInvisible,
+            onChange: handleChange
+        }), {
+            elementType: 'div'
+        })
+    };
+}