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

package/lib/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getSlots","AvatarContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","isActionsVisible","slots","slotProps","createElement","root","media","value","avatar","content","main","description","aside"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/renderTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutSlots,\n  TreeItemPersonaLayoutContextValues,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { isActionsVisible } = state;\n  const { slots, slotProps } = getSlots<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.media && (\n        <AvatarContextProvider value={contextValues.avatar}>\n          <slots.media {...slotProps.media} />\n        </AvatarContextProvider>\n      )}\n      {slots.content && (\n        <slots.content {...slotProps.content}>\n          {slots.main && <slots.main {...slotProps.main} />}\n          {slots.description && <slots.description {...slotProps.description} />}\n        </slots.content>\n      )}\n      {!isActionsVisible && slots.aside && <slots.aside {...slotProps.aside} />}\n    </slots.root>\n  );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAMpD,SAASC,qBAAqB,QAAQ,wBAAwB;AAE9D;;;AAGA,OAAO,MAAMC,oCAAoC,GAAGA,CAClDC,KAAiC,EACjCC,aAAiD,KAC/C;EACF,MAAM;IAAEC;EAAgB,CAAE,GAAGF,KAAK;EAClC,MAAM;IAAEG,KAAK;IAAEC;EAAS,CAAE,GAAGP,QAAQ,CAA6BG,KAAK,CAAC;EAExE,oBACEJ,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BH,KAAK,CAACI,KAAK,iBACVX,KAAA,CAAAS,aAAA,CAACP,qBAAqB;IAACU,KAAK,EAAEP,aAAa,CAACQ;EAAM,gBAChDb,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACI,KAAK;IAAA,GAAKH,SAAS,CAACG;EAAK,EAAI,CAEvC,EACAJ,KAAK,CAACO,OAAO,iBACZd,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,GACjCP,KAAK,CAACQ,IAAI,iBAAIf,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACQ,IAAI;IAAA,GAAKP,SAAS,CAACO;EAAI,EAAI,EAChDR,KAAK,CAACS,WAAW,iBAAIhB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACS,WAAW;IAAA,GAAKR,SAAS,CAACQ;EAAW,EAAI,CAEzE,EACA,CAACV,gBAAgB,IAAIC,KAAK,CAACU,KAAK,iBAAIjB,KAAA,CAAAS,aAAA,CAACF,KAAK,CAACU,KAAK;IAAA,GAAKT,SAAS,CAACS;EAAK,EAAI,CAC9D;AAEjB,CAAC"}
+{"version":3,"sources":["renderTreeItemPersonaLayout.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type {\n  TreeItemPersonaLayoutState,\n  TreeItemPersonaLayoutContextValues,\n  TreeItemPersonaLayoutSlots,\n} from './TreeItemPersonaLayout.types';\nimport { AvatarContextProvider } from '@fluentui/react-avatar';\nimport { ButtonContextProvider } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of TreeItemPersonaLayout\n */\nexport const renderTreeItemPersonaLayout_unstable = (\n  state: TreeItemPersonaLayoutState,\n  contextValues: TreeItemPersonaLayoutContextValues,\n) => {\n  const { slots, slotProps } = getSlotsNext<TreeItemPersonaLayoutSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.expandIcon && <slots.expandIcon {...slotProps.expandIcon} />}\n      <AvatarContextProvider value={contextValues.avatar}>\n        <slots.media {...slotProps.media} />\n      </AvatarContextProvider>\n      <slots.main {...slotProps.main} />\n      {slots.description && <slots.description {...slotProps.description} />}\n      <ButtonContextProvider value={state.buttonContextValue}>\n        {slots.actions && <slots.actions {...slotProps.actions} />}\n        {slots.aside && <slots.aside {...slotProps.aside} />}\n      </ButtonContextProvider>\n    </slots.root>\n  );\n};\n"],"names":["createElement","getSlotsNext","AvatarContextProvider","ButtonContextProvider","renderTreeItemPersonaLayout_unstable","state","contextValues","slots","slotProps","root","expandIcon","value","avatar","media","main","description","buttonContextValue","actions","aside"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AAMzD,SAASC,qBAAqB,QAAQ,yBAAyB;AAC/D,SAASC,qBAAqB,QAAQ,yBAAyB;AAE/D;;CAEC,GACD,OAAO,MAAMC,uCAAuC,CAClDC,OACAC,gBACG;IACH,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGP,aAAyCI;IAEtE,qBACE,AAtBJ,cAsBKE,MAAME,IAAI,EAAKD,UAAUC,IAAI,EAC3BF,MAAMG,UAAU,kBAAI,AAvB3B,cAuB4BH,MAAMG,UAAU,EAAKF,UAAUE,UAAU,iBAC/D,AAxBN,cAwBOR;QAAsBS,OAAOL,cAAcM,MAAM;qBAChD,AAzBR,cAyBSL,MAAMM,KAAK,EAAKL,UAAUK,KAAK,kBAElC,AA3BN,cA2BON,MAAMO,IAAI,EAAKN,UAAUM,IAAI,GAC7BP,MAAMQ,WAAW,kBAAI,AA5B5B,cA4B6BR,MAAMQ,WAAW,EAAKP,UAAUO,WAAW,iBAClE,AA7BN,cA6BOZ;QAAsBQ,OAAON,MAAMW,kBAAkB;OACnDT,MAAMU,OAAO,kBAAI,AA9B1B,cA8B2BV,MAAMU,OAAO,EAAKT,UAAUS,OAAO,GACrDV,MAAMW,KAAK,kBAAI,AA/BxB,cA+ByBX,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxD,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js

@@ -1,6 +1,8 @@
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
-import { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';
+import * as React from 'react';
+import { resolveShorthand } from '@fluentui/react-utilities';
+import { useTreeContext_unstable } from '../../contexts';
 import { treeAvatarSize } from '../../utils/tokens';
+import { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';
 /**
  * Create the state required to render TreeItemPersonaLayout.
  *
@@ -9,50 +11,35 @@ import { treeAvatarSize } from '../../utils/tokens';
  *
  * @param props - props from this instance of TreeItemPersonaLayout
  * @param ref - reference to root HTMLElement of TreeItemPersonaLayout
- */
-export const useTreeItemPersonaLayout_unstable = (props, ref) => {
-  const {
-    media,
-    content,
-    children,
-    main,
-    description,
-    aside,
-    as = 'span'
-  } = props;
-  const size = useTreeContext_unstable(ctx => ctx.size);
-  const {
-    isActionsVisible
-  } = useTreeItemContext_unstable();
-  return {
-    components: {
-      content: 'div',
-      main: 'span',
-      description: 'span',
-      root: 'span',
-      media: 'span',
-      aside: 'span'
-    },
-    isActionsVisible,
-    avatarSize: treeAvatarSize[size],
-    root: getNativeElementProps(as, {
-      ...props,
-      ref
-    }),
-    main: resolveShorthand(main, {
-      required: true,
-      defaultProps: {
-        children
-      }
-    }),
-    media: resolveShorthand(media, {
-      required: true
-    }),
-    content: resolveShorthand(content, {
-      required: true
-    }),
-    description: resolveShorthand(description),
-    aside: resolveShorthand(aside)
-  };
+ */ export const useTreeItemPersonaLayout_unstable = (props, ref)=>{
+    const { media , children , main , description  } = props;
+    const treeItemLayoutState = useTreeItemLayout_unstable({
+        ...props,
+        iconBefore: null,
+        iconAfter: null
+    }, ref);
+    const size = useTreeContext_unstable((ctx)=>ctx.size);
+    return {
+        ...treeItemLayoutState,
+        components: {
+            expandIcon: 'div',
+            main: 'div',
+            description: 'div',
+            root: 'div',
+            media: 'div',
+            aside: 'div',
+            actions: 'div'
+        },
+        avatarSize: treeAvatarSize[size],
+        main: resolveShorthand(main, {
+            required: true,
+            defaultProps: {
+                children
+            }
+        }),
+        media: resolveShorthand(media, {
+            required: true
+        }),
+        description: resolveShorthand(description)
+    };
 };
-//# sourceMappingURL=useTreeItemPersonaLayout.js.map

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.js.map

@@ -1 +1 @@
-{"version":3,"names":["getNativeElementProps","resolveShorthand","useTreeContext_unstable","useTreeItemContext_unstable","treeAvatarSize","useTreeItemPersonaLayout_unstable","props","ref","media","content","children","main","description","aside","as","size","ctx","isActionsVisible","components","root","avatarSize","required","defaultProps"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayout.ts"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable, useTreeItemContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, content, children, main, description, aside, as = 'span' } = props;\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  const { isActionsVisible } = useTreeItemContext_unstable();\n  return {\n    components: {\n      content: 'div',\n      main: 'span',\n      description: 'span',\n      root: 'span',\n      media: 'span',\n      aside: 'span',\n    },\n    isActionsVisible,\n    avatarSize: treeAvatarSize[size],\n    root: getNativeElementProps(as, { ...props, ref }),\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    content: resolveShorthand(content, { required: true }),\n    description: resolveShorthand(description),\n    aside: resolveShorthand(aside),\n  };\n};\n"],"mappings":"AAEA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnF,SAASC,uBAAuB,EAAEC,2BAA2B,QAAQ,gBAAgB;AACrF,SAASC,cAAc,QAAQ,oBAAoB;AAEnD;;;;;;;;;AASA,OAAO,MAAMC,iCAAiC,GAAGA,CAC/CC,KAAiC,EACjCC,GAA+B,KACD;EAC9B,MAAM;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,WAAW;IAAEC,KAAK;IAAEC,EAAE,GAAG;EAAM,CAAE,GAAGR,KAAK;EACjF,MAAMS,IAAI,GAAGb,uBAAuB,CAACc,GAAG,IAAIA,GAAG,CAACD,IAAI,CAAC;EACrD,MAAM;IAAEE;EAAgB,CAAE,GAAGd,2BAA2B,EAAE;EAC1D,OAAO;IACLe,UAAU,EAAE;MACVT,OAAO,EAAE,KAAK;MACdE,IAAI,EAAE,MAAM;MACZC,WAAW,EAAE,MAAM;MACnBO,IAAI,EAAE,MAAM;MACZX,KAAK,EAAE,MAAM;MACbK,KAAK,EAAE;KACR;IACDI,gBAAgB;IAChBG,UAAU,EAAEhB,cAAc,CAACW,IAAI,CAAC;IAChCI,IAAI,EAAEnB,qBAAqB,CAACc,EAAE,EAAE;MAAE,GAAGR,KAAK;MAAEC;IAAG,CAAE,CAAC;IAClDI,IAAI,EAAEV,gBAAgB,CAACU,IAAI,EAAE;MAAEU,QAAQ,EAAE,IAAI;MAAEC,YAAY,EAAE;QAAEZ;MAAQ;IAAE,CAAE,CAAC;IAC5EF,KAAK,EAAEP,gBAAgB,CAACO,KAAK,EAAE;MAAEa,QAAQ,EAAE;IAAI,CAAE,CAAC;IAClDZ,OAAO,EAAER,gBAAgB,CAACQ,OAAO,EAAE;MAAEY,QAAQ,EAAE;IAAI,CAAE,CAAC;IACtDT,WAAW,EAAEX,gBAAgB,CAACW,WAAW,CAAC;IAC1CC,KAAK,EAAEZ,gBAAgB,CAACY,KAAK;GAC9B;AACH,CAAC"}
+{"version":3,"sources":["useTreeItemPersonaLayout.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { TreeItemPersonaLayoutProps, TreeItemPersonaLayoutState } from './TreeItemPersonaLayout.types';\nimport { resolveShorthand } from '@fluentui/react-utilities';\nimport { useTreeContext_unstable } from '../../contexts';\nimport { treeAvatarSize } from '../../utils/tokens';\nimport { useTreeItemLayout_unstable } from '../TreeItemLayout/useTreeItemLayout';\n\n/**\n * Create the state required to render TreeItemPersonaLayout.\n *\n * The returned state can be modified with hooks such as useTreeItemPersonaLayoutStyles_unstable,\n * before being passed to renderTreeItemPersonaLayout_unstable.\n *\n * @param props - props from this instance of TreeItemPersonaLayout\n * @param ref - reference to root HTMLElement of TreeItemPersonaLayout\n */\nexport const useTreeItemPersonaLayout_unstable = (\n  props: TreeItemPersonaLayoutProps,\n  ref: React.Ref<HTMLSpanElement>,\n): TreeItemPersonaLayoutState => {\n  const { media, children, main, description } = props;\n\n  const treeItemLayoutState = useTreeItemLayout_unstable(\n    {\n      ...props,\n      iconBefore: null,\n      iconAfter: null,\n    },\n    ref,\n  );\n\n  const size = useTreeContext_unstable(ctx => ctx.size);\n  return {\n    ...treeItemLayoutState,\n    components: {\n      expandIcon: 'div',\n      main: 'div',\n      description: 'div',\n      root: 'div',\n      media: 'div',\n      aside: 'div',\n      actions: 'div',\n    },\n    avatarSize: treeAvatarSize[size],\n    main: resolveShorthand(main, { required: true, defaultProps: { children } }),\n    media: resolveShorthand(media, { required: true }),\n    description: resolveShorthand(description),\n  };\n};\n"],"names":["React","resolveShorthand","useTreeContext_unstable","treeAvatarSize","useTreeItemLayout_unstable","useTreeItemPersonaLayout_unstable","props","ref","media","children","main","description","treeItemLayoutState","iconBefore","iconAfter","size","ctx","components","expandIcon","root","aside","actions","avatarSize","required","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,uBAAuB,QAAQ,iBAAiB;AACzD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,0BAA0B,QAAQ,sCAAsC;AAEjF;;;;;;;;CAQC,GACD,OAAO,MAAMC,oCAAoC,CAC/CC,OACAC,MAC+B;IAC/B,MAAM,EAAEC,MAAK,EAAEC,SAAQ,EAAEC,KAAI,EAAEC,YAAW,EAAE,GAAGL;IAE/C,MAAMM,sBAAsBR,2BAC1B;QACE,GAAGE,KAAK;QACRO,YAAY,IAAI;QAChBC,WAAW,IAAI;IACjB,GACAP;IAGF,MAAMQ,OAAOb,wBAAwBc,CAAAA,MAAOA,IAAID,IAAI;IACpD,OAAO;QACL,GAAGH,mBAAmB;QACtBK,YAAY;YACVC,YAAY;YACZR,MAAM;YACNC,aAAa;YACbQ,MAAM;YACNX,OAAO;YACPY,OAAO;YACPC,SAAS;QACX;QACAC,YAAYnB,cAAc,CAACY,KAAK;QAChCL,MAAMT,iBAAiBS,MAAM;YAAEa,UAAU,IAAI;YAAEC,cAAc;gBAAEf;YAAS;QAAE;QAC1ED,OAAOP,iBAAiBO,OAAO;YAAEe,UAAU,IAAI;QAAC;QAChDZ,aAAaV,iBAAiBU;IAChC;AACF,EAAE"}

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js

@@ -1,13 +1,12 @@
 import * as React from 'react';
 export function useTreeItemPersonaLayoutContextValues_unstable(state) {
-  const {
-    avatarSize
-  } = state;
-  const avatar = React.useMemo(() => ({
-    size: avatarSize
-  }), [avatarSize]);
-  return {
-    avatar
-  };
+    const { avatarSize  } = state;
+    const avatar = React.useMemo(()=>({
+            size: avatarSize
+        }), [
+        avatarSize
+    ]);
+    return {
+        avatar
+    };
 }
-//# sourceMappingURL=useTreeItemPersonaLayoutContextValues.js.map

package/lib/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"sources":["../src/packages/react-components/react-tree/src/components/TreeItemPersonaLayout/useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"mappings":"AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,8CAA8CA,CAC5DC,KAAiC;EAEjC,MAAM;IAAEC;EAAU,CAAE,GAAGD,KAAK;EAE5B,MAAME,MAAM,GAAGJ,KAAK,CAACK,OAAO,CAAqB,OAAO;IAAEC,IAAI,EAAEH;EAAU,CAAE,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAE5F,OAAO;IAAEC;EAAM,CAAE;AACnB"}
+{"version":3,"sources":["useTreeItemPersonaLayoutContextValues.ts"],"sourcesContent":["import type { AvatarContextValue } from '@fluentui/react-avatar';\nimport * as React from 'react';\nimport type { TreeItemPersonaLayoutState, TreeItemPersonaLayoutContextValues } from './TreeItemPersonaLayout.types';\n\nexport function useTreeItemPersonaLayoutContextValues_unstable(\n  state: TreeItemPersonaLayoutState,\n): TreeItemPersonaLayoutContextValues {\n  const { avatarSize } = state;\n\n  const avatar = React.useMemo<AvatarContextValue>(() => ({ size: avatarSize }), [avatarSize]);\n\n  return { avatar };\n}\n"],"names":["React","useTreeItemPersonaLayoutContextValues_unstable","state","avatarSize","avatar","useMemo","size"],"mappings":"AACA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,+CACdC,KAAiC,EACG;IACpC,MAAM,EAAEC,WAAU,EAAE,GAAGD;IAEvB,MAAME,SAASJ,MAAMK,OAAO,CAAqB,IAAO,CAAA;YAAEC,MAAMH;QAAW,CAAA,GAAI;QAACA;KAAW;IAE3F,OAAO;QAAEC;IAAO;AAClB,CAAC"}

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

@@ -0,0 +1,206 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { treeItemLevelToken } from '../../utils/tokens';
+import { useTreeItemContext_unstable } from '../../contexts/treeItemContext';
+export const treeItemPersonaLayoutClassNames = {
+  root: 'fui-TreeItemPersonaLayout',
+  media: 'fui-TreeItemPersonaLayout__media',
+  description: 'fui-TreeItemPersonaLayout__description',
+  main: 'fui-TreeItemPersonaLayout__main',
+  expandIcon: 'fui-TreeItemPersonaLayout__expandIcon',
+  aside: 'fui-TreeItemPersonaLayout__aside',
+  actions: 'fui-TreeItemPersonaLayout__actions'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f13qh94s",
+    wkccdc: "f1y0tuzo",
+    Budl1dq: "fellwe7",
+    zoa1oz: "f1pam7zy",
+    Bt984gj: "f122n59",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    lj723h: "flvvhsy",
+    ecr2s2: "f1wfn5kd",
+    zt0xaq: "f5na5aj",
+    Bi91k9c: "fnwyq0v",
+    Jwef8y: "f1t94bn6",
+    tbva4x: "f1oboesa"
+  },
+  leaf: {
+    uwmqm3: ["f1k1erfc", "faevyjx"]
+  },
+  branch: {
+    uwmqm3: ["fo100m9", "f6yw3pu"]
+  }
+}, {
+  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));}"],
+  a: [".flvvhsy:active{color:var(--colorNeutralForeground2Pressed);}", ".f1wfn5kd:active{background-color:var(--colorSubtleBackgroundPressed);}", ".f5na5aj:active .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Pressed);}"],
+  h: [".fnwyq0v:hover{color:var(--colorNeutralForeground2Hover);}", ".f1t94bn6:hover{background-color:var(--colorSubtleBackgroundHover);}", ".f1oboesa:hover .fui-TreeItemPersonaLayout__expandIcon{color:var(--colorNeutralForeground3Hover);}"]
+});
+/**
+ * Styles for the expand icon slot
+ */
+const useMediaStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    a9b677: "f1szoe96",
+    Bqenvij: "f1d2rq10",
+    Ijaq50: "f11uok23",
+    Br312pm: "f1qdfnnj",
+    nk6f5a: "f1s27gz",
+    Bw0ie65: "f86d0yl",
+    z8tnut: "f1g0x7ka",
+    z189sj: ["f7x41pl", "fruq291"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["fgiv446", "ffczdla"]
+  }
+}, {
+  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);}"]
+});
+const useMainStyles = /*#__PURE__*/__styles({
+  base: {
+    Ijaq50: "f17iroih",
+    Br312pm: "fppdkoh",
+    nk6f5a: "fsb8d6n",
+    Bw0ie65: "f6k5g14",
+    z8tnut: "f1ngh7ph",
+    z189sj: ["f7x41pl", "fruq291"],
+    Byoj8tv: "f5o476b",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  withDescription: {
+    z8tnut: "f1ngh7ph",
+    z189sj: ["f7x41pl", "fruq291"],
+    Byoj8tv: "f1qch9an",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  }
+}, {
+  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;}"]
+});
+const useDescriptionStyles = /*#__PURE__*/__styles({
+  base: {
+    Ijaq50: "ffekjdo",
+    Br312pm: "f12wtlaa",
+    nk6f5a: "f1blqr63",
+    Bw0ie65: "f2ve1i",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    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);}", ".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__*/__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__*/__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);}"]
+});
+/**
+ * Styles for the expand icon slot
+ */
+const useExpandIconStyles = /*#__PURE__*/__styles({
+  base: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Brf1p80: "f4d9j23",
+    Bf4jedk: "f17fgpbq",
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "f11d4kpn",
+    Ijaq50: "f1e6rimv",
+    Br312pm: "f10hsf66",
+    nk6f5a: "foflfm0",
+    Bw0ie65: "f1b3ebjb",
+    Bh6795r: "f1jhi6b8",
+    Bnnss6s: "fi64zpg",
+    xawz: "f1rmlqtg",
+    z8tnut: "f1ywm7hm",
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Byoj8tv: "f14wxoun",
+    uwmqm3: ["f1cnd47f", "fhxju0i"]
+  }
+}, {
+  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);}"]
+});
+/**
+ * Apply styling to the TreeItemPersonaLayout slots based on the state
+ */
+export const useTreeItemPersonaLayoutStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const mediaStyles = useMediaStyles();
+  const descriptionStyles = useDescriptionStyles();
+  const actionsStyles = useActionsStyles();
+  const asideStyles = useAsideStyles();
+  const expandIconStyles = useExpandIconStyles();
+  const mainStyles = useMainStyles();
+  const itemType = useTreeItemContext_unstable(ctx => ctx.itemType);
+  state.root.className = mergeClasses(treeItemPersonaLayoutClassNames.root, rootStyles.base, rootStyles[itemType], state.root.className);
+  state.media.className = mergeClasses(treeItemPersonaLayoutClassNames.media, mediaStyles.base, state.media.className);
+  if (state.main) {
+    state.main.className = mergeClasses(treeItemPersonaLayoutClassNames.main, mainStyles.base, state.description && mainStyles.withDescription, state.main.className);
+  }
+  if (state.description) {
+    state.description.className = mergeClasses(treeItemPersonaLayoutClassNames.description, descriptionStyles.base, state.description.className);
+  }
+  if (state.actions) {
+    state.actions.className = mergeClasses(treeItemPersonaLayoutClassNames.actions, actionsStyles.base, state.actions.className);
+  }
+  if (state.aside) {
+    state.aside.className = mergeClasses(treeItemPersonaLayoutClassNames.aside, asideStyles.base, state.aside.className);
+  }
+  if (state.expandIcon) {
+    state.expandIcon.className = mergeClasses(treeItemPersonaLayoutClassNames.expandIcon, expandIconStyles.base, state.expandIcon.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useTreeItemPersonaLayoutStyles.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","typographyStyles","treeItemLevelToken","useTreeItemContext_unstable","treeItemPersonaLayoutClassNames","root","media","description","main","expandIcon","aside","actions","useRootStyles","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","useTreeItemPersonaLayoutStyles_unstable","state","rootStyles","mediaStyles","descriptionStyles","actionsStyles","asideStyles","expandIconStyles","mainStyles","itemType","ctx","className"],"sources":["useTreeItemPersonaLayoutStyles.styles.js"],"sourcesContent":["import { makeStyles, 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 */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid',\n        gridTemplateRows: '1fr auto',\n        gridTemplateColumns: 'auto auto 1fr auto',\n        gridTemplateAreas: `\n      \"expandIcon media main        aside\"\n      \"expandIcon media description aside\"\n    `,\n        alignItems: 'center',\n        ...typographyStyles.body1,\n        ':active': {\n            color: tokens.colorNeutralForeground2Pressed,\n            backgroundColor: tokens.colorSubtleBackgroundPressed,\n            // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon for styling\n            [`& .${treeItemPersonaLayoutClassNames.expandIcon}`]: {\n                color: tokens.colorNeutralForeground3Pressed\n            }\n        },\n        ':hover': {\n            color: tokens.colorNeutralForeground2Hover,\n            backgroundColor: tokens.colorSubtleBackgroundHover,\n            // TODO: stop using treeItemPersonaLayoutClassNames.expandIcon  for styling\n            [`& .${treeItemPersonaLayoutClassNames.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});\n/**\n * Styles for the expand icon slot\n */ const useMediaStyles = makeStyles({\n    base: {\n        display: 'flex',\n        alignItems: 'center',\n        width: '32px',\n        height: '32px',\n        ...shorthands.gridArea('media'),\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalXXS)\n    }\n});\nconst useMainStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('main'),\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\n    },\n    withDescription: {\n        ...shorthands.padding(tokens.spacingVerticalMNudge, tokens.spacingHorizontalXS, 0, tokens.spacingHorizontalS)\n    }\n});\nconst useDescriptionStyles = makeStyles({\n    base: {\n        ...shorthands.gridArea('description'),\n        ...typographyStyles.caption1,\n        ...shorthands.padding(0, tokens.spacingHorizontalXS, tokens.spacingVerticalMNudge, tokens.spacingHorizontalS)\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.gridArea('expandIcon'),\n        ...shorthands.flex(0, 0, 'auto'),\n        ...shorthands.padding(tokens.spacingVerticalXS, 0)\n    }\n});\n/**\n * Apply styling to the TreeItemPersonaLayout slots based on the state\n */ export 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"],"mappings":"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"}

package/lib/contexts/index.js

@@ -1,3 +1,2 @@
 export * from './treeContext';
 export * from './treeItemContext';
-//# sourceMappingURL=index.js.map

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/contexts/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC","sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './treeContext';\nexport * from './treeItemContext';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB"}

package/lib/contexts/treeContext.js

@@ -1,19 +1,14 @@
 import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 import { emptyImmutableSet } from '../utils/ImmutableSet';
 const defaultContextValue = {
-  level: 0,
-  openItems: emptyImmutableSet,
-  requestOpenChange: noop,
-  requestNavigation: noop,
-  appearance: 'subtle',
-  size: 'medium'
+    level: 0,
+    openItems: emptyImmutableSet,
+    requestTreeResponse: noop,
+    appearance: 'subtle',
+    size: 'medium'
 };
 function noop() {
-  /* noop */
-}
-export const TreeContext = /*#__PURE__*/createContext(undefined);
-export const {
-  Provider: TreeProvider
-} = TreeContext;
-export const useTreeContext_unstable = selector => useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));
-//# sourceMappingURL=treeContext.js.map
+/* noop */ }
+export const TreeContext = createContext(undefined);
+export const { Provider: TreeProvider  } = TreeContext;
+export const useTreeContext_unstable = (selector)=>useContextSelector(TreeContext, (ctx = defaultContextValue)=>selector(ctx));

