@fluentui/react-tree 9.0.0-beta.2 → 9.0.0-beta.21

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)=>{
+    const { slots , slotProps  } = (0, _reactUtilities.getSlotsNext)(state);
+    return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(slots.root, slotProps.root, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_contexts.TreeItemProvider, {
+        value: contextValues.treeItem
+    }, slotProps.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 { getSlotsNext } from '@fluentui/react-utilities';\nimport { TreeItemProvider } from '../../contexts';\n/**\n * Render the final JSX of TreeItem\n */ export const renderTreeItem_unstable = (state, contextValues)=>{\n    const { slots , slotProps  } = getSlotsNext(state);\n    return /*#__PURE__*/ createElement(slots.root, slotProps.root, /*#__PURE__*/ createElement(TreeItemProvider, {\n        value: contextValues.treeItem\n    }, slotProps.root.children));\n};\n"],"names":["renderTreeItem_unstable","state","contextValues","slots","slotProps","getSlotsNext","createElement","root","TreeItemProvider","value","treeItem","children"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACtD;0BACI;AAGtB,MAAMA,0BAA0B,CAACC,OAAOC,gBAAgB;IAC/D,MAAM,EAAEC,MAAK,EAAGC,UAAS,EAAG,GAAGC,IAAAA,4BAAY,EAACJ;IAC5C,OAAO,WAAW,GAAGK,IAAAA,8BAAa,EAACH,MAAMI,IAAI,EAAEH,UAAUG,IAAI,EAAE,WAAW,GAAGD,IAAAA,8BAAa,EAACE,0BAAgB,EAAE;QACzGC,OAAOP,cAAcQ,QAAQ;IACjC,GAAGN,UAAUG,IAAI,CAACI,QAAQ;AAC9B"}

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

@@ -1,257 +1,132 @@
 "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 _tokens = require("../../utils/tokens");
+const _getTreeItemValueFromElement = require("../../utils/getTreeItemValueFromElement");
+function useTreeItem_unstable(props, ref) {
+    var _props_value;
+    const contextLevel = (0, _index.useTreeContext_unstable)((ctx)=>ctx.level);
+    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 = (actions)=>{
+        setAsideVisible(actions === null);
+    };
+    const open = (0, _index.useTreeContext_unstable)((ctx)=>ctx.openItems.has(value));
+    const actionsRef = _react.useRef(null);
+    const expandIconRef = _react.useRef(null);
+    const layoutRef = _react.useRef(null);
+    const subtreeRef = _react.useRef(null);
+    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 isFromExpandIcon = expandIconRef.current && (0, _reactPortal.elementContains)(expandIconRef.current, event.target);
+        requestTreeResponse({
+            event,
+            itemType,
+            value,
+            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);
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        if (event.currentTarget !== event.target) {
+            return;
+        }
+        switch(event.key){
+            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,
+                    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,
+                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 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 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);
+        }
+    });
+    return {
+        value,
+        open,
+        subtreeRef,
+        actionsRef: (0, _reactUtilities.useMergedRefs)(actionsRef, handleActionsRef),
+        expandIconRef,
+        layoutRef,
+        itemType,
+        isActionsVisible,
+        isAsideVisible,
+        level,
+        components: {
+            root: 'div'
+        },
+        root: (0, _reactUtilities.getNativeElementProps)(as, {
+            tabIndex: -1,
+            ...rest,
+            ref,
+            role: 'treeitem',
+            'aria-level': level,
+            [_getTreeItemValueFromElement.dataTreeItemValueAttrName]: value,
+            'aria-expanded': itemType === 'branch' ? open : undefined,
+            onClick: handleClick,
+            onKeyDown: handleKeyDown,
+            onMouseOver: handleActionsVisible,
+            onFocus: handleActionsVisible,
+            onMouseOut: handleActionsInvisible,
+            onBlur: handleActionsInvisible
+        })
+    };
+}

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

