@fluentui/react-tree 9.3.1 → 9.4.1

package/lib/components/Tree/useTreeContextValues.js

@@ -1,19 +1,33 @@
+import * as React from 'react';
 export function useTreeContextValues_unstable(state) {
-    const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse, treeType } = state;
-    /**
-   * This context is created with "@fluentui/react-context-selector",
-   * there is no sense to memoize it
-   */ const tree = {
-        treeType,
-        size,
-        level,
-        openItems,
-        appearance,
-        checkedItems,
-        selectionMode,
-        requestTreeResponse
-    };
+    if (state.contextType === 'root') {
+        const { openItems, level, contextType, treeType, checkedItems, selectionMode, appearance, size, requestTreeResponse } = state;
+        /**
+     * This context is created with "@fluentui/react-context-selector",
+     * there is no sense to memoize it
+     */ const tree = {
+            treeType,
+            size,
+            openItems,
+            appearance,
+            checkedItems,
+            selectionMode,
+            contextType,
+            level,
+            requestTreeResponse
+        };
+        return {
+            tree
+        };
+    }
     return {
-        tree
+        // contextType is statically determined by the context
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        tree: React.useMemo(()=>({
+                level: state.level,
+                contextType: 'subtree'
+            }), [
+            state.level
+        ])
     };
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  const { openItems, checkedItems, selectionMode, level, appearance, size, requestTreeResponse, treeType } = 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    treeType,\n    size,\n    level,\n    openItems,\n    appearance,\n    checkedItems,\n    selectionMode,\n    requestTreeResponse,\n  };\n\n  return { tree };\n}\n"],"names":["useTreeContextValues_unstable","state","openItems","checkedItems","selectionMode","level","appearance","size","requestTreeResponse","treeType","tree"],"mappings":"AAGA,OAAO,SAASA,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,YAAY,EAAEC,aAAa,EAAEC,KAAK,EAAEC,UAAU,EAAEC,IAAI,EAAEC,mBAAmB,EAAEC,QAAQ,EAAE,GAAGR;IAC3G;;;GAGC,GACD,MAAMS,OAAyB;QAC7BD;QACAF;QACAF;QACAH;QACAI;QACAH;QACAC;QACAI;IACF;IAEA,OAAO;QAAEE;IAAK;AAChB"}
+{"version":3,"sources":["useTreeContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport { TreeContextValue } from '../../contexts';\nimport { TreeContextValues, TreeState } from './Tree.types';\n\nexport function useTreeContextValues_unstable(state: TreeState): TreeContextValues {\n  if (state.contextType === 'root') {\n    const {\n      openItems,\n      level,\n      contextType,\n      treeType,\n      checkedItems,\n      selectionMode,\n      appearance,\n      size,\n      requestTreeResponse,\n    } = 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      treeType,\n      size,\n      openItems,\n      appearance,\n      checkedItems,\n      selectionMode,\n      contextType,\n      level,\n      requestTreeResponse,\n    };\n\n    return { tree };\n  }\n  return {\n    // contextType is statically determined by the context\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    tree: React.useMemo(() => ({ level: state.level, contextType: 'subtree' }), [state.level]),\n  };\n}\n"],"names":["React","useTreeContextValues_unstable","state","contextType","openItems","level","treeType","checkedItems","selectionMode","appearance","size","requestTreeResponse","tree","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D,IAAIA,MAAMC,WAAW,KAAK,QAAQ;QAChC,MAAM,EACJC,SAAS,EACTC,KAAK,EACLF,WAAW,EACXG,QAAQ,EACRC,YAAY,EACZC,aAAa,EACbC,UAAU,EACVC,IAAI,EACJC,mBAAmB,EACpB,GAAGT;QACJ;;;KAGC,GACD,MAAMU,OAAyB;YAC7BN;YACAI;YACAN;YACAK;YACAF;YACAC;YACAL;YACAE;YACAM;QACF;QAEA,OAAO;YAAEC;QAAK;IAChB;IACA,OAAO;QACL,sDAAsD;QACtD,sDAAsD;QACtDA,MAAMZ,MAAMa,OAAO,CAAC,IAAO,CAAA;gBAAER,OAAOH,MAAMG,KAAK;gBAAEF,aAAa;YAAU,CAAA,GAAI;YAACD,MAAMG,KAAK;SAAC;IAC3F;AACF"}

package/lib/components/Tree/useTreeStyles.styles.js

@@ -1,24 +1,21 @@
-import { __styles, mergeClasses } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 export const treeClassNames = {
   root: 'fui-Tree'
 };
+const useBaseStyles = /*#__PURE__*/__resetStyles("rnv2ez3", null, [".rnv2ez3{display:flex;flex-direction:column;row-gap:var(--spacingVerticalXXS);}"]);
 const useStyles = /*#__PURE__*/__styles({
-  root: {
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
-    Belr9w4: "f1j0q4x9"
-  },
   subtree: {
     z8tnut: "fclwglc"
   }
 }, {
-  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1j0q4x9{row-gap:var(--spacingVerticalXXS);}", ".fclwglc{padding-top:var(--spacingVerticalXXS);}"]
+  d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}"]
 });
 export const useTreeStyles_unstable = state => {
+  const baseStyles = useBaseStyles();
   const styles = useStyles();
   const isSubTree = state.level > 1;
-  state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);
+  state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);
   return state;
 };
 //# sourceMappingURL=useTreeStyles.styles.js.map

