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

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js

@@ -16,26 +16,26 @@ const _react = require("@griffel/react");
 const _treeItemContext = require("../../contexts/treeItemContext");
 const treeItemPersonaLayoutClassNames = {
     root: 'fui-TreeItemPersonaLayout',
-    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
     media: 'fui-TreeItemPersonaLayout__media',
-    content: 'fui-TreeItemPersonaLayout__content',
     description: 'fui-TreeItemPersonaLayout__description',
-    main: 'fui-TreeItemPersonaLayout__main'
+    main: 'fui-TreeItemPersonaLayout__main',
+    expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
+    aside: 'fui-TreeItemPersonaLayout__aside',
+    actions: 'fui-TreeItemPersonaLayout__actions'
 };
 /**
  * Styles for the root slot
  */ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
     base: {
-        mc9l5x: "f22iagw",
+        mc9l5x: "f13qh94s",
+        wkccdc: "f1y0tuzo",
+        Budl1dq: "fellwe7",
+        zoa1oz: "f1pam7zy",
         Bt984gj: "f122n59",
         Bahqtrf: "fk6fouc",
         Be2twd7: "fkhj508",
         Bhrd7zp: "figsok6",
         Bg96gwp: "f1i3iumi",
-        Ijaq50: "f15ws6j",
-        Br312pm: "f135tdbu",
-        nk6f5a: "f2e2169",
-        Bw0ie65: "f4rqp6x",
         lj723h: "flvvhsy",
         ecr2s2: "f1wfn5kd",
         zt0xaq: "f5na5aj",
@@ -57,16 +57,15 @@ const treeItemPersonaLayoutClassNames = {
     }
 }, {
     d: [
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".f13qh94s{display:grid;}",
+        ".f1y0tuzo{grid-template-rows:1fr auto;}",
+        ".fellwe7{grid-template-columns:auto auto 1fr auto;}",
+        ".f1pam7zy{grid-template-areas:\"expandIcon media main        aside\" \"expandIcon media description aside\";}",
         ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fkhj508{font-size:var(--fontSizeBase300);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
         ".f1i3iumi{line-height:var(--lineHeightBase300);}",
-        ".f15ws6j{grid-row-start:layout;}",
-        ".f135tdbu{grid-column-start:layout;}",
-        ".f2e2169{grid-row-end:layout;}",
-        ".f4rqp6x{grid-column-end:layout;}",
         ".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));}",
@@ -91,6 +90,10 @@ const treeItemPersonaLayoutClassNames = {
         Bt984gj: "f122n59",
         a9b677: "f1szoe96",
         Bqenvij: "f1d2rq10",
+        Ijaq50: "f11uok23",
+        Br312pm: "f1qdfnnj",
+        nk6f5a: "f1s27gz",
+        Bw0ie65: "f86d0yl",
         z8tnut: "f1g0x7ka",
         z189sj: [
             "f7x41pl",
@@ -108,6 +111,10 @@ const treeItemPersonaLayoutClassNames = {
         ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}",
         ".f1szoe96{width:32px;}",
         ".f1d2rq10{height:32px;}",
+        ".f11uok23{grid-row-start:media;}",
+        ".f1qdfnnj{grid-column-start:media;}",
+        ".f1s27gz{grid-row-end:media;}",
+        ".f86d0yl{grid-column-end:media;}",
         ".f1g0x7ka{padding-top:0;}",
         ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
         ".fruq291{padding-left:var(--spacingHorizontalXS);}",
@@ -116,11 +123,12 @@ const treeItemPersonaLayoutClassNames = {
         ".ffczdla{padding-right:var(--spacingHorizontalXXS);}"
     ]
 });
-const useContentStyles = /*#__PURE__*/ (0, _react["__styles"])({
+const useMainStyles = /*#__PURE__*/ (0, _react["__styles"])({
     base: {
-        a9b677: "fly5x3f",
-        mc9l5x: "f22iagw",
-        Beiy3e4: "f1vx9l62",
+        Ijaq50: "f17iroih",
+        Br312pm: "fppdkoh",
+        nk6f5a: "fsb8d6n",
+        Bw0ie65: "f6k5g14",
         z8tnut: "f1ngh7ph",
         z189sj: [
             "f7x41pl",
@@ -130,38 +138,162 @@ const useContentStyles = /*#__PURE__*/ (0, _react["__styles"])({
         uwmqm3: [
             "f1f5gg8d",
             "f1vdfbxk"
+        ]
+    },
+    withDescription: {
+        z8tnut: "f1ngh7ph",
+        z189sj: [
+            "f7x41pl",
+            "fruq291"
         ],
-        i8kkvl: "f1fps8zv",
-        Belr9w4: "fws515f"
+        Byoj8tv: "f1qch9an",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ]
     }
 }, {
     d: [
-        ".fly5x3f{width:100%;}",
-        ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
-        ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}",
+        ".f17iroih{grid-row-start:main;}",
+        ".fppdkoh{grid-column-start:main;}",
+        ".fsb8d6n{grid-row-end:main;}",
+        ".f6k5g14{grid-column-end:main;}",
         ".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}",
         ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
         ".fruq291{padding-left:var(--spacingHorizontalXS);}",
         ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}",
         ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
         ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}",
-        ".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}",
-        ".fws515f{row-gap:var(--spacingHorizontalNone);}"
+        ".f1qch9an{padding-bottom:0;}"
     ]
 });
 const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
     base: {
+        Ijaq50: "ffekjdo",
+        Br312pm: "f12wtlaa",
+        nk6f5a: "f1blqr63",
+        Bw0ie65: "f2ve1i",
         Bahqtrf: "fk6fouc",
         Be2twd7: "fy9rknc",
         Bhrd7zp: "figsok6",
-        Bg96gwp: "fwrc4pm"
+        Bg96gwp: "fwrc4pm",
+        z8tnut: "f1g0x7ka",
+        z189sj: [
+            "f7x41pl",
+            "fruq291"
+        ],
+        Byoj8tv: "f5o476b",
+        uwmqm3: [
+            "f1f5gg8d",
+            "f1vdfbxk"
+        ]
     }
 }, {
     d: [
+        ".ffekjdo{grid-row-start:description;}",
+        ".f12wtlaa{grid-column-start:description;}",
+        ".f1blqr63{grid-row-end:description;}",
+        ".f2ve1i{grid-column-end:description;}",
         ".fk6fouc{font-family:var(--fontFamilyBase);}",
         ".fy9rknc{font-size:var(--fontSizeBase200);}",
         ".figsok6{font-weight:var(--fontWeightRegular);}",
-        ".fwrc4pm{line-height:var(--lineHeightBase200);}"
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f1g0x7ka{padding-top:0;}",
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}",
+        ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}",
+        ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}"
+    ]
+});
+/**
+ * Styles for the action icon slot
+ */ const useActionsStyles = /*#__PURE__*/ (0, _react["__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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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;}"
+    ]
+});
+/**
+ * Styles for the action icon slot
+ */ const useAsideStyles = /*#__PURE__*/ (0, _react["__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:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}",
+        ".fcgxt0o{margin-left:auto;}",
+        ".f1ujusj6{margin-right:auto;}",
+        ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;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{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}",
+        ".f14sijuj{row-gap:var(--spacingHorizontalXS);}"
     ]
 });
 /**
@@ -174,6 +306,10 @@ const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
         Bf4jedk: "f17fgpbq",
         B7ck84d: "f1ewtqcl",
         sj55zd: "f11d4kpn",
+        Ijaq50: "f1e6rimv",
+        Br312pm: "f10hsf66",
+        nk6f5a: "foflfm0",
+        Bw0ie65: "f1b3ebjb",
         Bh6795r: "f1jhi6b8",
         Bnnss6s: "fi64zpg",
         xawz: "f1rmlqtg",
@@ -196,6 +332,10 @@ const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
         ".f17fgpbq{min-width:24px;}",
         ".f1ewtqcl{box-sizing:border-box;}",
         ".f11d4kpn{color:var(--colorNeutralForeground3);}",
+        ".f1e6rimv{grid-row-start:expandIcon;}",
+        ".f10hsf66{grid-column-start:expandIcon;}",
+        ".foflfm0{grid-row-end:expandIcon;}",
+        ".f1b3ebjb{grid-column-end:expandIcon;}",
         ".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}",
         ".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}",
         ".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}",
@@ -208,21 +348,26 @@ const useDescriptionStyles = /*#__PURE__*/ (0, _react["__styles"])({
 const useTreeItemPersonaLayoutStyles_unstable = (state)=>{
     const rootStyles = useRootStyles();
     const mediaStyles = useMediaStyles();
-    const contentStyles = useContentStyles();
     const descriptionStyles = useDescriptionStyles();
+    const actionsStyles = useActionsStyles();
+    const asideStyles = useAsideStyles();
     const expandIconStyles = useExpandIconStyles();
+    const mainStyles = useMainStyles();
     const itemType = (0, _treeItemContext.useTreeItemContext_unstable)((ctx)=>ctx.itemType);
     state.root.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);
     state.media.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
-    if (state.content) {
-        state.content.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);
-    }
     if (state.main) {
-        state.main.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.main, state.main.className);
+        state.main.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);
     }
     if (state.description) {
         state.description.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
     }
