@fluentui/react-tree 0.0.0-nightly-20230310-0421.1

package/lib-commonjs/components/Tree/useTreeContextValues.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeContextValues_unstable = void 0;
+function useTreeContextValues_unstable(state) {
+  const {
+    openItems,
+    level,
+    appearance,
+    size,
+    requestOpenChange,
+    requestNavigation
+  } = state;
+  /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */
+  const tree = {
+    appearance,
+    size,
+    level,
+    openItems,
+    requestOpenChange,
+    requestNavigation
+  };
+  return {
+    tree
+  };
+}
+exports.useTreeContextValues_unstable = useTreeContextValues_unstable;
+//# sourceMappingURL=useTreeContextValues.js.map

package/lib-commonjs/components/Tree/useTreeContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useTreeContextValues_unstable","state","openItems","level","appearance","size","requestOpenChange","requestNavigation","tree","exports"],"sources":["../../../../../../../../../packages/react-components/react-tree/src/components/Tree/useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport type { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, level, appearance, size, requestOpenChange, requestNavigation } = state;\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const tree: TreeContextValue = {\n    appearance,\n    size,\n    level,\n    openItems,\n    requestOpenChange,\n    requestNavigation,\n  };\n\n  return { tree };\n}\n"],"mappings":";;;;;;AAGA,SAAgBA,6BAA6BA,CAACC,KAAgB;EAC5D,MAAM;IAAEC,SAAS;IAAEC,KAAK;IAAEC,UAAU;IAAEC,IAAI;IAAEC,iBAAiB;IAAEC;EAAiB,CAAE,GAAGN,KAAK;EAC1F;;;;EAIA,MAAMO,IAAI,GAAqB;IAC7BJ,UAAU;IACVC,IAAI;IACJF,KAAK;IACLD,SAAS;IACTI,iBAAiB;IACjBC;GACD;EAED,OAAO;IAAEC;EAAI,CAAE;AACjB;AAhBAC,OAAA,CAAAT,6BAAA,GAAAA,6BAAA"}

package/lib-commonjs/components/Tree/useTreeStyles.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeStyles_unstable = exports.treeClassNames = void 0;
+const react_1 = /*#__PURE__*/require("@griffel/react");
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+exports.treeClassNames = {
+  root: 'fui-Tree'
+};
+const useStyles = /*#__PURE__*/react_1.__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Belr9w4: "f1j0q4x9"
+  }
+}, {
+  d: [".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}"]
+});
+const useTreeStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = react_1.mergeClasses(exports.treeClassNames.root, styles.root, state.root.className);
+  return state;
+};
+exports.useTreeStyles_unstable = useTreeStyles_unstable;
+//# sourceMappingURL=useTreeStyles.js.map

package/lib-commonjs/components/Tree/useTreeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["react_1","require","react_theme_1","exports","treeClassNames","root","useStyles","__styles","mc9l5x","Beiy3e4","Belr9w4","d","useTreeStyles_unstable","state","styles","className","mergeClasses"],"sources":["../../../../../../../../../packages/react-components/react-tree/src/components/Tree/useTreeStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TreeSlots, TreeState } from './Tree.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const treeClassNames: SlotClassNames<TreeSlots> = {\n  root: 'fui-Tree',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS,\n  },\n});\n\nexport const useTreeStyles_unstable = (state: TreeState): TreeState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(treeClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,OAAA,gBAAAC,OAAA;AAGA,MAAAC,aAAA,gBAAAD,OAAA;AAEaE,OAAA,CAAAC,cAAc,GAA8B;EACvDC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGN,OAAA,CAAAO,QAAU;EAAAF,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAM1B;AAEK,MAAMC,sBAAsB,GAAIC,KAAgB,IAAe;EACpE,MAAMC,MAAM,GAAGR,SAAS,EAAE;EAC1BO,KAAK,CAACR,IAAI,CAACU,SAAS,GAAGf,OAAA,CAAAgB,YAAY,CAACb,OAAA,CAAAC,cAAc,CAACC,IAAI,EAAES,MAAM,CAACT,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACU,SAAS,CAAC;EAE3F,OAAOF,KAAK;AACd,CAAC;AALYV,OAAA,CAAAS,sBAAsB,GAAAA,sBAAA"}

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

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  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);
+});
+exports.TreeItem.displayName = 'TreeItem';
+//# sourceMappingURL=TreeItem.js.map

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