package/lib/components/Tree/useTreeStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","treeClassNames","root","useStyles","mc9l5x","Beiy3e4","Belr9w4","subtree","z8tnut","d","useTreeStyles_unstable","state","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        rowGap: tokens.spacingVerticalXXS\n    },\n    subtree: {\n        paddingTop: tokens.spacingVerticalXXS\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const isSubTree = state.level > 1;\n    state.root.className = mergeClasses(treeClassNames.root, styles.root, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAMU,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,CAAC;EACjCH,KAAK,CAACT,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEW,SAAS,IAAID,MAAM,CAACL,OAAO,EAAEI,KAAK,CAACT,IAAI,CAACa,SAAS,CAAC;EACxH,OAAOJ,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","treeClassNames","root","useBaseStyles","useStyles","subtree","z8tnut","d","useTreeStyles_unstable","state","baseStyles","styles","isSubTree","level","className"],"sources":["useTreeStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const treeClassNames = {\n    root: 'fui-Tree'\n};\nconst useBaseStyles = makeResetStyles({\n    display: 'flex',\n    flexDirection: 'column',\n    rowGap: tokens.spacingVerticalXXS\n});\nconst useStyles = makeStyles({\n    subtree: {\n        paddingTop: tokens.spacingVerticalXXS\n    }\n});\nexport const useTreeStyles_unstable = (state)=>{\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const isSubTree = state.level > 1;\n    state.root.className = mergeClasses(treeClassNames.root, baseStyles, isSubTree && styles.subtree, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGN,aAAA,qGAIrB,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIjB,CAAC;AACF,OAAO,MAAMC,sBAAsB,GAAIC,KAAK,IAAG;EAC3C,MAAMC,UAAU,GAAGP,aAAa,CAAC,CAAC;EAClC,MAAMQ,MAAM,GAAGP,SAAS,CAAC,CAAC;EAC1B,MAAMQ,SAAS,GAAGH,KAAK,CAACI,KAAK,GAAG,CAAC;EACjCJ,KAAK,CAACP,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,cAAc,CAACC,IAAI,EAAEQ,UAAU,EAAEE,SAAS,IAAID,MAAM,CAACN,OAAO,EAAEI,KAAK,CAACP,IAAI,CAACY,SAAS,CAAC;EACvH,OAAOL,KAAK;AAChB,CAAC"}

package/lib/components/TreeItem/useTreeItem.js

@@ -4,7 +4,7 @@ import { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } f
 import { elementContains } from '@fluentui/react-portal';
 import { Space } from '@fluentui/keyboard-keys';
 import { treeDataTypes } from '../../utils/tokens';
-import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts/index';
+import { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
 import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';
 /**
  * Create the state required to render TreeItem.
@@ -21,7 +21,7 @@ import { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromEleme
         warnIfNoProperPropsFlatTreeItem(props);
     }
     const requestTreeResponse = useTreeContext_unstable((ctx)=>ctx.requestTreeResponse);
-    const contextLevel = useTreeContext_unstable((ctx)=>ctx.level);
+    const { level: contextLevel } = useSubtreeContext_unstable();
     const parentValue = useTreeItemContext_unstable((ctx)=>{
         var _props_parentValue;
         return (_props_parentValue = props.parentValue) !== null && _props_parentValue !== void 0 ? _props_parentValue : ctx.value;

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

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts/index';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const contextLevel = useTreeContext_unstable(ctx => ctx.level);\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\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 isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: !open,\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\n      });\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.Enter: {\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        props.onOpenChange?.(event, data);\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          requestType: 'open',\n        });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n      }\n      case treeDataTypes.ArrowRight:\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getNativeElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\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        onChange: handleChange,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","contextLevel","level","parentValue","value","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,YAAYC,cAAc,YAAY;AACtC,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,aAAa,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAChH,SAASC,eAAe,QAAQ,yBAAyB;AAEzD,SAASC,KAAK,QAAQ,0BAA0B;AAChD,SAASC,aAAa,QAAQ,qBAAqB;AACnD,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,uBAAuB;AAC5F,SAASC,yBAAyB,QAAQ,0CAA0C;AAEpF;;;;;;;;CAQC,GACD,OAAO,SAASC,qBAAqBC,KAAoB,EAAEC,GAA8B;QAW9CD;IAVzC,MAAME,WAAWN,wBAAwBO,CAAAA,MAAOA,IAAID,QAAQ;IAC5D,IAAIA,aAAa,QAAQ;QACvBE,gCAAgCJ;IAClC;IACA,MAAMK,sBAAsBT,wBAAwBO,CAAAA,MAAOA,IAAIE,mBAAmB;IAClF,MAAMC,eAAeV,wBAAwBO,CAAAA,MAAOA,IAAII,KAAK;IAC7D,MAAMC,cAAcX,4BAA4BM,CAAAA;YAAOH;eAAAA,CAAAA,qBAAAA,MAAMQ,WAAW,cAAjBR,gCAAAA,qBAAqBG,IAAIM,KAAK;IAAD;IAEpF,iDAAiD;IACjD,sDAAsD;IACtD,MAAMA,QAAQpB,MAAM,sBAAqBW,eAAAA,MAAMS,KAAK,cAAXT,mCAAAA,aAAaU,QAAQ;IAE9D,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAEC,KAAK,KAAK,EAAEC,WAAW,MAAM,EAAE,cAAcP,QAAQD,YAAY,EAAE,GAAGS,MAAM,GAAGf;IAE3G,MAAM,CAACgB,kBAAkBC,kBAAkB,GAAG/B,MAAMgC,QAAQ,CAAC;IAC7D,MAAM,CAACC,gBAAgBC,gBAAgB,GAAGlC,MAAMgC,QAAQ,CAAC;IAEzD,MAAMG,mBAAmBnC,MAAMoC,WAAW,CAAC,CAACC;QAC1CH,gBAAgBG,mBAAmB;IACrC,GAAG,EAAE;IAEL,MAAMC,aAAatC,MAAMuC,MAAM,CAAiB;IAChD,MAAMC,gBAAgBxC,MAAMuC,MAAM,CAAiB;IACnD,MAAME,YAAYzC,MAAMuC,MAAM,CAAiB;IAC/C,MAAMG,aAAa1C,MAAMuC,MAAM,CAAiB;IAChD,MAAMI,eAAe3C,MAAMuC,MAAM,CAAmB;IAEpD,MAAMK,OAAOlC,wBAAwBO,CAAAA;YAAOH;eAAAA,CAAAA,cAAAA,MAAM8B,IAAI,cAAV9B,yBAAAA,cAAcG,IAAI4B,SAAS,CAACC,GAAG,CAACvB;IAAK;IACjF,MAAMwB,gBAAgBrC,wBAAwBO,CAAAA,MAAOA,IAAI8B,aAAa;IACtE,MAAMC,UAAUtC,wBAAwBO,CAAAA;YAAOA;eAAAA,CAAAA,wBAAAA,IAAIgC,YAAY,CAACC,GAAG,CAAC3B,oBAArBN,mCAAAA,wBAA+B;IAAI;IAElF,MAAMkC,cAAc9C,iBAAiB,CAAC+C;QACpC3B,oBAAAA,8BAAAA,QAAU2B;QACV,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,MAAMC,qBAAqBhB,WAAWiB,OAAO,IAAIhD,gBAAgB+B,WAAWiB,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIF,oBAAoB;YACtB;QACF;QACA,MAAMG,qBAAqBf,WAAWa,OAAO,IAAIhD,gBAAgBmC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF;QACA,MAAMC,uBAAuBf,aAAaY,OAAO,IAAIhD,gBAAgBoC,aAAaY,OAAO,EAAEH,MAAMI,MAAM;QACvG,IAAIE,sBAAsB;YACxB;QACF;QACA,MAAMC,wBAAwBnB,cAAce,OAAO,IAAIhD,gBAAgBiC,cAAce,OAAO,EAAEH,MAAMI,MAAM;QAE1GvD,SAAS2D,uBAAuB,CAAC;gBAQ/B9C;YAPA,MAAM+C,OAAO;gBACXT;gBACA7B;gBACAqB,MAAM,CAACA;gBACPY,QAAQJ,MAAMU,aAAa;gBAC3BC,MAAMJ,wBAAwBlD,cAAcuD,eAAe,GAAGvD,cAAcwD,KAAK;YACnF;aACAnD,sBAAAA,MAAMoD,YAAY,cAAlBpD,0CAAAA,yBAAAA,OAAqBsC,OAAOS;YAC5B1C,oBAAoB;gBAClB,GAAG0C,IAAI;gBACPjC;gBACAuC,aAAa;YACf;YACAhD,oBAAoB;gBAClB,GAAG0C,IAAI;gBACPjC;gBACAN;gBACA6C,aAAa;gBACbJ,MAAMtD,cAAcwD,KAAK;YAC3B;QACF;IACF;IAEA,MAAMG,gBAAgB/D,iBAAiB,CAAC+C;QACtC1B,sBAAAA,gCAAAA,UAAY0B;QACZ,2EAA2E;QAC3E,IAAIA,MAAMC,kBAAkB,MAAMD,MAAMU,aAAa,KAAKV,MAAMI,MAAM,EAAE;YACtE;QACF;QACA,OAAQJ,MAAMiB,GAAG;YACf,KAAK7D;gBACH,IAAIuC,kBAAkB,QAAQ;wBAC5BJ;qBAAAA,wBAAAA,aAAaY,OAAO,cAApBZ,4CAAAA,sBAAsB2B,KAAK;oBAC3BlB,MAAMmB,cAAc;gBACtB;gBACA;YACF,KAAK9D,cAAc+D,KAAK;gBAAE;wBAQxB1D;oBAPA,MAAM+C,OAAO;wBACXtC;wBACA6B;wBACAR,MAAM,CAACA;wBACPmB,MAAMX,MAAMiB,GAAG;wBACfb,QAAQJ,MAAMU,aAAa;oBAC7B;qBACAhD,sBAAAA,MAAMoD,YAAY,cAAlBpD,0CAAAA,yBAAAA,OAAqBsC,OAAOS;oBAC5B,OAAO1C,oBAAoB;wBACzB,GAAG0C,IAAI;wBACPjC;wBACAuC,aAAa;oBACf;gBACF;YACA,KAAK1D,cAAcgE,GAAG;YACtB,KAAKhE,cAAciE,IAAI;YACvB,KAAKjE,cAAckE,OAAO;YAC1B,KAAKlE,cAAcmE,SAAS;gBAC1B,OAAOzD,oBAAoB;oBACzBgD,aAAa;oBACbf;oBACA7B;oBACAK;oBACAN;oBACAyC,MAAMX,MAAMiB,GAAG;oBACfb,QAAQJ,MAAMU,aAAa;gBAC7B;YACF,KAAKrD,cAAcoE,SAAS;gBAAE;oBAC5B,4DAA4D;oBAC5D,IAAIxD,UAAU,KAAK,CAACuB,MAAM;wBACxB;oBACF;oBACA,MAAMiB,OAAO;wBACXtC;wBACA6B;wBACAR,MAAM,CAACA;wBACPmB,MAAMX,MAAMiB,GAAG;wBACfb,QAAQJ,MAAMU,aAAa;oBAC7B;oBACA,IAAIlB,MAAM;4BACR9B;yBAAAA,uBAAAA,MAAMoD,YAAY,cAAlBpD,2CAAAA,0BAAAA,OAAqBsC,OAAOS;oBAC9B;oBACA,OAAO1C,oBAAoB;wBACzB,GAAG0C,IAAI;wBACPjC;wBACAN;wBACA6C,aAAavB,OAAO,SAAS;oBAC/B;gBACF;YACA,KAAKnC,cAAcqE,UAAU;gBAC3B,gDAAgD;gBAChD,IAAIlD,aAAa,QAAQ;oBACvB;gBACF;gBACA,MAAMiC,OAAO;oBACXtC;oBACA6B;oBACAR,MAAM,CAACA;oBACPmB,MAAMX,MAAMiB,GAAG;oBACfb,QAAQJ,MAAMU,aAAa;gBAC7B;gBACA,IAAI,CAAClB,MAAM;wBACT9B;qBAAAA,uBAAAA,MAAMoD,YAAY,cAAlBpD,2CAAAA,0BAAAA,OAAqBsC,OAAOS;gBAC9B;gBACA,OAAO1C,oBAAoB;oBACzB,GAAG0C,IAAI;oBACPjC;oBACAN;oBACA6C,aAAavB,OAAO,aAAa;gBACnC;QACJ;QACA,MAAMmC,uBACJ3B,MAAMiB,GAAG,CAACW,MAAM,KAAK,KAAK5B,MAAMiB,GAAG,CAACY,KAAK,CAAC,SAAS,CAAC7B,MAAM8B,MAAM,IAAI,CAAC9B,MAAM+B,OAAO,IAAI,CAAC/B,MAAMgC,OAAO;QACtG,IAAIL,sBAAsB;YACxB5D,oBAAoB;gBAClBgD,aAAa;gBACbf;gBACAI,QAAQJ,MAAMU,aAAa;gBAC3BvC;gBACAK;gBACAmC,MAAMtD,cAAc4E,SAAS;gBAC7B/D;YACF;QACF;IACF;IAEA,MAAMgE,uBAAuBjF,iBAAiB,CAAC+C;QAC7C,MAAMmC,sBAAsBC,QAC1B9C,WAAWa,OAAO,IAAIhD,gBAAgBmC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QAExE,IAAI,CAAC+B,qBAAqB;YACxBxD,kBAAkB;QACpB;IACF;IAEA,MAAM0D,yBAAyBpF,iBAAiB,CAAC+C;QAC/C,MAAMmC,sBAAsBC,QAC1B9C,WAAWa,OAAO,IAAIhD,gBAAgBmC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QAExE,MAAMkC,6BAA6BF,QACjClD,WAAWiB,OAAO,IAAIhD,gBAAgB+B,WAAWiB,OAAO,EAAEH,MAAMuC,aAAa;QAE/E,IAAID,4BAA4B;YAC9B,OAAO3D,kBAAkB;QAC3B;QACA,IAAI,CAACwD,qBAAqB;YACxB,OAAOxD,kBAAkB;QAC3B;IACF;IAEA,MAAM6D,eAAevF,iBAAiB,CAAC+C;QACrC,IAAIA,MAAMC,kBAAkB,IAAI;YAC9B;QACF;QACA,MAAMI,qBAAqBf,WAAWa,OAAO,IAAIhD,gBAAgBmC,WAAWa,OAAO,EAAEH,MAAMI,MAAM;QACjG,IAAIC,oBAAoB;YACtB;QACF;QACAtC,oBAAoB;YAClBgD,aAAa;YACbf;YACA7B;YACAK;YACAmC,MAAM;YACNP,QAAQJ,MAAMU,aAAa;YAC3Bd,SAASA,YAAY,UAAU,OAAO,CAACA;QACzC;IACF;IAEA,OAAO;QACLzB;QACAqB;QACAI;QACAN;QACAD;QACAE;QACAH;QACAF,YAAYlC,cAAc+B,kBAAkBG;QAC5CV;QACAP;QACAwE,YAAY;YACVC,MAAM;QACR;QACA7D;QACAH;QACAgE,MAAMxF,KAAKyF,MAAM,CACf7F,sBAAsByB,IAAI;YACxBqE,UAAU,CAAC;YACX,CAACpF,0BAA0B,EAAEW;YAC7B,GAAGM,IAAI;YACPd;YACAkF,MAAM;YACN,cAAc5E;YACd,gBAAgB0B,kBAAkB,gBAAgBC,UAAUkD;YAC5D,uDAAuD;YACvD,+CAA+C;YAC/C,gEAAgE;YAChE,iBAAiBnD,kBAAkB,WAAYC,UAAsB;YACrE,iBAAiBpB,aAAa,WAAWgB,OAAOsD;YAChDzE,SAAS0B;YACTzB,WAAW0C;YACX+B,aAAab;YACbc,SAASd;YACTe,YAAYZ;YACZa,QAAQb;YACRc,UAAUX;QACZ,IACA;YAAEY,aAAa;QAAM;IAEzB;AACF;AAEA,SAAStF,gCACPJ,KAA2F;IAE3F,IAAI2F,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IACE7F,KAAK,CAAC,gBAAgB,KAAKoF,aAC3BpF,KAAK,CAAC,eAAe,KAAKoF,aAC1BpF,KAAK,CAAC,aAAa,KAAKoF,aACvBpF,MAAMQ,WAAW,KAAK4E,aAAapF,KAAK,CAAC,aAAa,KAAK,GAC5D;YACA,sCAAsC;YACtC8F,QAAQC,KAAK,CAAuB,CAAC,sBACb,EAAEhG,qBAAqBiG,IAAI,CAAC;;;;;;;sEAQpD,CAAC;QACH;IACF;AACF"}
+{"version":3,"sources":["useTreeItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { getNativeElementProps, useId, useMergedRefs, useEventCallback, slot } from '@fluentui/react-utilities';\nimport { elementContains } from '@fluentui/react-portal';\nimport type { TreeItemProps, TreeItemState } from './TreeItem.types';\nimport { Space } from '@fluentui/keyboard-keys';\nimport { treeDataTypes } from '../../utils/tokens';\nimport { useTreeContext_unstable, useSubtreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { dataTreeItemValueAttrName } from '../../utils/getTreeItemValueFromElement';\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 function useTreeItem_unstable(props: TreeItemProps, ref: React.Ref<HTMLDivElement>): TreeItemState {\n  const treeType = useTreeContext_unstable(ctx => ctx.treeType);\n  if (treeType === 'flat') {\n    warnIfNoProperPropsFlatTreeItem(props);\n  }\n  const requestTreeResponse = useTreeContext_unstable(ctx => ctx.requestTreeResponse);\n  const { level: contextLevel } = useSubtreeContext_unstable();\n  const parentValue = useTreeItemContext_unstable(ctx => props.parentValue ?? ctx.value);\n\n  // note, if the value is not externally provided,\n  // then selection and expansion will not work properly\n  const value = useId('fuiTreeItemValue-', props.value?.toString());\n\n  const { onClick, onKeyDown, as = 'div', itemType = 'leaf', 'aria-level': level = contextLevel, ...rest } = props;\n\n  const [isActionsVisible, setActionsVisible] = React.useState(false);\n  const [isAsideVisible, setAsideVisible] = React.useState(true);\n\n  const handleActionsRef = React.useCallback((actionsElement: HTMLDivElement | null) => {\n    setAsideVisible(actionsElement === null);\n  }, []);\n\n  const actionsRef = React.useRef<HTMLDivElement>(null);\n  const expandIconRef = React.useRef<HTMLDivElement>(null);\n  const layoutRef = React.useRef<HTMLDivElement>(null);\n  const subtreeRef = React.useRef<HTMLDivElement>(null);\n  const selectionRef = React.useRef<HTMLInputElement>(null);\n\n  const open = useTreeContext_unstable(ctx => props.open ?? ctx.openItems.has(value));\n  const selectionMode = useTreeContext_unstable(ctx => ctx.selectionMode);\n  const checked = useTreeContext_unstable(ctx => ctx.checkedItems.get(value) ?? false);\n\n  const handleClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    onClick?.(event);\n    if (event.isDefaultPrevented()) {\n      return;\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 isEventFromSelection = selectionRef.current && elementContains(selectionRef.current, event.target as Node);\n    if (isEventFromSelection) {\n      return;\n    }\n    const isEventFromExpandIcon = expandIconRef.current && elementContains(expandIconRef.current, event.target as Node);\n\n    ReactDOM.unstable_batchedUpdates(() => {\n      const data = {\n        event,\n        value,\n        open: !open,\n        target: event.currentTarget,\n        type: isEventFromExpandIcon ? treeDataTypes.ExpandIconClick : treeDataTypes.Click,\n      } as const;\n      props.onOpenChange?.(event, data);\n      requestTreeResponse({\n        ...data,\n        itemType,\n        requestType: 'open',\n      });\n      requestTreeResponse({\n        ...data,\n        itemType,\n        parentValue,\n        requestType: 'navigate',\n        type: treeDataTypes.Click,\n      });\n    });\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    onKeyDown?.(event);\n    // Ignore keyboard events that do not originate from the current tree item.\n    if (event.isDefaultPrevented() || event.currentTarget !== event.target) {\n      return;\n    }\n    switch (event.key) {\n      case Space:\n        if (selectionMode !== 'none') {\n          selectionRef.current?.click();\n          event.preventDefault();\n        }\n        return;\n      case treeDataTypes.Enter: {\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        props.onOpenChange?.(event, data);\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          requestType: 'open',\n        });\n      }\n      case treeDataTypes.End:\n      case treeDataTypes.Home:\n      case treeDataTypes.ArrowUp:\n      case treeDataTypes.ArrowDown:\n        return requestTreeResponse({\n          requestType: 'navigate',\n          event,\n          value,\n          itemType,\n          parentValue,\n          type: event.key,\n          target: event.currentTarget,\n        });\n      case treeDataTypes.ArrowLeft: {\n        // do not navigate to parent if the item is on the top level\n        if (level === 1 && !open) {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'open' : 'navigate',\n        });\n      }\n      case treeDataTypes.ArrowRight:\n        // do not navigate or open if the item is a leaf\n        if (itemType === 'leaf') {\n          return;\n        }\n        const data = {\n          value,\n          event,\n          open: !open,\n          type: event.key,\n          target: event.currentTarget,\n        } as const;\n        if (!open) {\n          props.onOpenChange?.(event, data);\n        }\n        return requestTreeResponse({\n          ...data,\n          itemType,\n          parentValue,\n          requestType: open ? 'navigate' : 'open',\n        });\n    }\n    const isTypeAheadCharacter =\n      event.key.length === 1 && event.key.match(/\\w/) && !event.altKey && !event.ctrlKey && !event.metaKey;\n    if (isTypeAheadCharacter) {\n      requestTreeResponse({\n        requestType: 'navigate',\n        event,\n        target: event.currentTarget,\n        value,\n        itemType,\n        type: treeDataTypes.TypeAhead,\n        parentValue,\n      });\n    }\n  });\n\n  const handleActionsVisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    if (!isTargetFromSubtree) {\n      setActionsVisible(true);\n    }\n  });\n\n  const handleActionsInvisible = useEventCallback((event: React.FocusEvent | React.MouseEvent) => {\n    const isTargetFromSubtree = Boolean(\n      subtreeRef.current && elementContains(subtreeRef.current, event.target as Node),\n    );\n    const isRelatedTargetFromActions = Boolean(\n      actionsRef.current && elementContains(actionsRef.current, event.relatedTarget as Node),\n    );\n    if (isRelatedTargetFromActions) {\n      return setActionsVisible(true);\n    }\n    if (!isTargetFromSubtree) {\n      return setActionsVisible(false);\n    }\n  });\n\n  const handleChange = useEventCallback((event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n    const isEventFromSubtree = subtreeRef.current && elementContains(subtreeRef.current, event.target as Node);\n    if (isEventFromSubtree) {\n      return;\n    }\n    requestTreeResponse({\n      requestType: 'selection',\n      event,\n      value,\n      itemType,\n      type: 'Change',\n      target: event.currentTarget,\n      checked: checked === 'mixed' ? true : !checked,\n    });\n  });\n\n  return {\n    value,\n    open,\n    checked,\n    subtreeRef,\n    layoutRef,\n    selectionRef,\n    expandIconRef,\n    actionsRef: useMergedRefs(handleActionsRef, actionsRef),\n    itemType,\n    level,\n    components: {\n      root: 'div',\n    },\n    isAsideVisible,\n    isActionsVisible,\n    root: slot.always(\n      getNativeElementProps(as, {\n        tabIndex: -1,\n        [dataTreeItemValueAttrName]: value,\n        ...rest,\n        ref,\n        role: 'treeitem',\n        'aria-level': level,\n        'aria-checked': selectionMode === 'multiselect' ? checked : undefined,\n        // aria-selected is required according to WAI-ARIA spec\n        // https://www.w3.org/TR/wai-aria-1.1/#treeitem\n        // Casting: when selectionMode is 'single', checked is a boolean\n        'aria-selected': selectionMode === 'single' ? (checked as boolean) : 'false',\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        onChange: handleChange,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n}\n\nfunction warnIfNoProperPropsFlatTreeItem(\n  props: Pick<TreeItemProps, 'aria-setsize' | 'aria-posinset' | 'aria-level' | 'parentValue'>,\n) {\n  if (process.env.NODE_ENV !== 'production') {\n    if (\n      props['aria-posinset'] === undefined ||\n      props['aria-setsize'] === undefined ||\n      props['aria-level'] === undefined ||\n      (props.parentValue === undefined && props['aria-level'] !== 1)\n    ) {\n      // eslint-disable-next-line no-console\n      console.error(/** #__DE-INDENT__ */ `\n        @fluentui/react-tree [${useTreeItem_unstable.name}]:\n        A flat treeitem must have \"aria-posinset\", \"aria-setsize\", \"aria-level\"\n        and \"parentValue\" (if \"aria-level\" > 1) to ensure a11y and navigation.\n\n        - \"aria-posinset\": the position of this treeitem in the current level of the tree.\n        - \"aria-setsize\": the number of siblings in this level of the tree.\n        - \"aria-level\": the current level of the treeitem.\n        - \"parentValue\": the \"value\" property of the parent item of this item.\n      `);\n    }\n  }\n}\n"],"names":["React","ReactDOM","getNativeElementProps","useId","useMergedRefs","useEventCallback","slot","elementContains","Space","treeDataTypes","useTreeContext_unstable","useSubtreeContext_unstable","useTreeItemContext_unstable","dataTreeItemValueAttrName","useTreeItem_unstable","props","ref","treeType","ctx","warnIfNoProperPropsFlatTreeItem","requestTreeResponse","level","contextLevel","parentValue","value","toString","onClick","onKeyDown","as","itemType","rest","isActionsVisible","setActionsVisible","useState","isAsideVisible","setAsideVisible","handleActionsRef","useCallback","actionsElement","actionsRef","useRef","expandIconRef","layoutRef","subtreeRef","selectionRef","open","openItems","has","selectionMode","checked","checkedItems","get","handleClick","event","isDefaultPrevented","isEventFromActions","current","target","isEventFromSubtree","isEventFromSelection","isEventFromExpandIcon","unstable_batchedUpdates","data","currentTarget","type","ExpandIconClick","Click","onOpenChange","requestType","handleKeyDown","key","click","preventDefault","Enter","End","Home","ArrowUp","ArrowDown","ArrowLeft","ArrowRight","isTypeAheadCharacter","length","match","altKey","ctrlKey","metaKey","TypeAhead","handleActionsVisible","isTargetFromSubtree","Boolean","handleActionsInvisible","isRelatedTargetFromActions","relatedTarget","handleChange","components","root","always","tabIndex","role","undefined","onMouseOver","onFocus","onMouseOut","onBlur","onChange","elementType","process","env","NODE_ENV","console","error","name"],"mappings":"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"}

package/lib/components/TreeItem/useTreeItemStyles.styles.js

@@ -1,11 +1,14 @@
-import { __styles, mergeClasses } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { createFocusOutlineStyle } from '@fluentui/react-tabster';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { treeItemLevelToken } from '../../utils/tokens';
+import { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';
+import { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';
 export const treeItemClassNames = {
   root: 'fui-TreeItem'
 };
-const useRootStyles = /*#__PURE__*/__styles({
+const useBaseStyles = /*#__PURE__*/__resetStyles("r1hiwysc", "r1eoub7o", [".r1hiwysc{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-right:var(--spacingHorizontalNone);}", ".r1hiwysc:focus{outline-style:none;}", ".r1hiwysc:focus-visible{outline-style:none;}", ".r1hiwysc[data-fui-focus-visible]>.fui-TreeItemLayout,.r1hiwysc[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}", ".r1eoub7o{position:relative;cursor:pointer;display:flex;flex-direction:column;box-sizing:border-box;background-color:var(--colorSubtleBackground);color:var(--colorNeutralForeground2);padding-left:var(--spacingHorizontalNone);}", ".r1eoub7o:focus{outline-style:none;}", ".r1eoub7o:focus-visible{outline-style:none;}", ".r1eoub7o[data-fui-focus-visible]>.fui-TreeItemLayout,.r1eoub7o[data-fui-focus-visible]>.fui-TreeItemPersonaLayout{border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);outline-color:var(--colorStrokeFocus2);outline-radius:var(--borderRadiusMedium);outline-width:2px;outline-style:solid;}"]);
+const useStyles = /*#__PURE__*/__styles({
   level1: {
     iytv0q: "f10bgyvd"
   },
@@ -35,63 +38,20 @@ const useRootStyles = /*#__PURE__*/__styles({
   },
   level10: {
     iytv0q: "fyat3t"
-  },
-  base: {
-    qhf8xq: "f10pi13n",
-    Bceei9c: "f1k6fduh",
-    mc9l5x: "f22iagw",
-    Beiy3e4: "f1vx9l62",
-    B7ck84d: "f1ewtqcl",
-    De3pzq: "fhovq9v",
-    sj55zd: "fkfq4zb",
-    z189sj: ["flk2ux3", "fkl3uby"]
-  },
-  focusIndicator: {
-    Brovlpu: "ftqa4ok",
-    B486eqv: "f2hkw1w",
-    B8q5s1w: "f8hki3x",
-    Bci5o5g: ["f1d2448m", "ffh67wi"],
-    n8qw10: "f1bjia2o",
-    Bdrgwmp: ["ffh67wi", "f1d2448m"],
-    Bm4h7ae: "f15bsgw9",
-    B7ys5i9: "f14e48fq",
-    Busjfv9: "f18yb2kv",
-    Bhk32uz: "fd6o370",
-    Bf4ptjt: "fh1cnn4",
-    kclons: ["fy7oxxb", "f184ne2d"],
-    Bhdgwq3: "fpukqih",
-    Blkhhs4: ["f184ne2d", "fy7oxxb"],
-    Bqtpl0w: "frrh606",
-    clg4pj: ["f1v5zibi", "fo2hd23"],
-    hgwjuy: "ful5kiu",
-    Bonggc9: ["fo2hd23", "f1v5zibi"],
-    B1tsrr9: ["f1jqcqds", "ftffrms"],
-    Dah5zi: ["ftffrms", "f1jqcqds"],
-    Bkh64rk: ["f2e7qr6", "fsr1zz6"],
-    qqdqy8: ["fsr1zz6", "f2e7qr6"],
-    B6dhp37: "f1dvezut",
-    i03rao: ["fd0oaoj", "f1cwg4i8"],
-    Boxcth7: "fjvm52t",
-    Bsom6fd: ["f1cwg4i8", "fd0oaoj"],
-    J0r882: "f57olzd",
-    Bule8hv: ["f4stah7", "fs1por5"],
-    Bjwuhne: "f480a47",
-    Ghsupd: ["fs1por5", "f4stah7"]
   }
 }, {
-  d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}", ".f10pi13n{position:relative;}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".f1ewtqcl{box-sizing:border-box;}", ".fhovq9v{background-color:var(--colorSubtleBackground);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".flk2ux3{padding-right:var(--spacingHorizontalNone);}", ".fkl3uby{padding-left:var(--spacingHorizontalNone);}", ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f15bsgw9[data-fui-focus-visible]::after{content:\"\";}", ".f14e48fq[data-fui-focus-visible]::after{position:absolute;}", ".f18yb2kv[data-fui-focus-visible]::after{pointer-events:none;}", ".fd6o370[data-fui-focus-visible]::after{z-index:1;}", ".fh1cnn4[data-fui-focus-visible]::after{border-top-style:solid;}", ".fy7oxxb[data-fui-focus-visible]::after{border-right-style:solid;}", ".f184ne2d[data-fui-focus-visible]::after{border-left-style:solid;}", ".fpukqih[data-fui-focus-visible]::after{border-bottom-style:solid;}", ".frrh606[data-fui-focus-visible]::after{border-top-width:2px;}", ".f1v5zibi[data-fui-focus-visible]::after{border-right-width:2px;}", ".fo2hd23[data-fui-focus-visible]::after{border-left-width:2px;}", ".ful5kiu[data-fui-focus-visible]::after{border-bottom-width:2px;}", ".f1jqcqds[data-fui-focus-visible]::after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".ftffrms[data-fui-focus-visible]::after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f2e7qr6[data-fui-focus-visible]::after{border-top-right-radius:var(--borderRadiusMedium);}", ".fsr1zz6[data-fui-focus-visible]::after{border-top-left-radius:var(--borderRadiusMedium);}", ".f1dvezut[data-fui-focus-visible]::after{border-top-color:var(--colorStrokeFocus2);}", ".fd0oaoj[data-fui-focus-visible]::after{border-right-color:var(--colorStrokeFocus2);}", ".f1cwg4i8[data-fui-focus-visible]::after{border-left-color:var(--colorStrokeFocus2);}", ".fjvm52t[data-fui-focus-visible]::after{border-bottom-color:var(--colorStrokeFocus2);}", ".f57olzd[data-fui-focus-visible]::after{top:calc(2px * -1);}", ".f4stah7[data-fui-focus-visible]::after{right:calc(2px * -1);}", ".fs1por5[data-fui-focus-visible]::after{left:calc(2px * -1);}", ".f480a47[data-fui-focus-visible]::after{bottom:calc(2px * -1);}"],
-  f: [".ftqa4ok:focus{outline-style:none;}"],
-  i: [".f2hkw1w:focus-visible{outline-style:none;}"]
+  d: [".f10bgyvd{--fluent-TreeItem--level:1;}", ".f1h0rod3{--fluent-TreeItem--level:2;}", ".fgoqafk{--fluent-TreeItem--level:3;}", ".f75dvuh{--fluent-TreeItem--level:4;}", ".fqk7yw6{--fluent-TreeItem--level:5;}", ".f1r3z17b{--fluent-TreeItem--level:6;}", ".f1hrpd1h{--fluent-TreeItem--level:7;}", ".f1iy65d0{--fluent-TreeItem--level:8;}", ".ftg42e5{--fluent-TreeItem--level:9;}", ".fyat3t{--fluent-TreeItem--level:10;}"]
 });
 /**
  * Apply styling to the TreeItem slots based on the state
  */
 export const useTreeItemStyles_unstable = state => {
-  const rootStyles = useRootStyles();
+  const baseStyles = useBaseStyles();
+  const styles = useStyles();
   const {
     level
   } = state;
-  state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], rootStyles.base, rootStyles.focusIndicator, state.root.className);
+  state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);
   return state;
 };
 function isStaticallyDefinedLevel(level) {

package/lib/components/TreeItem/useTreeItemStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","tokens","createFocusOutlineStyle","treeItemLevelToken","treeItemClassNames","root","useRootStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","base","qhf8xq","Bceei9c","mc9l5x","Beiy3e4","B7ck84d","De3pzq","sj55zd","z189sj","focusIndicator","Brovlpu","B486eqv","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bm4h7ae","B7ys5i9","Busjfv9","Bhk32uz","Bf4ptjt","kclons","Bhdgwq3","Blkhhs4","Bqtpl0w","clg4pj","hgwjuy","Bonggc9","B1tsrr9","Dah5zi","Bkh64rk","qqdqy8","B6dhp37","i03rao","Boxcth7","Bsom6fd","J0r882","Bule8hv","Bjwuhne","Ghsupd","d","f","i","useTreeItemStyles_unstable","state","rootStyles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useRootStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ])),\n    base: {\n        position: 'relative',\n        cursor: 'pointer',\n        display: 'flex',\n        flexDirection: 'column',\n        boxSizing: 'border-box',\n        backgroundColor: tokens.colorSubtleBackground,\n        color: tokens.colorNeutralForeground2,\n        paddingRight: tokens.spacingHorizontalNone\n    },\n    focusIndicator: createFocusOutlineStyle()\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    const rootStyles = useRootStyles();\n    const { level } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, isStaticallyDefinedLevel(level) && rootStyles[`level${level}`], rootStyles.base, rootStyles.focusIndicator, state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGP,QAAA;EAAAQ,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;EAAAU,IAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;EAAAC,cAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;EAAAC,CAAA;EAAAC,CAAA;AAAA,CAoBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGzD,aAAa,CAAC,CAAC;EAClC,MAAM;IAAE0D;EAAM,CAAC,GAAGF,KAAK;EACvBA,KAAK,CAACzD,IAAI,CAAC4D,SAAS,GAAGjE,YAAY,CAACI,kBAAkB,CAACC,IAAI,EAAE6D,wBAAwB,CAACF,KAAK,CAAC,IAAID,UAAU,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAED,UAAU,CAAC7C,IAAI,EAAE6C,UAAU,CAACpC,cAAc,EAAEmC,KAAK,CAACzD,IAAI,CAAC4D,SAAS,CAAC;EAC9L,OAAOH,KAAK;AAChB,CAAC;AACD,SAASI,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","treeItemLevelToken","treeItemLayoutClassNames","treeItemPersonaLayoutClassNames","treeItemClassNames","root","useBaseStyles","useStyles","level1","iytv0q","level2","level3","level4","level5","level6","level7","level8","level9","level10","d","useTreeItemStyles_unstable","state","baseStyles","styles","level","className","isStaticallyDefinedLevel"],"sources":["useTreeItemStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { treeItemLayoutClassNames } from '../TreeItemLayout/useTreeItemLayoutStyles.styles';\nimport { treeItemPersonaLayoutClassNames } from '../TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles';\nexport const treeItemClassNames = {\n    root: 'fui-TreeItem'\n};\nconst useBaseStyles = makeResetStyles({\n    position: 'relative',\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'column',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorSubtleBackground,\n    color: tokens.colorNeutralForeground2,\n    paddingRight: tokens.spacingHorizontalNone,\n    // if using createCustomFocusIndicatorStyle then we need to remove default outline styles provided by the browser\n    ':focus': {\n        outlineStyle: 'none'\n    },\n    ':focus-visible': {\n        outlineStyle: 'none'\n    },\n    // This adds the focus outline for the TreeItemLayout element\n    ...createCustomFocusIndicatorStyle({\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        outlineColor: tokens.colorStrokeFocus2,\n        outlineRadius: tokens.borderRadiusMedium,\n        // FIXME: tokens.strokeWidthThick causes some weird bugs\n        outlineWidth: '2px',\n        outlineStyle: 'solid'\n    }, {\n        customizeSelector: (selector)=>`${selector} > .${treeItemLayoutClassNames.root}, ${selector} > .${treeItemPersonaLayoutClassNames.root}`\n    })\n});\nconst useStyles = makeStyles({\n    ...Object.fromEntries(Array.from({\n        length: 10\n    }, (_, index)=>[\n            `level${index + 1}`,\n            {\n                [treeItemLevelToken]: index + 1\n            }\n        ]))\n});\n/**\n * Apply styling to the TreeItem slots based on the state\n */ export const useTreeItemStyles_unstable = (state)=>{\n    const baseStyles = useBaseStyles();\n    const styles = useStyles();\n    const { level } = state;\n    state.root.className = mergeClasses(treeItemClassNames.root, baseStyles, isStaticallyDefinedLevel(level) && styles[`level${level}`], state.root.className);\n    return state;\n};\nfunction isStaticallyDefinedLevel(level) {\n    return level >= 1 && level <= 10;\n}\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,kBAAkB,QAAQ,oBAAoB;AACvD,SAASC,wBAAwB,QAAQ,kDAAkD;AAC3F,SAASC,+BAA+B,QAAQ,gEAAgE;AAChH,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,aAAa,gBAAGX,aAAA,0gDA2BrB,CAAC;AACF,MAAMY,SAAS,gBAAGX,QAAA;EAAAY,MAAA;IAAAC,MAAA;EAAA;EAAAC,MAAA;IAAAD,MAAA;EAAA;EAAAE,MAAA;IAAAF,MAAA;EAAA;EAAAG,MAAA;IAAAH,MAAA;EAAA;EAAAI,MAAA;IAAAJ,MAAA;EAAA;EAAAK,MAAA;IAAAL,MAAA;EAAA;EAAAM,MAAA;IAAAN,MAAA;EAAA;EAAAO,MAAA;IAAAP,MAAA;EAAA;EAAAQ,MAAA;IAAAR,MAAA;EAAA;EAAAS,OAAA;IAAAT,MAAA;EAAA;AAAA;EAAAU,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EACnD,MAAMC,UAAU,GAAGhB,aAAa,CAAC,CAAC;EAClC,MAAMiB,MAAM,GAAGhB,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEiB;EAAM,CAAC,GAAGH,KAAK;EACvBA,KAAK,CAAChB,IAAI,CAACoB,SAAS,GAAG5B,YAAY,CAACO,kBAAkB,CAACC,IAAI,EAAEiB,UAAU,EAAEI,wBAAwB,CAACF,KAAK,CAAC,IAAID,MAAM,CAAE,QAAOC,KAAM,EAAC,CAAC,EAAEH,KAAK,CAAChB,IAAI,CAACoB,SAAS,CAAC;EAC1J,OAAOJ,KAAK;AAChB,CAAC;AACD,SAASK,wBAAwBA,CAACF,KAAK,EAAE;EACrC,OAAOA,KAAK,IAAI,CAAC,IAAIA,KAAK,IAAI,EAAE;AACpC"}

package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js

@@ -1,4 +1,4 @@
-import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
 import { useTreeContext_unstable } from '../../contexts/treeContext';
 import { treeItemLevelToken } from '../../utils/tokens';
@@ -13,30 +13,11 @@ export const treeItemLayoutClassNames = {
   actions: 'fui-TreeItemLayout__actions',
   selector: 'fui-TreeItemLayout__selector'
 };
+const useRootBaseStyles = /*#__PURE__*/__resetStyles("rcu2h5o", null, [".rcu2h5o{display:flex;align-items:center;min-height:32px;box-sizing:border-box;grid-row-start:layout;grid-column-start:layout;grid-row-end:layout;grid-column-end:layout;}", ".rcu2h5o:active{color:var(--colorNeutralForeground2Pressed);background-color:var(--colorSubtleBackgroundPressed);}", ".rcu2h5o:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".rcu2h5o:hover{color:var(--colorNeutralForeground2Hover);background-color:var(--colorSubtleBackgroundHover);}", ".rcu2h5o:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]);
 /**
  * Styles for the root slot
  */
 const useRootStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    sshi5w: "f1nxs5xn",
-    B7ck84d: "f1ewtqcl",
-    Ijaq50: "f15ws6j",
-    Br312pm: "f135tdbu",
-    nk6f5a: "f2e2169",
-    Bw0ie65: "f4rqp6x",
-    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
-    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
-    B7oj6ja: ["f1jar5jt", "fyu767a"],
-    Btl43ni: ["fyu767a", "f1jar5jt"],
-    lj723h: "flvvhsy",
-    ecr2s2: "f1wfn5kd",
-    qya0sb: "f1ih54s9",
-    Bi91k9c: "fnwyq0v",
-    Jwef8y: "f1t94bn6",
-    Becwuud: "f1jk1nfw"
-  },
   leaf: {
     uwmqm3: ["f1k1erfc", "faevyjx"]
   },
@@ -67,103 +48,30 @@ const useRootStyles = /*#__PURE__*/__styles({
     ecr2s2: "fophhak"
   }
 }, {
-  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f15ws6j{grid-row-start:layout;}", ".f135tdbu{grid-column-start:layout;}", ".f2e2169{grid-row-end:layout;}", ".f4rqp6x{grid-column-end:layout;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
-  a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f1ih54s9:active .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}", ".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"],
-  h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1jk1nfw:hover .fui-TreeItemLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}", ".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"]
+  d: [".f1k1erfc{padding-left:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".faevyjx{padding-right:calc(var(--fluent-TreeItem--level, 1) * var(--spacingHorizontalXXL));}", ".fo100m9{padding-left:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".f6yw3pu{padding-right:calc((var(--fluent-TreeItem--level, 1) - 1) * var(--spacingHorizontalXXL));}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1pha7fy{min-height:24px;}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}"],
+  h: [".f146ro5n:hover{background-color:var(--colorSubtleBackgroundLightAlphaHover);}", ".fjxutwb:hover{background-color:var(--colorTransparentBackgroundHover);}"],
+  a: [".fkam630:active{background-color:var(--colorSubtleBackgroundLightAlphaPressed);}", ".fophhak:active{background-color:var(--colorTransparentBackgroundPressed);}"]
 });
 /**
  * Styles for the action icon slot
  */