+    if (state.actions) {
+        state.actions.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);
+    }
+    if (state.aside) {
+        state.aside.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
+    }
     if (state.expandIcon) {
         state.expandIcon.className = (0, _react.mergeClasses)(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
     }

package/lib-commonjs/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'fui-TreeItemPersonaLayout',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  media: 'fui-TreeItemPersonaLayout__media',\n  content: 'fui-TreeItemPersonaLayout__content',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    Ijaq50: \"f15ws6j\",\n    Br312pm: \"f135tdbu\",\n    nk6f5a: \"f2e2169\",\n    Bw0ie65: \"f4rqp6x\",\n    lj723h: \"flvvhsy\",\n    ecr2s2: \"f1wfn5kd\",\n    zt0xaq: \"f5na5aj\",\n    Bi91k9c: \"fnwyq0v\",\n    Jwef8y: \"f1t94bn6\",\n    tbva4x: \"f1oboesa\"\n  },\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".f15ws6j{grid-row-start:layout;}\", \".f135tdbu{grid-column-start:layout;}\", \".f2e2169{grid-row-end:layout;}\", \".f4rqp6x{grid-column-end:layout;}\", \".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));}\"],\n  a: [\".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\"],\n  h: [\".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    a9b677: \"f1szoe96\",\n    Bqenvij: \"f1d2rq10\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f1szoe96{width:32px;}\", \".f1d2rq10{height:32px;}\", \".f1g0x7ka{padding-top:0;}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f1qch9an{padding-bottom:0;}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\nconst useContentStyles = /*#__PURE__*/__styles({\n  base: {\n    a9b677: \"fly5x3f\",\n    mc9l5x: \"f22iagw\",\n    Beiy3e4: \"f1vx9l62\",\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"],\n    i8kkvl: \"f1fps8zv\",\n    Belr9w4: \"fws515f\"\n  }\n}, {\n  d: [\".fly5x3f{width:100%;}\", \".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}\", \".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1fps8zv{-webkit-column-gap:var(--spacingVerticalNone);column-gap:var(--spacingVerticalNone);}\", \".fws515f{row-gap:var(--spacingHorizontalNone);}\"]\n});\nconst useDescriptionStyles = /*#__PURE__*/__styles({\n  base: {\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\"\n  }\n}, {\n  d: [\".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\",\n    Bf4jedk: \"f17fgpbq\",\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"f11d4kpn\",\n    Bh6795r: \"f1jhi6b8\",\n    Bnnss6s: \"fi64zpg\",\n    xawz: \"f1rmlqtg\",\n    z8tnut: \"f1ywm7hm\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f14wxoun\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f17fgpbq{min-width:24px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}\", \".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\"]\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = state => {\n  const rootStyles = useRootStyles();\n  const mediaStyles = useMediaStyles();\n  const contentStyles = useContentStyles();\n  const descriptionStyles = useDescriptionStyles();\n  const expandIconStyles = useExpandIconStyles();\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n  if (state.content) {\n    state.content.className = mergeClasses(treeItemPersonaLayoutClassNames.content, contentStyles.base, state.content.className);\n  }\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","expandIcon","media","content","description","main","useRootStyles","__styles","base","mc9l5x","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","Ijaq50","Br312pm","nk6f5a","Bw0ie65","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","z8tnut","z189sj","Byoj8tv","useContentStyles","Beiy3e4","i8kkvl","Belr9w4","useDescriptionStyles","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","state","rootStyles","mediaStyles","contentStyles","descriptionStyles","expandIconStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"mappings":"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"}
+{"version":3,"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { treeItemLevelToken } from '../../utils/tokens';\nimport { useTreeItemContext_unstable } from '../../contexts/treeItemContext';\nexport const treeItemPersonaLayoutClassNames = {\n  root: 'fui-TreeItemPersonaLayout',\n  media: 'fui-TreeItemPersonaLayout__media',\n  description: 'fui-TreeItemPersonaLayout__description',\n  main: 'fui-TreeItemPersonaLayout__main',\n  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',\n  aside: 'fui-TreeItemPersonaLayout__aside',\n  actions: 'fui-TreeItemPersonaLayout__actions'\n};\n/**\n * Styles for the root slot\n */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f13qh94s\",\n    wkccdc: \"f1y0tuzo\",\n    Budl1dq: \"fellwe7\",\n    zoa1oz: \"f1pam7zy\",\n    Bt984gj: \"f122n59\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fkhj508\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"f1i3iumi\",\n    lj723h: \"flvvhsy\",\n    ecr2s2: \"f1wfn5kd\",\n    zt0xaq: \"f5na5aj\",\n    Bi91k9c: \"fnwyq0v\",\n    Jwef8y: \"f1t94bn6\",\n    tbva4x: \"f1oboesa\"\n  },\n  leaf: {\n    uwmqm3: [\"f1k1erfc\", \"faevyjx\"]\n  },\n  branch: {\n    uwmqm3: [\"fo100m9\", \"f6yw3pu\"]\n  }\n}, {\n  d: [\".f13qh94s{display:grid;}\", \".f1y0tuzo{grid-template-rows:1fr auto;}\", \".fellwe7{grid-template-columns:auto auto 1fr auto;}\", \".f1pam7zy{grid-template-areas:\\\"expandIcon media main        aside\\\" \\\"expandIcon media description aside\\\";}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\", \".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));}\"],\n  a: [\".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}\", \".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}\", \".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}\"],\n  h: [\".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}\", \".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}\", \".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useMediaStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    a9b677: \"f1szoe96\",\n    Bqenvij: \"f1d2rq10\",\n    Ijaq50: \"f11uok23\",\n    Br312pm: \"f1qdfnnj\",\n    nk6f5a: \"f1s27gz\",\n    Bw0ie65: \"f86d0yl\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"fgiv446\", \"ffczdla\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f1szoe96{width:32px;}\", \".f1d2rq10{height:32px;}\", \".f11uok23{grid-row-start:media;}\", \".f1qdfnnj{grid-column-start:media;}\", \".f1s27gz{grid-row-end:media;}\", \".f86d0yl{grid-column-end:media;}\", \".f1g0x7ka{padding-top:0;}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f1qch9an{padding-bottom:0;}\", \".fgiv446{padding-left:var(--spacingHorizontalXXS);}\", \".ffczdla{padding-right:var(--spacingHorizontalXXS);}\"]\n});\nconst useMainStyles = /*#__PURE__*/__styles({\n  base: {\n    Ijaq50: \"f17iroih\",\n    Br312pm: \"fppdkoh\",\n    nk6f5a: \"fsb8d6n\",\n    Bw0ie65: \"f6k5g14\",\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  },\n  withDescription: {\n    z8tnut: \"f1ngh7ph\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  d: [\".f17iroih{grid-row-start:main;}\", \".fppdkoh{grid-column-start:main;}\", \".fsb8d6n{grid-row-end:main;}\", \".f6k5g14{grid-column-end:main;}\", \".f1ngh7ph{padding-top:var(--spacingVerticalMNudge);}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\", \".f1qch9an{padding-bottom:0;}\"]\n});\nconst useDescriptionStyles = /*#__PURE__*/__styles({\n  base: {\n    Ijaq50: \"ffekjdo\",\n    Br312pm: \"f12wtlaa\",\n    nk6f5a: \"f1blqr63\",\n    Bw0ie65: \"f2ve1i\",\n    Bahqtrf: \"fk6fouc\",\n    Be2twd7: \"fy9rknc\",\n    Bhrd7zp: \"figsok6\",\n    Bg96gwp: \"fwrc4pm\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f7x41pl\", \"fruq291\"],\n    Byoj8tv: \"f5o476b\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  d: [\".ffekjdo{grid-row-start:description;}\", \".f12wtlaa{grid-column-start:description;}\", \".f1blqr63{grid-row-end:description;}\", \".f2ve1i{grid-column-end:description;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fy9rknc{font-size:var(--fontSizeBase200);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".fwrc4pm{line-height:var(--lineHeightBase200);}\", \".f1g0x7ka{padding-top:0;}\", \".f7x41pl{padding-right:var(--spacingHorizontalXS);}\", \".fruq291{padding-left:var(--spacingHorizontalXS);}\", \".f5o476b{padding-bottom:var(--spacingVerticalMNudge);}\", \".f1f5gg8d{padding-left:var(--spacingHorizontalS);}\", \".f1vdfbxk{padding-right:var(--spacingHorizontalS);}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useActionsStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    qhf8xq: \"f10pi13n\",\n    Bj3rh1h: \"f19g0ac\",\n    Ijaq50: \"fobksn0\",\n    Br312pm: \"fmy5l6f\",\n    nk6f5a: \"fzqypwc\",\n    Bw0ie65: \"f1tmftl3\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"f1vdfbxk\", \"f1f5gg8d\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1f5gg8d\", \"f1vdfbxk\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;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;}\"]\n});\n/**\n * Styles for the action icon slot\n */\nconst useAsideStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Frg6f3: [\"fcgxt0o\", \"f1ujusj6\"],\n    Bt984gj: \"f122n59\",\n    Bj3rh1h: \"f11zp4z2\",\n    Ijaq50: \"fobksn0\",\n    Br312pm: \"fmy5l6f\",\n    nk6f5a: \"fzqypwc\",\n    Bw0ie65: \"f1tmftl3\",\n    z8tnut: \"f1g0x7ka\",\n    z189sj: [\"fw5db7e\", \"f1uw59to\"],\n    Byoj8tv: \"f1qch9an\",\n    uwmqm3: [\"f1uw59to\", \"fw5db7e\"],\n    i8kkvl: \"f1ufnopg\",\n    Belr9w4: \"f14sijuj\"\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".fcgxt0o{margin-left:auto;}\", \".f1ujusj6{margin-right:auto;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;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{-webkit-column-gap:var(--spacingHorizontalXS);column-gap:var(--spacingHorizontalXS);}\", \".f14sijuj{row-gap:var(--spacingHorizontalXS);}\"]\n});\n/**\n * Styles for the expand icon slot\n */\nconst useExpandIconStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f22iagw\",\n    Bt984gj: \"f122n59\",\n    Brf1p80: \"f4d9j23\",\n    Bf4jedk: \"f17fgpbq\",\n    B7ck84d: \"f1ewtqcl\",\n    sj55zd: \"f11d4kpn\",\n    Ijaq50: \"f1e6rimv\",\n    Br312pm: \"f10hsf66\",\n    nk6f5a: \"foflfm0\",\n    Bw0ie65: \"f1b3ebjb\",\n    Bh6795r: \"f1jhi6b8\",\n    Bnnss6s: \"fi64zpg\",\n    xawz: \"f1rmlqtg\",\n    z8tnut: \"f1ywm7hm\",\n    z189sj: [\"fhxju0i\", \"f1cnd47f\"],\n    Byoj8tv: \"f14wxoun\",\n    uwmqm3: [\"f1cnd47f\", \"fhxju0i\"]\n  }\n}, {\n  d: [\".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}\", \".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}\", \".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}\", \".f17fgpbq{min-width:24px;}\", \".f1ewtqcl{box-sizing:border-box;}\", \".f11d4kpn{color:var(--colorNeutralForeground3);}\", \".f1e6rimv{grid-row-start:expandIcon;}\", \".f10hsf66{grid-column-start:expandIcon;}\", \".foflfm0{grid-row-end:expandIcon;}\", \".f1b3ebjb{grid-column-end:expandIcon;}\", \".f1jhi6b8{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;}\", \".fi64zpg{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}\", \".f1rmlqtg{-webkit-flex-basis:auto;-ms-flex-preferred-size:auto;flex-basis:auto;}\", \".f1ywm7hm{padding-top:var(--spacingVerticalXS);}\", \".fhxju0i{padding-right:0;}\", \".f1cnd47f{padding-left:0;}\", \".f14wxoun{padding-bottom:var(--spacingVerticalXS);}\"]\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */\nexport const useTreeItemPersonaLayoutStyles_unstable = state => {\n  const rootStyles = useRootStyles();\n  const mediaStyles = useMediaStyles();\n  const descriptionStyles = useDescriptionStyles();\n  const actionsStyles = useActionsStyles();\n  const asideStyles = useAsideStyles();\n  const expandIconStyles = useExpandIconStyles();\n  const mainStyles = useMainStyles();\n  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);\n  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);\n  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);\n  if (state.main) {\n    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);\n  }\n  if (state.description) {\n    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);\n  }\n  if (state.actions) {\n    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);\n  }\n  if (state.aside) {\n    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);\n  }\n  if (state.expandIcon) {\n    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map"],"names":["treeItemPersonaLayoutClassNames","useTreeItemPersonaLayoutStyles_unstable","root","media","description","main","expandIcon","aside","actions","useRootStyles","__styles","base","mc9l5x","wkccdc","Budl1dq","zoa1oz","Bt984gj","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","lj723h","ecr2s2","zt0xaq","Bi91k9c","Jwef8y","tbva4x","leaf","uwmqm3","branch","d","a","h","useMediaStyles","a9b677","Bqenvij","Ijaq50","Br312pm","nk6f5a","Bw0ie65","z8tnut","z189sj","Byoj8tv","useMainStyles","withDescription","useDescriptionStyles","useActionsStyles","Frg6f3","qhf8xq","Bj3rh1h","useAsideStyles","i8kkvl","Belr9w4","useExpandIconStyles","Brf1p80","Bf4jedk","B7ck84d","sj55zd","Bh6795r","Bnnss6s","xawz","state","rootStyles","mediaStyles","descriptionStyles","actionsStyles","asideStyles","expandIconStyles","mainStyles","itemType","useTreeItemContext_unstable","ctx","className","mergeClasses"],"mappings":"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"}