@@ -0,0 +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":["../../../../../../../../../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"}

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

@@ -0,0 +1,7 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tokens_1 = /*#__PURE__*/require("../../utils/tokens");
+//# sourceMappingURL=TreeItem.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["tokens_1","require"],"sources":["../../../../../../../../../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"}

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  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

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

@@ -0,0 +1 @@
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../../../../../../../../../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"}

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  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
+  })));
+};
+exports.renderTreeItem_unstable = renderTreeItem_unstable;
+//# sourceMappingURL=renderTreeItem.js.map

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

@@ -0,0 +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":["../../../../../../../../../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"}

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

@@ -0,0 +1,257 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  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
+        });
+      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 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

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","require","react_utilities_1","react_icons_1","react_shared_contexts_1","react_utilities_2","useTreeItemStyles_1","keyboard_keys_1","react_utilities_3","react_portal_1","index_1","tokens_1","useTreeItem_unstable","props","ref","children","subtreeChildren","Children","toArray","contextLevel","useTreeContext_unstable","ctx","level","content","subtree","expandIcon","leaf","isLeaf","undefined","actions","as","onClick","onKeyDown","rest","requestOpenChange","requestNavigation","id","useId","isBranch","open","openItems","has","dir","targetDocument","useFluent_unstable","expandIconRotation","actionsRef","useRef","expandIconRef","subtreeRef","handleArrowRight","event","type","treeDataTypes","arrowRight","target","currentTarget","handleArrowLeft","arrowLeft","handleEnter","enter","handleClick","useEventCallback","isEventFromActions","current","elementContains","isEventFromSubtree","isFromExpandIcon","expandIconClick","click","handleKeyDown","isDefaultPrevented","key","Enter","ArrowRight","ArrowLeft","End","end","Home","home","ArrowUp","arrowUp","ArrowDown","arrowDown","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","typeAhead","isActionsVisible","setActionsVisible","useState","showActions","hideActions","useEffect","handleFocusOut","relatedTarget","addEventListener","passive","removeEventListener","buttonSize","components","root","resolveShorthand","required","Boolean","defaultProps","useMergedRefs","isResolvedShorthand","getNativeElementProps","tabIndex","role","onMouseOver","onFocus","onMouseOut","onBlur","createElement","ChevronRight12Regular","style","expandIconInlineStyles","exports"],"sources":["../../../../../../../../../packages/react-components/react-tree/src/components/TreeItem/useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, isResolvedShorthand, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport { ChevronRight12Regular } from '@fluentui/react-icons';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { expandIconInlineStyles } from './useTreeItemStyles';\nimport { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, End, Enter, Home } from '@fluentui/keyboard-keys';\nimport { useMergedRefs } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItem.\n *\n * The returned state can be modified with hooks such as useTreeItemStyles_unstable,\n * before being passed to renderTreeItem_unstable.\n *\n * @param props - props from this instance of TreeItem\n * @param ref - reference to root HTMLElement of TreeItem\n */\nexport const useTreeItem_unstable = (props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState => {\n  const [children, subtreeChildren] = React.Children.toArray(props.children);\n\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n  const {\n    content,\n    subtree,\n    expandIcon,\n    leaf: isLeaf = subtreeChildren === undefined,\n    actions,\n    as = 'div',\n    onClick,\n    onKeyDown,\n    ['aria-level']: level = contextLevel,\n    ...rest\n  } = props;\n\n  const requestOpenChange = useTreeContext_unstable(ctx => ctx.requestOpenChange);\n  const requestNavigation = useTreeContext_unstable(ctx => ctx.requestNavigation);\n\n  const id = useId('fui-TreeItem-', props.id);\n\n  const isBranch = !isLeaf;\n\n  const open = useTreeContext_unstable(ctx => isBranch && ctx.openItems.has(id));\n  const { dir, targetDocument } = useFluent_unstable();\n  const expandIconRotation = open ? 90 : dir !== 'rtl' ? 0 : 180;\n\n  const actionsRef = React.useRef<HTMLElement>(null);\n  const expandIconRef = React.useRef<HTMLElement>(null);\n  const subtreeRef = React.useRef<HTMLElement>(null);\n\n  const handleArrowRight = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (!open && isBranch) {\n      return requestOpenChange({ event, open: true, type: treeDataTypes.arrowRight, target: event.currentTarget });\n    }\n    if (open && isBranch) {\n      return requestNavigation({ event, type: treeDataTypes.arrowRight, target: event.currentTarget });\n    }\n  };\n  const handleArrowLeft = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (open && isBranch) {\n      return requestOpenChange({ event, open: false, type: treeDataTypes.arrowLeft, target: event.currentTarget });\n    }\n    if (!open && level > 1) {\n      return requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.arrowLeft });\n    }\n  };\n  const handleEnter = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    requestOpenChange({ event, open: isLeaf ? open : !open, type: treeDataTypes.enter, target: event.currentTarget });\n  };\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n\n    const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target as Node);\n    if (isEventFromActions) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n    requestOpenChange({\n      event,\n      open: isLeaf ? open : !open,\n      type: isFromExpandIcon ? treeDataTypes.expandIconClick : treeDataTypes.click,\n      target: event.currentTarget,\n    });\n    requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.click });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    if (event.currentTarget !== event.target) {\n      return;\n    }\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    switch (event.key) {\n      case Enter:\n        return handleEnter(event);\n      case ArrowRight:\n        return handleArrowRight(event);\n      case ArrowLeft:\n        return handleArrowLeft(event);\n      case End:\n        return requestNavigation({ event, type: treeDataTypes.end, target: event.currentTarget });\n      case Home:\n        return requestNavigation({ event, type: treeDataTypes.home, target: event.currentTarget });\n      case ArrowUp:\n        return requestNavigation({ event, type: treeDataTypes.arrowUp, target: event.currentTarget });\n      case ArrowDown:\n        return requestNavigation({ event, type: treeDataTypes.arrowDown, target: event.currentTarget });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      return requestNavigation({ event, target: event.currentTarget, type: treeDataTypes.typeAhead });\n    }\n  });\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const showActions = useEventCallback((event: React.SyntheticEvent) => {\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (!isEventFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n  const hideActions = useEventCallback((event: React.SyntheticEvent) => {\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (!isEventFromSubtree) {\n      setActionsVisible(false);\n    }\n  });\n\n  // Listens to focusout event on the document to ensure treeitem actions visibility on portal scenarios\n  // TODO: find a better way to ensure this behavior\n  React.useEffect(() => {\n    if (actionsRef.current) {\n      const handleFocusOut = (event: FocusEvent) => {\n        setActionsVisible(elementContains(actionsRef.current, event.relatedTarget as Node));\n      };\n      targetDocument?.addEventListener('focusout', handleFocusOut, { passive: true });\n      return () => {\n        targetDocument?.removeEventListener('focusout', handleFocusOut);\n      };\n    }\n  }, [targetDocument]);\n\n  return {\n    isLeaf,\n    open,\n    level,\n    buttonSize: 'small',\n    isActionsVisible: actions ? isActionsVisible : false,\n    components: {\n      content: 'div',\n      root: 'div',\n      expandIcon: 'span',\n      actions: 'span',\n      subtree: 'span',\n    },\n    subtree: resolveShorthand(subtree, {\n      required: Boolean(subtreeChildren),\n      defaultProps: {\n        children: subtreeChildren,\n        ref: useMergedRefs(subtreeRef, isResolvedShorthand(subtree) ? subtree.ref : undefined),\n      },\n    }),\n    content: resolveShorthand(content, {\n      required: true,\n      defaultProps: {\n        children,\n      },\n    }),\n    root: getNativeElementProps(as, {\n      tabIndex: -1,\n      ...rest,\n      id,\n      ref,\n      children: null,\n      'aria-level': level,\n      'aria-expanded': isBranch ? open : undefined,\n      role: 'treeitem',\n      onClick: handleClick,\n      onKeyDown: handleKeyDown,\n      onMouseOver: actions ? showActions : undefined,\n      onFocus: actions ? showActions : undefined,\n      onMouseOut: actions ? hideActions : undefined,\n      onBlur: actions ? hideActions : undefined,\n    }),\n    expandIcon: resolveShorthand(expandIcon, {\n      required: isBranch,\n      defaultProps: {\n        children: <ChevronRight12Regular style={expandIconInlineStyles[expandIconRotation]} />,\n        'aria-hidden': true,\n        ref: useMergedRefs(isResolvedShorthand(expandIcon) ? expandIcon.ref : undefined, expandIconRef),\n      },\n    }),\n    actions: resolveShorthand(actions, {\n      defaultProps: {\n        ref: useMergedRefs(isResolvedShorthand(actions) ? actions.ref : undefined, actionsRef),\n      },\n    }),\n  };\n};\n"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTreeItemContextValues_unstable = void 0;
+const React = /*#__PURE__*/require("react");
+function useTreeItemContextValues_unstable(state) {
+  const {
+    buttonSize,
+    isActionsVisible
+  } = state;
+  const treeItem = React.useMemo(() => ({
+    isActionsVisible
+  }), [isActionsVisible]);
+  const button = React.useMemo(() => ({
+    size: buttonSize
+  }), [buttonSize]);
+  return {
+    treeItem,
+    button
+  };
+}
+exports.useTreeItemContextValues_unstable = useTreeItemContextValues_unstable;
+//# sourceMappingURL=useTreeItemContextValues.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","require","useTreeItemContextValues_unstable","state","buttonSize","isActionsVisible","treeItem","useMemo","button","size","exports"],"sources":["../../../../../../../../../packages/react-components/react-tree/src/components/TreeItem/useTreeItemContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ButtonContextValue } from '@fluentui/react-button';\nimport type { TreeItemContextValue } from '../../contexts';\nimport type { TreeItemContextValues, TreeItemState } from './TreeItem.types';\n\nexport function useTreeItemContextValues_unstable(\n  state: Pick<TreeItemState, 'buttonSize' | 'isActionsVisible'>,\n): TreeItemContextValues {\n  const { buttonSize, isActionsVisible } = state;\n\n  const treeItem = React.useMemo<TreeItemContextValue>(() => ({ isActionsVisible }), [isActionsVisible]);\n  const button = React.useMemo<ButtonContextValue>(() => ({ size: buttonSize }), [buttonSize]);\n\n  return { treeItem, button };\n}\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAKA,SAAgBC,iCAAiCA,CAC/CC,KAA6D;EAE7D,MAAM;IAAEC,UAAU;IAAEC;EAAgB,CAAE,GAAGF,KAAK;EAE9C,MAAMG,QAAQ,GAAGN,KAAK,CAACO,OAAO,CAAuB,OAAO;IAAEF;EAAgB,CAAE,CAAC,EAAE,CAACA,gBAAgB,CAAC,CAAC;EACtG,MAAMG,MAAM,GAAGR,KAAK,CAACO,OAAO,CAAqB,OAAO;IAAEE,IAAI,EAAEL;EAAU,CAAE,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAE5F,OAAO;IAAEE,QAAQ;IAAEE;EAAM,CAAE;AAC7B;AATAE,OAAA,CAAAR,iCAAA,GAAAA,iCAAA"}