-const useActionsStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Frg6f3: ["fcgxt0o", "f1ujusj6"],
-    qhf8xq: "f10pi13n",
-    Bj3rh1h: "f19g0ac",
-    Ijaq50: "fobksn0",
-    Br312pm: "fmy5l6f",
-    nk6f5a: "fzqypwc",
-    Bw0ie65: "f1tmftl3",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["f1vdfbxk", "f1f5gg8d"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
-  }
-}, {
-  d: [".f22iagw{display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f10pi13n{position:relative;}", ".f19g0ac{z-index:1;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1qch9an{padding-bottom:0;}"]
-});
+const useActionsBaseStyles = /*#__PURE__*/__resetStyles("r1i8xcbw", "r12wgp0u", [".r1i8xcbw{display:flex;margin-left:auto;position:relative;z-index:1;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-right:var(--spacingHorizontalS);padding-bottom:0;padding-left:var(--spacingHorizontalS);}", ".r12wgp0u{display:flex;margin-right:auto;position:relative;z-index:1;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-left:var(--spacingHorizontalS);padding-bottom:0;padding-right:var(--spacingHorizontalS);}"]);
 /**
  * Styles for the action icon slot
  */
-const useAsideStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Frg6f3: ["fcgxt0o", "f1ujusj6"],
-    Bt984gj: "f122n59",
-    Bj3rh1h: "f11zp4z2",
-    Ijaq50: "fobksn0",
-    Br312pm: "fmy5l6f",
-    nk6f5a: "fzqypwc",
-    Bw0ie65: "f1tmftl3",
-    z8tnut: "f1g0x7ka",
-    z189sj: ["fw5db7e", "f1uw59to"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["f1uw59to", "fw5db7e"],
-    i8kkvl: "f1ufnopg",
-    Belr9w4: "f14sijuj"
-  }
-}, {
-  d: [".f22iagw{display:flex;}", ".fcgxt0o{margin-left:auto;}", ".f1ujusj6{margin-right:auto;}", ".f122n59{align-items:center;}", ".f11zp4z2{z-index:0;}", ".fobksn0{grid-row-start:aside;}", ".fmy5l6f{grid-column-start:aside;}", ".fzqypwc{grid-row-end:aside;}", ".f1tmftl3{grid-column-end:aside;}", ".f1g0x7ka{padding-top:0;}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".f1qch9an{padding-bottom:0;}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"]
-});
+const useAsideBaseStyles = /*#__PURE__*/__resetStyles("rviw63k", "r1kawtgt", [".rviw63k{display:flex;margin-left:auto;align-items:center;z-index:0;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-right:var(--spacingHorizontalM);padding-bottom:0;padding-left:var(--spacingHorizontalM);column-gap:var(--spacingHorizontalXS);row-gap:var(--spacingHorizontalXS);}", ".r1kawtgt{display:flex;margin-right:auto;align-items:center;z-index:0;grid-row-start:aside;grid-column-start:aside;grid-row-end:aside;grid-column-end:aside;padding-top:0;padding-left:var(--spacingHorizontalM);padding-bottom:0;padding-right:var(--spacingHorizontalM);column-gap:var(--spacingHorizontalXS);row-gap:var(--spacingHorizontalXS);}"]);
 /**
  * Styles for the expand icon slot
  */