@@ -1 +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":["../src/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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"}
+{"version":3,"sources":["useTreeItem.js"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { useEventCallback } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport { useTreeContext_unstable } from '../../contexts/index';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 */ export function useTreeItem_unstable(props, ref) {\n    var _props_value;\n    const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);\n    const value = useId('fuiTreeItemValue-', (_props_value = props.value) === null || _props_value === void 0 ? void 0 : _props_value.toString());\n    const { onClick , onKeyDown , as ='div' , itemType ='leaf' , 'aria-level': level = contextLevel , ...rest } = props;\n    const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);\n    const [isActionsVisible, setActionsVisible] = React.useState(false);\n    const [isAsideVisible, setAsideVisible] = React.useState(true);\n    const handleActionsRef = (actions)=>{\n        setAsideVisible(actions === null);\n    };\n    const open = useTreeContext_unstable((ctx)=>ctx.openItems.has(value));\n    const actionsRef = React.useRef(null);\n    const expandIconRef = React.useRef(null);\n    const layoutRef = React.useRef(null);\n    const subtreeRef = React.useRef(null);\n    const handleClick = useEventCallback((event)=>{\n        onClick === null || onClick === void 0 ? void 0 : onClick(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        const isEventFromActions = actionsRef.current && elementContains(actionsRef.current, event.target);\n        if (isEventFromActions) {\n            return;\n        }\n        const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target);\n        if (isEventFromSubtree) {\n            return;\n        }\n        const isFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target);\n        requestTreeResponse({\n            event,\n            itemType,\n            value,\n            type: isFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click\n        });\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);\n        if (event.isDefaultPrevented()) {\n            return;\n        }\n        if (event.currentTarget !== event.target) {\n            return;\n        }\n        switch(event.key){\n            case treeDataTypes.End:\n            case treeDataTypes.Home:\n            case treeDataTypes.Enter:\n            case treeDataTypes.ArrowUp:\n            case treeDataTypes.ArrowDown:\n            case treeDataTypes.ArrowLeft:\n            case treeDataTypes.ArrowRight:\n                return requestTreeResponse({\n                    event,\n                    value,\n                    itemType,\n                    type: event.key\n                });\n        }\n        const isTypeAheadCharacter = event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n        if (isTypeAheadCharacter) {\n            requestTreeResponse({\n                event,\n                value,\n                itemType,\n                type: treeDataTypes.TypeAhead\n            });\n        }\n    });\n    const handleActionsVisible = useEventCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        if (!isTargetFromSubtree) {\n            setActionsVisible(true);\n        }\n    });\n    const handleActionsInvisible = useEventCallback((event)=>{\n        const isTargetFromSubtree = Boolean(subtreeRef.current && elementContains(subtreeRef.current, event.target));\n        const isRelatedTargetFromActions = Boolean(actionsRef.current && elementContains(actionsRef.current, event.relatedTarget));\n        if (isRelatedTargetFromActions) {\n            return setActionsVisible(true);\n        }\n        if (!isTargetFromSubtree) {\n            return setActionsVisible(false);\n        }\n    });\n    return {\n        value,\n        open,\n        subtreeRef,\n        actionsRef: useMergedRefs(actionsRef, handleActionsRef),\n        expandIconRef,\n        layoutRef,\n        itemType,\n        isActionsVisible,\n        isAsideVisible,\n        level,\n        components: {\n            root: 'div'\n        },\n        root: getNativeElementProps(as, {\n            tabIndex: -1,\n            ...rest,\n            ref,\n            role: 'treeitem',\n            'aria-level': level,\n            [dataTreeItemValueAttrName]: value,\n            'aria-expanded': itemType === 'branch' ? open : undefined,\n            onClick: handleClick,\n            onKeyDown: handleKeyDown,\n            onMouseOver: handleActionsVisible,\n            onFocus: handleActionsVisible,\n            onMouseOut: handleActionsInvisible,\n            onBlur: handleActionsInvisible\n        })\n    };\n}\n"],"names":["useTreeItem_unstable","props","ref","_props_value","contextLevel","useTreeContext_unstable","ctx","level","value","useId","toString","onClick","onKeyDown","as","itemType","rest","requestTreeResponse","isActionsVisible","setActionsVisible","React","useState","isAsideVisible","setAsideVisible","handleActionsRef","actions","open","openItems","has","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","handleClick","useEventCallback","event","isDefaultPrevented","isEventFromActions","current","elementContains","target","isEventFromSubtree","isFromExpandIcon","type","treeDataTypes","ExpandIconClick","Click","handleKeyDown","currentTarget","key","End","Home","Enter","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","useMergedRefs","components","root","getNativeElementProps","tabIndex","role","dataTreeItemValueAttrName","undefined","onMouseOver","onFocus","onMouseOut","onBlur"],"mappings":"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"}

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

@@ -1,25 +1,28 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
+});
+Object.defineProperty(exports, "useTreeItemContextValues_unstable", {
+    enumerable: true,
+    get: ()=>useTreeItemContextValues_unstable
 });
-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
-  };
+    const { value , isActionsVisible , isAsideVisible , actionsRef , itemType , layoutRef , subtreeRef , expandIconRef , open  } = state;
+    /**
+   * This context is created with "@fluentui/react-context-selector",
+   * there is no sense to memoize it
+   */ const treeItem = {
+        isActionsVisible,
+        isAsideVisible,
+        value,
+        actionsRef,
+        itemType,
+        layoutRef,
+        subtreeRef,
+        expandIconRef,
+        open
+    };
+    return {
+        treeItem
+    };
 }
-exports.useTreeItemContextValues_unstable = useTreeItemContextValues_unstable;
-//# sourceMappingURL=useTreeItemContextValues.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["React","require","useTreeItemContextValues_unstable","state","buttonSize","isActionsVisible","treeItem","useMemo","button","size","exports"],"sources":["../src/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"}
+{"version":3,"sources":["useTreeItemContextValues.js"],"sourcesContent":["export function useTreeItemContextValues_unstable(state) {\n    const { value , isActionsVisible , isAsideVisible , actionsRef , itemType , layoutRef , subtreeRef , expandIconRef , open  } = state;\n    /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */ const treeItem = {\n        isActionsVisible,\n        isAsideVisible,\n        value,\n        actionsRef,\n        itemType,\n        layoutRef,\n        subtreeRef,\n        expandIconRef,\n        open\n    };\n    return {\n        treeItem\n    };\n}\n"],"names":["useTreeItemContextValues_unstable","state","value","isActionsVisible","isAsideVisible","actionsRef","itemType","layoutRef","subtreeRef","expandIconRef","open","treeItem"],"mappings":";;;;+BAAgBA;;aAAAA;;AAAT,SAASA,kCAAkCC,KAAK,EAAE;IACrD,MAAM,EAAEC,MAAK,EAAGC,iBAAgB,EAAGC,eAAc,EAAGC,WAAU,EAAGC,SAAQ,EAAGC,UAAS,EAAGC,WAAU,EAAGC,cAAa,EAAGC,KAAI,EAAG,GAAGT;IAC/H;;;GAGD,GAAG,MAAMU,WAAW;QACfR;QACAC;QACAF;QACAG;QACAC;QACAC;QACAC;QACAC;QACAC;IACJ;IACA,OAAO;QACHC;IACJ;AACJ"}