package/lib/contexts/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestOpenChange","noop","requestNavigation","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"sources":["../src/packages/react-components/react-tree/src/contexts/treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemId, TreeOpenChangeData, TreeNavigationData_unstable } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<TreeItemId>;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange(data: TreeOpenChangeData): void;\n  requestNavigation(data: TreeNavigationData_unstable): void;\n};\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestOpenChange: noop,\n  requestNavigation: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,kCAAkC;AAE9G,SAASC,iBAAiB,QAAsB,uBAAuB;AAcvE,MAAMC,mBAAmB,GAAqB;EAC5CC,KAAK,EAAE,CAAC;EACRC,SAAS,EAAEH,iBAAiB;EAC5BI,iBAAiB,EAAEC,IAAI;EACvBC,iBAAiB,EAAED,IAAI;EACvBE,UAAU,EAAE,QAAQ;EACpBC,IAAI,EAAE;CACP;AAED,SAASH,IAAIA,CAAA;EACX;AAAA;AAGF,OAAO,MAAMI,WAAW,gBAA0CX,aAAa,CAC7EY,SAAS,CACV;AAED,OAAO,MAAM;EAAEC,QAAQ,EAAEC;AAAY,CAAE,GAAGH,WAAW;AACrD,OAAO,MAAMI,uBAAuB,GAAOC,QAA8C,IACvFf,kBAAkB,CAACU,WAAW,EAAE,CAACM,GAAG,GAAGd,mBAAmB,KAAKa,QAAQ,CAACC,GAAG,CAAC,CAAC"}
+{"version":3,"sources":["treeContext.ts"],"sourcesContent":["import { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeNavigationData_unstable, TreeOpenChangeData } from '../Tree';\nimport { emptyImmutableSet, ImmutableSet } from '../utils/ImmutableSet';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeContextValue = {\n  level: number;\n  appearance: 'subtle' | 'subtle-alpha' | 'transparent';\n  size: 'small' | 'medium';\n  openItems: ImmutableSet<unknown>;\n  /**\n   * requests root Tree component to respond to some tree item event,\n   */\n  requestTreeResponse(request: TreeItemRequest): void;\n};\n\nexport type TreeItemRequest = { itemType: TreeItemType } & (\n  | OmitWithoutExpanding<TreeOpenChangeData, 'open' | 'target'>\n  | OmitWithoutExpanding<TreeNavigationData_unstable, 'target'>\n);\n\n// helper type that avoids the expansion of unions while inferring it, should work exactly the same as Omit\ntype OmitWithoutExpanding<P, K extends string | number | symbol> = P extends unknown ? Omit<P, K> : P;\n\nconst defaultContextValue: TreeContextValue = {\n  level: 0,\n  openItems: emptyImmutableSet,\n  requestTreeResponse: noop,\n  appearance: 'subtle',\n  size: 'medium',\n};\n\nfunction noop() {\n  /* noop */\n}\n\nexport const TreeContext: Context<TreeContextValue | undefined> = createContext<TreeContextValue | undefined>(\n  undefined,\n);\n\nexport const { Provider: TreeProvider } = TreeContext;\nexport const useTreeContext_unstable = <T>(selector: ContextSelector<TreeContextValue, T>): T =>\n  useContextSelector(TreeContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["createContext","useContextSelector","emptyImmutableSet","defaultContextValue","level","openItems","requestTreeResponse","noop","appearance","size","TreeContext","undefined","Provider","TreeProvider","useTreeContext_unstable","selector","ctx"],"mappings":"AAAA,SAAmCA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAE/G,SAASC,iBAAiB,QAAsB,wBAAwB;AAsBxE,MAAMC,sBAAwC;IAC5CC,OAAO;IACPC,WAAWH;IACXI,qBAAqBC;IACrBC,YAAY;IACZC,MAAM;AACR;AAEA,SAASF,OAAO;AACd,QAAQ,GACV;AAEA,OAAO,MAAMG,cAAqDV,cAChEW,WACA;AAEF,OAAO,MAAM,EAAEC,UAAUC,aAAY,EAAE,GAAGH,YAAY;AACtD,OAAO,MAAMI,0BAA0B,CAAIC,WACzCd,mBAAmBS,aAAa,CAACM,MAAMb,mBAAmB,GAAKY,SAASC,MAAM"}

package/lib/contexts/treeItemContext.js

@@ -1,13 +1,16 @@
 import * as React from 'react';
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
 const defaultContextValue = {
-  isActionsVisible: false
+    value: '',
+    isActionsVisible: false,
+    isAsideVisible: true,
+    actionsRef: React.createRef(),
+    expandIconRef: React.createRef(),
+    layoutRef: React.createRef(),
+    subtreeRef: React.createRef(),
+    itemType: 'leaf',
+    open: false
 };
-export const TreeItemContext = /*#__PURE__*/React.createContext(undefined);
-export const {
-  Provider: TreeItemProvider
-} = TreeItemContext;
-export const useTreeItemContext_unstable = () => {
-  var _a;
-  return (_a = React.useContext(TreeItemContext)) !== null && _a !== void 0 ? _a : defaultContextValue;
-};
-//# sourceMappingURL=treeItemContext.js.map
+export const TreeItemContext = createContext(undefined);
+export const { Provider: TreeItemProvider  } = TreeItemContext;
+export const useTreeItemContext_unstable = (selector)=>useContextSelector(TreeItemContext, (ctx = defaultContextValue)=>selector(ctx));

package/lib/contexts/treeItemContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","defaultContextValue","isActionsVisible","TreeItemContext","createContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","_a","useContext"],"sources":["../src/packages/react-components/react-tree/src/contexts/treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\n  isActionsVisible: false,\n};\n\nexport const TreeItemContext: React.Context<TreeItemContextValue | undefined> = React.createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = (): TreeItemContextValue =>\n  React.useContext(TreeItemContext) ?? defaultContextValue;\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAM9B,MAAMC,mBAAmB,GAAyB;EAChDC,gBAAgB,EAAE;CACnB;AAED,OAAO,MAAMC,eAAe,gBAAoDH,KAAK,CAACI,aAAa,CAEjGC,SAAS,CAAC;AAEZ,OAAO,MAAM;EAAEC,QAAQ,EAAEC;AAAgB,CAAE,GAAGJ,eAAe;AAC7D,OAAO,MAAMK,2BAA2B,GAAGA,CAAA,KAA2B;EAAA,IAAAC,EAAA;EACpE,QAAAA,EAAA,GAAAT,KAAK,CAACU,UAAU,CAACP,eAAe,CAAC,cAAAM,EAAA,cAAAA,EAAA,GAAIR,mBAAmB;AAAA"}
+{"version":3,"sources":["treeItemContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { Context, ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport { TreeItemType } from '../TreeItem';\n\nexport type TreeItemContextValue = {\n  isActionsVisible: boolean;\n  isAsideVisible: boolean;\n  actionsRef: React.Ref<HTMLDivElement>;\n  expandIconRef: React.Ref<HTMLDivElement>;\n  layoutRef: React.Ref<HTMLDivElement>;\n  subtreeRef: React.Ref<HTMLDivElement>;\n  itemType: TreeItemType;\n  value: string;\n  open: boolean;\n};\n\nconst defaultContextValue: TreeItemContextValue = {\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};\n\nexport const TreeItemContext: Context<TreeItemContextValue | undefined> = createContext<\n  TreeItemContextValue | undefined\n>(undefined);\n\nexport const { Provider: TreeItemProvider } = TreeItemContext;\nexport const useTreeItemContext_unstable = <T>(selector: ContextSelector<TreeItemContextValue, T>): T =>\n  useContextSelector(TreeItemContext, (ctx = defaultContextValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","defaultContextValue","value","isActionsVisible","isAsideVisible","actionsRef","createRef","expandIconRef","layoutRef","subtreeRef","itemType","open","TreeItemContext","undefined","Provider","TreeItemProvider","useTreeItemContext_unstable","selector","ctx"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAAmCC,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAe/G,MAAMC,sBAA4C;IAChDC,OAAO;IACPC,kBAAkB,KAAK;IACvBC,gBAAgB,IAAI;IACpBC,YAAYP,MAAMQ,SAAS;IAC3BC,eAAeT,MAAMQ,SAAS;IAC9BE,WAAWV,MAAMQ,SAAS;IAC1BG,YAAYX,MAAMQ,SAAS;IAC3BI,UAAU;IACVC,MAAM,KAAK;AACb;AAEA,OAAO,MAAMC,kBAA6Db,cAExEc,WAAW;AAEb,OAAO,MAAM,EAAEC,UAAUC,iBAAgB,EAAE,GAAGH,gBAAgB;AAC9D,OAAO,MAAMI,8BAA8B,CAAIC,WAC7CjB,mBAAmBY,iBAAiB,CAACM,MAAMjB,mBAAmB,GAAKgB,SAASC,MAAM"}

package/lib/hooks/index.js

@@ -1,4 +1,3 @@
 export * from './useFlatTree';
 export * from './useNestedTreeNavigation';
 export * from './useOpenItemsState';
-//# sourceMappingURL=index.js.map

package/lib/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-tree/src/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,2BAA2B,CAAC;AAC1C,cAAc,qBAAqB,CAAC","sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"]}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './useFlatTree';\nexport * from './useNestedTreeNavigation';\nexport * from './useOpenItemsState';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,4BAA4B;AAC1C,cAAc,sBAAsB"}