-const useExpandIconStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    Brf1p80: "f4d9j23",
-    Bf4jedk: "f17fgpbq",
-    B7ck84d: "f1ewtqcl",
-    sj55zd: "f11d4kpn",
-    Bh6795r: "f1jhi6b8",
-    Bnnss6s: "fi64zpg",
-    xawz: "f1rmlqtg",
-    z8tnut: "f1ywm7hm",
-    z189sj: ["fhxju0i", "f1cnd47f"],
-    Byoj8tv: "f14wxoun",
-    uwmqm3: ["f1cnd47f", "fhxju0i"]
-  }
-}, {
-  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f4d9j23{justify-content:center;}", ".f17fgpbq{min-width:24px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".f1jhi6b8{flex-grow:0;}", ".fi64zpg{flex-shrink:0;}", ".f1rmlqtg{flex-basis:auto;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}"]
-});
+const useExpandIconBaseStyles = /*#__PURE__*/__resetStyles("rogdio4", "rkb1wm1", [".rogdio4{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex-grow:0;flex-shrink:0;flex-basis:auto;padding-top:var(--spacingVerticalXS);padding-right:0;padding-bottom:var(--spacingVerticalXS);padding-left:0;}", ".rkb1wm1{display:flex;align-items:center;justify-content:center;min-width:24px;box-sizing:border-box;color:var(--colorNeutralForeground3);flex-grow:0;flex-shrink:0;flex-basis:auto;padding-top:var(--spacingVerticalXS);padding-left:0;padding-bottom:var(--spacingVerticalXS);padding-right:0;}"]);
 /**
  * Styles for the content slot
  */