package/lib-commonjs/contexts/treeItemContext.js

@@ -17,7 +17,7 @@ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildc
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _reactContextSelector = require("@fluentui/react-context-selector");
 const defaultContextValue = {
-    value: undefined,
+    value: '',
     isActionsVisible: false,
     isAsideVisible: true,
     actionsRef: /*#__PURE__*/ _react.createRef(),

package/lib-commonjs/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["treeItemContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst defaultContextValue = {\n    value: undefined,\n    isActionsVisible: false,\n    isAsideVisible: true,\n    actionsRef: React.createRef(),\n    expandIconRef: React.createRef(),\n    layoutRef: React.createRef(),\n    subtreeRef: React.createRef(),\n    itemType: 'leaf',\n    open: false\n};\nexport const TreeItemContext = createContext(undefined);\nexport const { Provider: TreeItemProvider  } = TreeItemContext;\nexport const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeItemContext","TreeItemProvider","useTreeItemContext_unstable","defaultContextValue","value","undefined","isActionsVisible","isAsideVisible","actionsRef","React","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","createContext","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAaaA,eAAe,MAAfA;IACYC,gBAAgB,MAAhBA;IACZC,2BAA2B,MAA3BA;;;6DAfU;sCAC2B;AAClD,MAAMC,sBAAsB;IACxBC,OAAOC;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,0BAAYC,OAAMC,SAAS;IAC3BC,6BAAeF,OAAMC,SAAS;IAC9BE,yBAAWH,OAAMC,SAAS;IAC1BG,0BAAYJ,OAAMC,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACf;AACO,MAAMf,kBAAkBgB,IAAAA,mCAAa,EAACX;AACtC,MAAM,EAAEY,UAAUhB,iBAAgB,EAAG,GAAGD;AACxC,MAAME,8BAA8B,CAACgB,WAAWC,IAAAA,wCAAkB,EAACnB,iBAAiB,CAACoB,MAAMjB,mBAAmB,GAAGe,SAASE"}
+{"version":3,"sources":["treeItemContext.js"],"sourcesContent":["import * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nconst defaultContextValue = {\n    value: '',\n    isActionsVisible: false,\n    isAsideVisible: true,\n    actionsRef: React.createRef(),\n    expandIconRef: React.createRef(),\n    layoutRef: React.createRef(),\n    subtreeRef: React.createRef(),\n    itemType: 'leaf',\n    open: false\n};\nexport const TreeItemContext = createContext(undefined);\nexport const { Provider: TreeItemProvider  } = TreeItemContext;\nexport const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));\n"],"names":["TreeItemContext","TreeItemProvider","useTreeItemContext_unstable","defaultContextValue","value","isActionsVisible","isAsideVisible","actionsRef","React","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","createContext","undefined","Provider","selector","useContextSelector","ctx"],"mappings":";;;;;;;;;;;IAaaA,eAAe,MAAfA;IACYC,gBAAgB,MAAhBA;IACZC,2BAA2B,MAA3BA;;;6DAfU;sCAC2B;AAClD,MAAMC,sBAAsB;IACxBC,OAAO;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,0BAAYC,OAAMC,SAAS;IAC3BC,6BAAeF,OAAMC,SAAS;IAC9BE,yBAAWH,OAAMC,SAAS;IAC1BG,0BAAYJ,OAAMC,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACf;AACO,MAAMd,kBAAkBe,IAAAA,mCAAa,EAACC;AACtC,MAAM,EAAEC,UAAUhB,iBAAgB,EAAG,GAAGD;AACxC,MAAME,8BAA8B,CAACgB,WAAWC,IAAAA,wCAAkB,EAACnB,iBAAiB,CAACoB,MAAMjB,mBAAmB,GAAGe,SAASE"}

package/lib-commonjs/hooks/useFlatTree.js

@@ -13,12 +13,14 @@ const _createFlatTreeItems = require("../utils/createFlatTreeItems");
 const _tokens = require("../utils/tokens");
 const _useFlatTreeNavigation = require("./useFlatTreeNavigation");
 const _useOpenItemsState = require("./useOpenItemsState");
+const _getTreeItemValueFromElement = require("../utils/getTreeItemValueFromElement");
 function useFlatTree_unstable(flatTreeItemProps, options = {}) {
     const [openItems, updateOpenItems] = (0, _useOpenItemsState.useOpenItemsState)(options);
     const flatTreeItems = _react.useMemo(()=>(0, _createFlatTreeItems.createFlatTreeItems)(flatTreeItemProps), [
         flatTreeItemProps
     ]);
     const [navigate, navigationRef] = (0, _useFlatTreeNavigation.useFlatTreeNavigation)(flatTreeItems);
+    const treeRef = _react.useRef(null);
     const handleOpenChange = (0, _reactUtilities.useEventCallback)((event, data)=>{
         var _options_onOpenChange;
         (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);
@@ -56,8 +58,13 @@ function useFlatTree_unstable(flatTreeItemProps, options = {}) {
             }
         }
     });
+    const getElementFromItem = _react.useCallback((item)=>{
+        var _treeRef_current;
+        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${_getTreeItemValueFromElement.dataTreeItemValueAttrName}="${item.value}"]`);
+    }, []);
+    const ref = (0, _reactUtilities.useMergedRefs)(treeRef, navigationRef);
     const getTreeProps = _react.useCallback(()=>({
-            ref: navigationRef,
+            ref,
             openItems,
             onOpenChange: handleOpenChange,
             // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -73,11 +80,13 @@ function useFlatTree_unstable(flatTreeItemProps, options = {}) {
             navigate,
             getTreeProps,
             getNextNavigableItem,
+            getElementFromItem,
             items
         }), [
         navigate,
         getTreeProps,
         getNextNavigableItem,
+        getElementFromItem,
         items
     ]);
 }

package/lib-commonjs/hooks/useFlatTree.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import { useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {\n    const [openItems, updateOpenItems] = useOpenItemsState(options);\n    const flatTreeItems = React.useMemo(()=>createFlatTreeItems(flatTreeItemProps), [\n        flatTreeItemProps\n    ]);\n    const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);\n        if (!event.isDefaultPrevented()) {\n            updateOpenItems(data);\n        }\n        event.preventDefault();\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _options_onNavigation_unstable;\n        (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);\n        if (!event.isDefaultPrevented()) {\n            navigate(data);\n        }\n        event.preventDefault();\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\n        const item = flatTreeItems.get(data.value);\n        if (item) {\n            switch(data.type){\n                case treeDataTypes.TypeAhead:\n                    return item;\n                case treeDataTypes.ArrowLeft:\n                    return flatTreeItems.get(item.parentValue);\n                case treeDataTypes.ArrowRight:\n                    return visibleItems[item.index + 1];\n                case treeDataTypes.End:\n                    return visibleItems[visibleItems.length - 1];\n                case treeDataTypes.Home:\n                    return visibleItems[0];\n                case treeDataTypes.ArrowDown:\n                    return visibleItems[item.index + 1];\n                case treeDataTypes.ArrowUp:\n                    return visibleItems[item.index - 1];\n            }\n        }\n    });\n    const getTreeProps = React.useCallback(()=>({\n            ref: navigationRef,\n            openItems,\n            onOpenChange: handleOpenChange,\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            onNavigation_unstable: handleNavigation\n        }), // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems\n    ]);\n    const items = React.useCallback(()=>VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [\n        openItems,\n        flatTreeItems\n    ]);\n    return React.useMemo(()=>({\n            navigate,\n            getTreeProps,\n            getNextNavigableItem,\n            items\n        }), [\n        navigate,\n        getTreeProps,\n        getNextNavigableItem,\n        items\n    ]);\n}\n"],"names":["useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","useOpenItemsState","flatTreeItems","React","useMemo","createFlatTreeItems","navigate","navigationRef","useFlatTreeNavigation","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getTreeProps","useCallback","ref","items","VisibleFlatTreeItemGenerator"],"mappings":";;;;+BAiBoBA;;aAAAA;;;gCAjBa;6DACV;qCAC2C;wBACpC;uCACQ;mCACJ;AAYvB,SAASA,qBAAqBC,iBAAiB,EAAEC,UAAU,CAAC,CAAC,EAAE;IACtE,MAAM,CAACC,WAAWC,gBAAgB,GAAGC,IAAAA,oCAAiB,EAACH;IACvD,MAAMI,gBAAgBC,OAAMC,OAAO,CAAC,IAAIC,IAAAA,wCAAmB,EAACR,oBAAoB;QAC5EA;KACH;IACD,MAAM,CAACS,UAAUC,cAAc,GAAGC,IAAAA,4CAAqB,EAACN;IACxD,MAAMO,mBAAmBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIC;QACHA,CAAAA,wBAAwBf,QAAQgB,YAAY,AAAD,MAAO,IAAI,IAAID,0BAA0B,KAAK,IAAI,KAAK,IAAIA,sBAAsBE,IAAI,CAACjB,SAASa,OAAOC,KAAK;QACvJ,IAAI,CAACD,MAAMK,kBAAkB,IAAI;YAC7BhB,gBAAgBY;QACpB,CAAC;QACDD,MAAMM,cAAc;IACxB;IACA,MAAMC,mBAAmBR,IAAAA,gCAAgB,EAAC,CAACC,OAAOC,OAAO;QACrD,IAAIO;QACHA,CAAAA,iCAAiCrB,QAAQsB,qBAAqB,AAAD,MAAO,IAAI,IAAID,mCAAmC,KAAK,IAAI,KAAK,IAAIA,+BAA+BJ,IAAI,CAACjB,SAASa,OAAOC,KAAK;QAC3L,IAAI,CAACD,MAAMK,kBAAkB,IAAI;YAC7BV,SAASM;QACb,CAAC;QACDD,MAAMM,cAAc;IACxB;IACA,MAAMI,uBAAuBX,IAAAA,gCAAgB,EAAC,CAACY,cAAcV,OAAO;QAChE,MAAMW,OAAOrB,cAAcsB,GAAG,CAACZ,KAAKa,KAAK;QACzC,IAAIF,MAAM;YACN,OAAOX,KAAKc,IAAI;gBACZ,KAAKC,qBAAa,CAACC,SAAS;oBACxB,OAAOL;gBACX,KAAKI,qBAAa,CAACE,SAAS;oBACxB,OAAO3B,cAAcsB,GAAG,CAACD,KAAKO,WAAW;gBAC7C,KAAKH,qBAAa,CAACI,UAAU;oBACzB,OAAOT,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;gBACvC,KAAKL,qBAAa,CAACM,GAAG;oBAClB,OAAOX,YAAY,CAACA,aAAaY,MAAM,GAAG,EAAE;gBAChD,KAAKP,qBAAa,CAACQ,IAAI;oBACnB,OAAOb,YAAY,CAAC,EAAE;gBAC1B,KAAKK,qBAAa,CAACS,SAAS;oBACxB,OAAOd,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;gBACvC,KAAKL,qBAAa,CAACU,OAAO;oBACtB,OAAOf,YAAY,CAACC,KAAKS,KAAK,GAAG,EAAE;YAC3C;QACJ,CAAC;IACL;IACA,MAAMM,eAAenC,OAAMoC,WAAW,CAAC,IAAK,CAAA;YACpCC,KAAKjC;YACLR;YACAe,cAAcL;YACd,gEAAgE;YAChEW,uBAAuBF;QAC3B,CAAA,GACJ;QACInB;KACH;IACD,MAAM0C,QAAQtC,OAAMoC,WAAW,CAAC,IAAIG,IAAAA,iDAA4B,EAAC3C,WAAWG,gBAAgB;QACxFH;QACAG;KACH;IACD,OAAOC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAClBE;YACAgC;YACAjB;YACAoB;QACJ,CAAA,GAAI;QACJnC;QACAgC;QACAjB;QACAoB;KACH;AACL"}
+{"version":3,"sources":["useFlatTree.js"],"sourcesContent":["import { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createFlatTreeItems, VisibleFlatTreeItemGenerator } from '../utils/createFlatTreeItems';\nimport { treeDataTypes } from '../utils/tokens';\nimport { useFlatTreeNavigation } from './useFlatTreeNavigation';\nimport { useOpenItemsState } from './useOpenItemsState';\nimport { dataTreeItemValueAttrName } from '../utils/getTreeItemValueFromElement';\n/**\n * this hook provides FlatTree API to manage all required mechanisms to convert a list of items into renderable TreeItems\n * in multiple scenarios including virtualization.\n *\n * !!A flat tree is an unofficial spec for tree!!\n *\n * It should be used on cases where more complex interactions with a Tree is required.\n * On simple scenarios it is advised to simply use a nested structure instead.\n *\n * @param flatTreeItemProps - a list of tree items\n * @param options - in case control over the internal openItems is required\n */ export function useFlatTree_unstable(flatTreeItemProps, options = {}) {\n    const [openItems, updateOpenItems] = useOpenItemsState(options);\n    const flatTreeItems = React.useMemo(()=>createFlatTreeItems(flatTreeItemProps), [\n        flatTreeItemProps\n    ]);\n    const [navigate, navigationRef] = useFlatTreeNavigation(flatTreeItems);\n    const treeRef = React.useRef(null);\n    const handleOpenChange = useEventCallback((event, data)=>{\n        var _options_onOpenChange;\n        (_options_onOpenChange = options.onOpenChange) === null || _options_onOpenChange === void 0 ? void 0 : _options_onOpenChange.call(options, event, data);\n        if (!event.isDefaultPrevented()) {\n            updateOpenItems(data);\n        }\n        event.preventDefault();\n    });\n    const handleNavigation = useEventCallback((event, data)=>{\n        var _options_onNavigation_unstable;\n        (_options_onNavigation_unstable = options.onNavigation_unstable) === null || _options_onNavigation_unstable === void 0 ? void 0 : _options_onNavigation_unstable.call(options, event, data);\n        if (!event.isDefaultPrevented()) {\n            navigate(data);\n        }\n        event.preventDefault();\n    });\n    const getNextNavigableItem = useEventCallback((visibleItems, data)=>{\n        const item = flatTreeItems.get(data.value);\n        if (item) {\n            switch(data.type){\n                case treeDataTypes.TypeAhead:\n                    return item;\n                case treeDataTypes.ArrowLeft:\n                    return flatTreeItems.get(item.parentValue);\n                case treeDataTypes.ArrowRight:\n                    return visibleItems[item.index + 1];\n                case treeDataTypes.End:\n                    return visibleItems[visibleItems.length - 1];\n                case treeDataTypes.Home:\n                    return visibleItems[0];\n                case treeDataTypes.ArrowDown:\n                    return visibleItems[item.index + 1];\n                case treeDataTypes.ArrowUp:\n                    return visibleItems[item.index - 1];\n            }\n        }\n    });\n    const getElementFromItem = React.useCallback((item)=>{\n        var _treeRef_current;\n        return (_treeRef_current = treeRef.current) === null || _treeRef_current === void 0 ? void 0 : _treeRef_current.querySelector(`[${dataTreeItemValueAttrName}=\"${item.value}\"]`);\n    }, []);\n    const ref = useMergedRefs(treeRef, navigationRef);\n    const getTreeProps = React.useCallback(()=>({\n            ref,\n            openItems,\n            onOpenChange: handleOpenChange,\n            // eslint-disable-next-line @typescript-eslint/naming-convention\n            onNavigation_unstable: handleNavigation\n        }), // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n        openItems\n    ]);\n    const items = React.useCallback(()=>VisibleFlatTreeItemGenerator(openItems, flatTreeItems), [\n        openItems,\n        flatTreeItems\n    ]);\n    return React.useMemo(()=>({\n            navigate,\n            getTreeProps,\n            getNextNavigableItem,\n            getElementFromItem,\n            items\n        }), [\n        navigate,\n        getTreeProps,\n        getNextNavigableItem,\n        getElementFromItem,\n        items\n    ]);\n}\n"],"names":["useFlatTree_unstable","flatTreeItemProps","options","openItems","updateOpenItems","useOpenItemsState","flatTreeItems","React","useMemo","createFlatTreeItems","navigate","navigationRef","useFlatTreeNavigation","treeRef","useRef","handleOpenChange","useEventCallback","event","data","_options_onOpenChange","onOpenChange","call","isDefaultPrevented","preventDefault","handleNavigation","_options_onNavigation_unstable","onNavigation_unstable","getNextNavigableItem","visibleItems","item","get","value","type","treeDataTypes","TypeAhead","ArrowLeft","parentValue","ArrowRight","index","End","length","Home","ArrowDown","ArrowUp","getElementFromItem","useCallback","_treeRef_current","current","querySelector","dataTreeItemValueAttrName","ref","useMergedRefs","getTreeProps","items","VisibleFlatTreeItemGenerator"],"mappings":"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"}

package/lib-commonjs/hooks/useFlatTreeNavigation.js

@@ -13,6 +13,7 @@ const _tokens = require("../utils/tokens");
 const _treeItemFilter = require("../utils/treeItemFilter");
 const _useHTMLElementWalker = require("./useHTMLElementWalker");
 const _useRovingTabIndexes = require("./useRovingTabIndexes");
+const _getTreeItemValueFromElement = require("../utils/getTreeItemValueFromElement");
 function useFlatTreeNavigation(flatTreeItems) {
     const { targetDocument  } = (0, _reactSharedContexts.useFluent_unstable)();
     const [treeItemWalkerRef, treeItemWalkerRootRef] = (0, _useHTMLElementWalker.useHTMLElementWalkerRef)(_treeItemFilter.treeItemFilter);
@@ -29,7 +30,7 @@ function useFlatTreeNavigation(flatTreeItems) {
                 treeItemWalker.currentElement = data.target;
                 return (0, _nextTypeAheadElement.nextTypeAheadElement)(treeItemWalker, data.event.key);
             case _tokens.treeDataTypes.ArrowLeft:
-                return parentElement(flatTreeItems, data.value);
+                return parentElement(flatTreeItems, data.target, treeItemWalker);
             case _tokens.treeDataTypes.ArrowRight:
                 treeItemWalker.currentElement = data.target;
                 return firstChild(data.target, treeItemWalker);
@@ -71,12 +72,14 @@ function firstChild(target, treeWalker) {
     }
     return null;
 }
-function parentElement(flatTreeItems, value) {
+function parentElement(flatTreeItems, target, treeWalker) {
+    const value = (0, _getTreeItemValueFromElement.getTreeItemValueFromElement)(target);
+    if (value === null) {
+        return null;
+    }
     const flatTreeItem = flatTreeItems.get(value);
     if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {
-        const parentItem = flatTreeItems.get(flatTreeItem.parentValue);
-        var _parentItem_ref_current;
-        return (_parentItem_ref_current = parentItem === null || parentItem === void 0 ? void 0 : parentItem.ref.current) !== null && _parentItem_ref_current !== void 0 ? _parentItem_ref_current : null;
+        return treeWalker.root.querySelector(`[${_getTreeItemValueFromElement.dataTreeItemValueAttrName}="${flatTreeItem.parentValue}"]`);
     }
     return null;
 }

package/lib-commonjs/hooks/useFlatTreeNavigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFlatTreeNavigation.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nexport function useFlatTreeNavigation(flatTreeItems) {\n    const { targetDocument  } = useFluent_unstable();\n    const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n    const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n    function getNextElement(data) {\n        if (!targetDocument || !treeItemWalkerRef.current) {\n            return null;\n        }\n        const treeItemWalker = treeItemWalkerRef.current;\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                treeItemWalker.currentElement = data.target;\n                return nextTypeAheadElement(treeItemWalker, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                return parentElement(flatTreeItems, data.value);\n            case treeDataTypes.ArrowRight:\n                treeItemWalker.currentElement = data.target;\n                return firstChild(data.target, treeItemWalker);\n            case treeDataTypes.End:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.lastChild();\n            case treeDataTypes.Home:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.ArrowDown:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.nextElement();\n            case treeDataTypes.ArrowUp:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.previousElement();\n        }\n    }\n    const navigate = useEventCallback((data)=>{\n        const nextElement = getNextElement(data);\n        if (nextElement) {\n            rove(nextElement);\n        }\n    });\n    return [\n        navigate,\n        useMergedRefs(treeItemWalkerRootRef, rovingRootRef)\n    ];\n}\nfunction firstChild(target, treeWalker) {\n    const nextElement = treeWalker.nextElement();\n    if (!nextElement) {\n        return null;\n    }\n    const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n    const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n    const targetAriaLevel = target.getAttribute('aria-level');\n    if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n        return nextElement;\n    }\n    return null;\n}\nfunction parentElement(flatTreeItems, value) {\n    const flatTreeItem = flatTreeItems.get(value);\n    if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {\n        const parentItem = flatTreeItems.get(flatTreeItem.parentValue);\n        var _parentItem_ref_current;\n        return (_parentItem_ref_current = parentItem === null || parentItem === void 0 ? void 0 : parentItem.ref.current) !== null && _parentItem_ref_current !== void 0 ? _parentItem_ref_current : null;\n    }\n    return null;\n}\n"],"names":["useFlatTreeNavigation","flatTreeItems","targetDocument","useFluent_unstable","treeItemWalkerRef","treeItemWalkerRootRef","useHTMLElementWalkerRef","treeItemFilter","rove","rovingRootRef","useRovingTabIndex","getNextElement","data","current","treeItemWalker","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","value","ArrowRight","firstChild","End","root","lastChild","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","flatTreeItem","get","parentValue","parentItem","_parentItem_ref_current","ref"],"mappings":"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"}
+{"version":3,"sources":["useFlatTreeNavigation.js"],"sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useEventCallback, useMergedRefs } from '@fluentui/react-utilities';\nimport { nextTypeAheadElement } from '../utils/nextTypeAheadElement';\nimport { treeDataTypes } from '../utils/tokens';\nimport { treeItemFilter } from '../utils/treeItemFilter';\nimport { useHTMLElementWalkerRef } from './useHTMLElementWalker';\nimport { useRovingTabIndex } from './useRovingTabIndexes';\nimport { dataTreeItemValueAttrName, getTreeItemValueFromElement } from '../utils/getTreeItemValueFromElement';\nexport function useFlatTreeNavigation(flatTreeItems) {\n    const { targetDocument  } = useFluent_unstable();\n    const [treeItemWalkerRef, treeItemWalkerRootRef] = useHTMLElementWalkerRef(treeItemFilter);\n    const [{ rove  }, rovingRootRef] = useRovingTabIndex(treeItemFilter);\n    function getNextElement(data) {\n        if (!targetDocument || !treeItemWalkerRef.current) {\n            return null;\n        }\n        const treeItemWalker = treeItemWalkerRef.current;\n        switch(data.type){\n            case treeDataTypes.Click:\n                return data.target;\n            case treeDataTypes.TypeAhead:\n                treeItemWalker.currentElement = data.target;\n                return nextTypeAheadElement(treeItemWalker, data.event.key);\n            case treeDataTypes.ArrowLeft:\n                return parentElement(flatTreeItems, data.target, treeItemWalker);\n            case treeDataTypes.ArrowRight:\n                treeItemWalker.currentElement = data.target;\n                return firstChild(data.target, treeItemWalker);\n            case treeDataTypes.End:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.lastChild();\n            case treeDataTypes.Home:\n                treeItemWalker.currentElement = treeItemWalker.root;\n                return treeItemWalker.firstChild();\n            case treeDataTypes.ArrowDown:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.nextElement();\n            case treeDataTypes.ArrowUp:\n                treeItemWalker.currentElement = data.target;\n                return treeItemWalker.previousElement();\n        }\n    }\n    const navigate = useEventCallback((data)=>{\n        const nextElement = getNextElement(data);\n        if (nextElement) {\n            rove(nextElement);\n        }\n    });\n    return [\n        navigate,\n        useMergedRefs(treeItemWalkerRootRef, rovingRootRef)\n    ];\n}\nfunction firstChild(target, treeWalker) {\n    const nextElement = treeWalker.nextElement();\n    if (!nextElement) {\n        return null;\n    }\n    const nextElementAriaPosInSet = nextElement.getAttribute('aria-posinset');\n    const nextElementAriaLevel = nextElement.getAttribute('aria-level');\n    const targetAriaLevel = target.getAttribute('aria-level');\n    if (nextElementAriaPosInSet === '1' && Number(nextElementAriaLevel) === Number(targetAriaLevel) + 1) {\n        return nextElement;\n    }\n    return null;\n}\nfunction parentElement(flatTreeItems, target, treeWalker) {\n    const value = getTreeItemValueFromElement(target);\n    if (value === null) {\n        return null;\n    }\n    const flatTreeItem = flatTreeItems.get(value);\n    if (flatTreeItem === null || flatTreeItem === void 0 ? void 0 : flatTreeItem.parentValue) {\n        return treeWalker.root.querySelector(`[${dataTreeItemValueAttrName}=\"${flatTreeItem.parentValue}\"]`);\n    }\n    return null;\n}\n"],"names":["useFlatTreeNavigation","flatTreeItems","targetDocument","useFluent_unstable","treeItemWalkerRef","treeItemWalkerRootRef","useHTMLElementWalkerRef","treeItemFilter","rove","rovingRootRef","useRovingTabIndex","getNextElement","data","current","treeItemWalker","type","treeDataTypes","Click","target","TypeAhead","currentElement","nextTypeAheadElement","event","key","ArrowLeft","parentElement","ArrowRight","firstChild","End","root","lastChild","Home","ArrowDown","nextElement","ArrowUp","previousElement","navigate","useEventCallback","useMergedRefs","treeWalker","nextElementAriaPosInSet","getAttribute","nextElementAriaLevel","targetAriaLevel","Number","value","getTreeItemValueFromElement","flatTreeItem","get","parentValue","querySelector","dataTreeItemValueAttrName"],"mappings":"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"}

package/lib-commonjs/hooks/useOpenItemsState.js

@@ -25,6 +25,9 @@ function useOpenItemsState(props) {
     ];
 }
 function createNextOpenItems(data, previousOpenItems) {
+    if (data.value === null) {
+        return previousOpenItems;
+    }
     const previousOpenItemsHasId = previousOpenItems.has(data.value);
     if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {
         return previousOpenItems;

package/lib-commonjs/hooks/useOpenItemsState.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useOpenItemsState.js"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createImmutableSet, emptyImmutableSet } from '../utils/ImmutableSet';\nexport function useOpenItemsState(props) {\n    const [openItems, setOpenItems] = useControllableState({\n        state: React.useMemo(()=>props.openItems && createImmutableSet(props.openItems), [\n            props.openItems\n        ]),\n        defaultState: props.defaultOpenItems && (()=>createImmutableSet(props.defaultOpenItems)),\n        initialState: emptyImmutableSet\n    });\n    const updateOpenItems = useEventCallback((data)=>setOpenItems((currentOpenItems)=>createNextOpenItems(data, currentOpenItems)));\n    return [\n        openItems,\n        updateOpenItems\n    ];\n}\nfunction createNextOpenItems(data, previousOpenItems) {\n    const previousOpenItemsHasId = previousOpenItems.has(data.value);\n    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n        return previousOpenItems;\n    }\n    const nextOpenItems = createImmutableSet(previousOpenItems);\n    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useOpenItemsState","props","openItems","setOpenItems","useControllableState","state","React","useMemo","createImmutableSet","defaultState","defaultOpenItems","initialState","emptyImmutableSet","updateOpenItems","useEventCallback","data","currentOpenItems","createNextOpenItems","previousOpenItems","previousOpenItemsHasId","has","value","open","nextOpenItems","add","delete"],"mappings":";;;;+BAGgBA;;aAAAA;;;gCAHuC;6DAChC;8BAC+B;AAC/C,SAASA,kBAAkBC,KAAK,EAAE;IACrC,MAAM,CAACC,WAAWC,aAAa,GAAGC,IAAAA,oCAAoB,EAAC;QACnDC,OAAOC,OAAMC,OAAO,CAAC,IAAIN,MAAMC,SAAS,IAAIM,IAAAA,gCAAkB,EAACP,MAAMC,SAAS,GAAG;YAC7ED,MAAMC,SAAS;SAClB;QACDO,cAAcR,MAAMS,gBAAgB,IAAK,CAAA,IAAIF,IAAAA,gCAAkB,EAACP,MAAMS,gBAAgB,CAAA;QACtFC,cAAcC,+BAAiB;IACnC;IACA,MAAMC,kBAAkBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOZ,aAAa,CAACa,mBAAmBC,oBAAoBF,MAAMC;IAC5G,OAAO;QACHd;QACAW;KACH;AACL;AACA,SAASI,oBAAoBF,IAAI,EAAEG,iBAAiB,EAAE;IAClD,MAAMC,yBAAyBD,kBAAkBE,GAAG,CAACL,KAAKM,KAAK;IAC/D,IAAIN,KAAKO,IAAI,GAAGH,yBAAyB,CAACA,sBAAsB,EAAE;QAC9D,OAAOD;IACX,CAAC;IACD,MAAMK,gBAAgBf,IAAAA,gCAAkB,EAACU;IACzC,OAAOH,KAAKO,IAAI,GAAGC,cAAcC,GAAG,CAACT,KAAKM,KAAK,IAAIE,cAAcE,MAAM,CAACV,KAAKM,KAAK,CAAC;AACvF"}
+{"version":3,"sources":["useOpenItemsState.js"],"sourcesContent":["import { useControllableState, useEventCallback } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createImmutableSet, emptyImmutableSet } from '../utils/ImmutableSet';\nexport function useOpenItemsState(props) {\n    const [openItems, setOpenItems] = useControllableState({\n        state: React.useMemo(()=>props.openItems && createImmutableSet(props.openItems), [\n            props.openItems\n        ]),\n        defaultState: props.defaultOpenItems && (()=>createImmutableSet(props.defaultOpenItems)),\n        initialState: emptyImmutableSet\n    });\n    const updateOpenItems = useEventCallback((data)=>setOpenItems((currentOpenItems)=>createNextOpenItems(data, currentOpenItems)));\n    return [\n        openItems,\n        updateOpenItems\n    ];\n}\nfunction createNextOpenItems(data, previousOpenItems) {\n    if (data.value === null) {\n        return previousOpenItems;\n    }\n    const previousOpenItemsHasId = previousOpenItems.has(data.value);\n    if (data.open ? previousOpenItemsHasId : !previousOpenItemsHasId) {\n        return previousOpenItems;\n    }\n    const nextOpenItems = createImmutableSet(previousOpenItems);\n    return data.open ? nextOpenItems.add(data.value) : nextOpenItems.delete(data.value);\n}\n"],"names":["useOpenItemsState","props","openItems","setOpenItems","useControllableState","state","React","useMemo","createImmutableSet","defaultState","defaultOpenItems","initialState","emptyImmutableSet","updateOpenItems","useEventCallback","data","currentOpenItems","createNextOpenItems","previousOpenItems","value","previousOpenItemsHasId","has","open","nextOpenItems","add","delete"],"mappings":";;;;+BAGgBA;;aAAAA;;;gCAHuC;6DAChC;8BAC+B;AAC/C,SAASA,kBAAkBC,KAAK,EAAE;IACrC,MAAM,CAACC,WAAWC,aAAa,GAAGC,IAAAA,oCAAoB,EAAC;QACnDC,OAAOC,OAAMC,OAAO,CAAC,IAAIN,MAAMC,SAAS,IAAIM,IAAAA,gCAAkB,EAACP,MAAMC,SAAS,GAAG;YAC7ED,MAAMC,SAAS;SAClB;QACDO,cAAcR,MAAMS,gBAAgB,IAAK,CAAA,IAAIF,IAAAA,gCAAkB,EAACP,MAAMS,gBAAgB,CAAA;QACtFC,cAAcC,+BAAiB;IACnC;IACA,MAAMC,kBAAkBC,IAAAA,gCAAgB,EAAC,CAACC,OAAOZ,aAAa,CAACa,mBAAmBC,oBAAoBF,MAAMC;IAC5G,OAAO;QACHd;QACAW;KACH;AACL;AACA,SAASI,oBAAoBF,IAAI,EAAEG,iBAAiB,EAAE;IAClD,IAAIH,KAAKI,KAAK,KAAK,IAAI,EAAE;QACrB,OAAOD;IACX,CAAC;IACD,MAAME,yBAAyBF,kBAAkBG,GAAG,CAACN,KAAKI,KAAK;IAC/D,IAAIJ,KAAKO,IAAI,GAAGF,yBAAyB,CAACA,sBAAsB,EAAE;QAC9D,OAAOF;IACX,CAAC;IACD,MAAMK,gBAAgBf,IAAAA,gCAAkB,EAACU;IACzC,OAAOH,KAAKO,IAAI,GAAGC,cAAcC,GAAG,CAACT,KAAKI,KAAK,IAAII,cAAcE,MAAM,CAACV,KAAKI,KAAK,CAAC;AACvF"}