-const useMainStyles = /*#__PURE__*/__styles({
-  base: {
-    z8tnut: "f1g0x7ka",
-    z189sj: ["ffczdla", "fgiv446"],
-    Byoj8tv: "f1qch9an",
-    uwmqm3: ["fgiv446", "ffczdla"]
-  }
-}, {
-  d: [".f1g0x7ka{padding-top:0;}", ".ffczdla{padding-right:var(--spacingHorizontalXXS);}", ".fgiv446{padding-left:var(--spacingHorizontalXXS);}", ".f1qch9an{padding-bottom:0;}"]
-});
+const useMainBaseStyles = /*#__PURE__*/__resetStyles("rfjd92f", "r9y1vtu", [".rfjd92f{padding-top:0;padding-right:var(--spacingHorizontalXXS);padding-bottom:0;padding-left:var(--spacingHorizontalXXS);}", ".r9y1vtu{padding-top:0;padding-left:var(--spacingHorizontalXXS);padding-bottom:0;padding-right:var(--spacingHorizontalXXS);}"]);
 /**
  * Styles for the before/after icon slot
  */
-const useIconStyles = /*#__PURE__*/__styles({
-  base: {
-    mc9l5x: "f22iagw",
-    Bt984gj: "f122n59",
-    sj55zd: "fkfq4zb",
-    Bg96gwp: "f106mvju",
-    Be2twd7: "f1pp30po"
-  }
-}, {
-  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f106mvju{line-height:var(--lineHeightBase500);}", ".f1pp30po{font-size:var(--fontSizeBase500);}"]
-});
+const useIconBaseStyles = /*#__PURE__*/__resetStyles("rphzgg1", null, [".rphzgg1{display:flex;align-items:center;color:var(--colorNeutralForeground2);line-height:var(--lineHeightBase500);font-size:var(--fontSizeBase500);}"]);
 const useIconBeforeStyles = /*#__PURE__*/__styles({
   medium: {
     z189sj: ["f7x41pl", "fruq291"]
@@ -199,35 +107,33 @@ export const useTreeItemLayoutStyles_unstable = state => {
     selector
   } = state;
   const rootStyles = useRootStyles();
-  const actionsStyles = useActionsStyles();
-  const asideStyles = useAsideStyles();
-  const mainStyles = useMainStyles();
-  const expandIconStyles = useExpandIconStyles();
-  const iconStyles = useIconStyles();
+  const rootBaseStyles = useRootBaseStyles();
+  const actionsBaseStyles = useActionsBaseStyles();
+  const asideBaseStyles = useAsideBaseStyles();
+  const mainBaseStyles = useMainBaseStyles();
+  const expandIconBaseStyles = useExpandIconBaseStyles();
+  const iconBaseStyles = useIconBaseStyles();
   const iconBeforeStyles = useIconBeforeStyles();
   const iconAfterStyles = useIconAfterStyles();
   const size = useTreeContext_unstable(ctx => ctx.size);
   const appearance = useTreeContext_unstable(ctx => ctx.appearance);
   const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
-  root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
-  main.className = mergeClasses(treeItemLayoutClassNames.main, mainStyles.base, main.className);
+  root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);
+  main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);
   if (expandIcon) {
-    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
+    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);
   }
   if (iconBefore) {
-    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);
+    iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);
   }
   if (iconAfter) {
-    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);
+    iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);
   }
   if (actions) {
-    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);
+    actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);
   }
   if (aside) {
-    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);
-  }
-  if (expandIcon) {
-    expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);
+    aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);
   }
   if (selector) {
     selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);

package/lib/components/TreeItemLayout/useTreeItemLayoutStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootStyles","base","mc9l5x","Bt984gj","sshi5w","B7ck84d","Ijaq50","Br312pm","nk6f5a","Bw0ie65","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","lj723h","ecr2s2","qya0sb","Bi91k9c","Jwef8y","Becwuud","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","subtle","transparent","De3pzq","d","a","h","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","z8tnut","z189sj","Byoj8tv","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","sj55zd","Bh6795r","Bnnss6s","xawz","useMainStyles","useIconStyles","useIconBeforeStyles","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","actionsStyles","asideStyles","mainStyles","expandIconStyles","iconStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    main: 'fui-TreeItemLayout__main',\n    iconAfter: 'fui-TreeItemLayout__iconAfter',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    aside: 'fui-TreeItemLayout__aside',\n    actions: 'fui-TreeItemLayout__actions',\n    selector: 'fui-TreeItemLayout__selector'\n};\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '32px',\n        boxSizing: 'border-box',\n        ...shorthands.gridArea('layout'),\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Pressed\n            }\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling\n            [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Hover\n            }\n        }\n    },\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        position: 'relative',\n        zIndex: 1,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalS)\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useAsideStyles = makeStyles({\n    base: {\n        display: 'flex',\n        marginLeft: 'auto',\n        alignItems: 'center',\n        zIndex: 0,\n        ...shorthands.gridArea('aside'),\n        ...shorthands.padding(0, tokens.spacingHorizontalM),\n        ...shorthands.gap(tokens.spacingHorizontalXS)\n    }\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        minWidth: '24px',\n        boxSizing: 'border-box',\n        color: tokens.colorNeutralForeground3,\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Styles for the content slot\n */ const useMainStyles = makeStyles({\n    base: {\n        ...shorthands.padding(0, tokens.spacingHorizontalXXS)\n    }\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        color: tokens.colorNeutralForeground2,\n        lineHeight: tokens.lineHeightBase500,\n        fontSize: tokens.fontSizeBase500\n    }\n});\nconst useIconBeforeStyles = makeStyles({\n    medium: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalXXS\n    }\n});\nconst useIconAfterStyles = makeStyles({\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n    const rootStyles = useRootStyles();\n    const actionsStyles = useActionsStyles();\n    const asideStyles = useAsideStyles();\n    const mainStyles = useMainStyles();\n    const expandIconStyles = useExpandIconStyles();\n    const iconStyles = useIconStyles();\n    const iconBeforeStyles = useIconBeforeStyles();\n    const iconAfterStyles = useIconAfterStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootStyles.base, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    main.className = mergeClasses(treeItemLayoutClassNames.main, mainStyles.base, main.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconStyles.base, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconStyles.base, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsStyles.base, actions.className);\n    }\n    if (aside) {\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideStyles.base, aside.className);\n    }\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconStyles.base, expandIcon.className);\n    }\n    if (selector) {\n        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n    }\n    return state;\n};\n"],"mappings":"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"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","typographyStyles","useTreeContext_unstable","treeItemLevelToken","useTreeItemContext_unstable","treeItemLayoutClassNames","root","iconBefore","main","iconAfter","expandIcon","aside","actions","selector","useRootBaseStyles","useRootStyles","leaf","uwmqm3","branch","medium","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","small","sshi5w","subtle","Jwef8y","ecr2s2","transparent","De3pzq","d","h","a","useActionsBaseStyles","useAsideBaseStyles","useExpandIconBaseStyles","useMainBaseStyles","useIconBaseStyles","useIconBeforeStyles","z189sj","useIconAfterStyles","useTreeItemLayoutStyles_unstable","state","rootStyles","rootBaseStyles","actionsBaseStyles","asideBaseStyles","mainBaseStyles","expandIconBaseStyles","iconBaseStyles","iconBeforeStyles","iconAfterStyles","size","ctx","appearance","itemType","className"],"sources":["useTreeItemLayoutStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { useTreeContext_unstable } from '../../contexts/treeContext';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemLayoutClassNames = {\n    root: 'fui-TreeItemLayout',\n    iconBefore: 'fui-TreeItemLayout__iconBefore',\n    main: 'fui-TreeItemLayout__main',\n    iconAfter: 'fui-TreeItemLayout__iconAfter',\n    expandIcon: 'fui-TreeItemLayout__expandIcon',\n    aside: 'fui-TreeItemLayout__aside',\n    actions: 'fui-TreeItemLayout__actions',\n    selector: 'fui-TreeItemLayout__selector'\n};\nconst useRootBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '32px',\n    boxSizing: 'border-box',\n    ...shorthands.gridArea('layout'),\n    ':active': {\n        color: tokens.colorNeutralForeground2Pressed,\n        backgroundColor: tokens.colorSubtleBackgroundPressed,\n        // TODO: stop using treeItemLayoutClassNames.expandIcon for styling\n        [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Pressed\n        }\n    },\n    ':hover': {\n        color: tokens.colorNeutralForeground2Hover,\n        backgroundColor: tokens.colorSubtleBackgroundHover,\n        // TODO: stop using treeItemLayoutClassNames.expandIcon  for styling\n        [`& .${treeItemLayoutClassNames.expandIcon}`]: {\n            color: tokens.colorNeutralForeground3Hover\n        }\n    }\n});\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    leaf: {\n        paddingLeft: `calc(var(${treeItemLevelToken}, 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    branch: {\n        paddingLeft: `calc((var(${treeItemLevelToken}, 1) - 1) * ${tokens.spacingHorizontalXXL})`\n    },\n    medium: {\n        ...typographyStyles.body1\n    },\n    small: {\n        minHeight: '24px',\n        ...typographyStyles.caption1\n    },\n    // Appearance variations\n    subtle: {},\n    'subtle-alpha': {\n        ':hover': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorSubtleBackgroundLightAlphaPressed\n        }\n    },\n    transparent: {\n        backgroundColor: tokens.colorTransparentBackground,\n        ':hover': {\n            backgroundColor: tokens.colorTransparentBackgroundHover\n        },\n        ':active': {\n            backgroundColor: tokens.colorTransparentBackgroundPressed\n        }\n    }\n});\n/**\n * Styles for the action icon slot\n */ const useActionsBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    position: 'relative',\n    zIndex: 1,\n    ...shorthands.gridArea('aside'),\n    ...shorthands.padding(0, tokens.spacingHorizontalS)\n});\n/**\n * Styles for the action icon slot\n */ const useAsideBaseStyles = makeResetStyles({\n    display: 'flex',\n    marginLeft: 'auto',\n    alignItems: 'center',\n    zIndex: 0,\n    ...shorthands.gridArea('aside'),\n    ...shorthands.padding(0, tokens.spacingHorizontalM),\n    ...shorthands.gap(tokens.spacingHorizontalXS)\n});\n/**\n * Styles for the expand icon slot\n */ const useExpandIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: '24px',\n    boxSizing: 'border-box',\n    color: tokens.colorNeutralForeground3,\n    ...shorthands.flex(0, 0, 'auto'),\n    ...shorthands.padding(tokens.spacingVerticalXS, 0)\n});\n/**\n * Styles for the content slot\n */ const useMainBaseStyles = makeResetStyles({\n    ...shorthands.padding(0, tokens.spacingHorizontalXXS)\n});\n/**\n * Styles for the before/after icon slot\n */ const useIconBaseStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground2,\n    lineHeight: tokens.lineHeightBase500,\n    fontSize: tokens.fontSizeBase500\n});\nconst useIconBeforeStyles = makeStyles({\n    medium: {\n        paddingRight: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingRight: tokens.spacingHorizontalXXS\n    }\n});\nconst useIconAfterStyles = makeStyles({\n    medium: {\n        paddingLeft: tokens.spacingHorizontalXS\n    },\n    small: {\n        paddingLeft: tokens.spacingHorizontalXXS\n    }\n});\n/**\n * Apply styling to the TreeItemLayout slots based on the state\n */ export const useTreeItemLayoutStyles_unstable = (state)=>{\n    const { main, iconAfter, iconBefore, expandIcon, root, aside, actions, selector } = state;\n    const rootStyles = useRootStyles();\n    const rootBaseStyles = useRootBaseStyles();\n    const actionsBaseStyles = useActionsBaseStyles();\n    const asideBaseStyles = useAsideBaseStyles();\n    const mainBaseStyles = useMainBaseStyles();\n    const expandIconBaseStyles = useExpandIconBaseStyles();\n    const iconBaseStyles = useIconBaseStyles();\n    const iconBeforeStyles = useIconBeforeStyles();\n    const iconAfterStyles = useIconAfterStyles();\n    const size = useTreeContext_unstable((ctx)=>ctx.size);\n    const appearance = useTreeContext_unstable((ctx)=>ctx.appearance);\n    const itemType = useTreeItemContext_unstable((ctx)=>ctx.itemType);\n    root.className = mergeClasses(treeItemLayoutClassNames.root, rootBaseStyles, rootStyles[appearance], rootStyles[size], rootStyles[itemType], root.className);\n    main.className = mergeClasses(treeItemLayoutClassNames.main, mainBaseStyles, main.className);\n    if (expandIcon) {\n        expandIcon.className = mergeClasses(treeItemLayoutClassNames.expandIcon, expandIconBaseStyles, expandIcon.className);\n    }\n    if (iconBefore) {\n        iconBefore.className = mergeClasses(treeItemLayoutClassNames.iconBefore, iconBaseStyles, iconBeforeStyles[size], iconBefore.className);\n    }\n    if (iconAfter) {\n        iconAfter.className = mergeClasses(treeItemLayoutClassNames.iconAfter, iconBaseStyles, iconAfterStyles[size], iconAfter.className);\n    }\n    if (actions) {\n        actions.className = mergeClasses(treeItemLayoutClassNames.actions, actionsBaseStyles, actions.className);\n    }\n    if (aside) {\n        aside.className = mergeClasses(treeItemLayoutClassNames.aside, asideBaseStyles, aside.className);\n    }\n    if (selector) {\n        selector.className = mergeClasses(treeItemLayoutClassNames.selector, selector.className);\n    }\n    return state;\n};\n"],"mappings":"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"}