package/lib-commonjs/index.js

@@ -35,11 +35,6 @@ _export(exports, {
     renderTreeItemPersonaLayout_unstable: ()=>_treeItemPersonaLayout.renderTreeItemPersonaLayout_unstable,
     useTreeItemPersonaLayoutStyles_unstable: ()=>_treeItemPersonaLayout.useTreeItemPersonaLayoutStyles_unstable,
     useTreeItemPersonaLayout_unstable: ()=>_treeItemPersonaLayout.useTreeItemPersonaLayout_unstable,
-    TreeItemAside: ()=>_treeItemAside.TreeItemAside,
-    treeItemAsideClassNames: ()=>_treeItemAside.treeItemAsideClassNames,
-    renderTreeItemAside_unstable: ()=>_treeItemAside.renderTreeItemAside_unstable,
-    useTreeItemAsideStyles_unstable: ()=>_treeItemAside.useTreeItemAsideStyles_unstable,
-    useTreeItemAside_unstable: ()=>_treeItemAside.useTreeItemAside_unstable,
     useFlatTree_unstable: ()=>_index.useFlatTree_unstable,
     flattenTree_unstable: ()=>_flattenTree.flattenTree_unstable
 });
@@ -49,6 +44,5 @@ const _tokens = require("./utils/tokens");
 const _treeItem = require("./TreeItem");
 const _treeItemLayout = require("./TreeItemLayout");
 const _treeItemPersonaLayout = require("./TreeItemPersonaLayout");
-const _treeItemAside = require("./TreeItemAside");
 const _index = require("./hooks/index");
 const _flattenTree = require("./utils/flattenTree");