@primer/react 38.6.2-rc.4eca5d85c → 38.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/TreeView/{TreeView-bdf34914.css → TreeView-9a0e341c.css} +1 -1
  3. package/dist/TreeView/TreeView-9a0e341c.css.map +1 -0
  4. package/dist/TreeView/TreeView.module.css.js +1 -1
  5. package/dist/TreeView/useRovingTabIndex.d.ts.map +1 -1
  6. package/dist/TreeView/useRovingTabIndex.js +2 -1
  7. package/dist/TreeView/useTreeItemCache.d.ts +16 -0
  8. package/dist/TreeView/useTreeItemCache.d.ts.map +1 -0
  9. package/dist/TreeView/useTreeItemCache.js +85 -0
  10. package/dist/TreeView/useTreeItemCache.test.d.ts +2 -0
  11. package/dist/TreeView/useTreeItemCache.test.d.ts.map +1 -0
  12. package/dist/TreeView/useTypeahead.d.ts.map +1 -1
  13. package/dist/TreeView/useTypeahead.js +22 -18
  14. package/package.json +1 -1
  15. package/dist/TreeView/TreeView-bdf34914.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -4,6 +4,12 @@
4
4
 
5
5
  ### Patch Changes
6
6
 
7
+ - [#7334](https://github.com/primer/react/pull/7334) [`ea4789f`](https://github.com/primer/react/commit/ea4789fb15b42c8138ff3703f7fb5f2aad9e3810) Thanks [@mattcosta7](https://github.com/mattcosta7)! - perf(TreeView): Cache tree items in typeahead for better INP
8
+
9
+ - Add useTreeItemCache hook to cache DOM queries for tree items
10
+ - Update useRovingTabIndex and useTypeahead to use cached items
11
+ - Add documentation for acceptable :has() selector usage
12
+
7
13
  - [#7347](https://github.com/primer/react/pull/7347) [`72c7a7f`](https://github.com/primer/react/commit/72c7a7f74b0b2ea326a086252efa0027dbb04b78) Thanks [@owenniblock](https://github.com/owenniblock)! - Only shows the aria-describedby id for loading when the component is in the loading state
8
14
 
9
15
  ## 38.6.1
package/dist/TreeView/{TreeView-bdf34914.css → TreeView-9a0e341c.css} RENAMED
@@ -1,2 +1,2 @@
1
1
  .prc-TreeView-TreeViewRootUlStyles-Mzrmj{list-style:none;margin:0;padding:0}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f{outline:none}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f).focus-visible>div{box-shadow:var(--boxShadow-thick,inset 0 0 0 .125rem) var(--fgColor-accent,var(--color-accent-fg))}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f):focus-visible>div,:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f).focus-visible>div{outline:2px solid HighlightText;outline-offset:-2}}[data-has-leading-action]:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f){--has-leading-action:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ{--level:1;--toggle-width:1rem;--min-item-height:2rem;border-radius:var(--borderRadius-medium,.375rem);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:grid;font-size:var(--text-body-size-medium,.875rem);grid-template-areas:"spacer leadingAction toggle content trailingAction";grid-template-columns:var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;position:relative;width:100%;--leading-action-width:calc(var(--has-leading-action, 0)*1.5rem);--spacer-width:calc((var(--level) - 1)*(var(--toggle-width)/2))}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):hover{outline:2px solid transparent;outline-offset:-2px}}@media (pointer:coarse){.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ{--toggle-width:1.5rem;--min-item-height:2.75rem}}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):has(.prc-TreeView-TreeViewItemSkeleton-FGlnx):hover{background-color:transparent;cursor:default}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContainer-z6qqQ):has(.prc-TreeView-TreeViewItemSkeleton-FGlnx):hover{outline:none}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-omit-spacer=true]) .prc-TreeView-TreeViewItemContainer-z6qqQ{grid-template-columns:0 0 0 1fr}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ{background-color:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ):after{background-color:var(--fgColor-accent,var(--color-accent-fg));border-radius:var(--borderRadius-medium,.375rem);content:"";height:1.5rem;left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:.25rem}@media (forced-colors:active){:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItem-Ter5f[aria-current=true]>.prc-TreeView-TreeViewItemContainer-z6qqQ):after{background-color:HighlightText}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggle-hq3Xq{align-items:flex-start;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:toggle;height:100%;justify-content:center;padding-top:calc(var(--min-item-height)/2 - var(--base-size-12,.75rem)/2)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggleHover-H9tbt:hover{background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemToggleEnd-nWt9I{border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-top-left-radius:var(--borderRadius-medium,.375rem)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContent-RKsCI{display:flex;gap:var(--stack-gap-condensed,.5rem);grid-area:content;height:100%;line-height:var(--custom-line-height,var(--text-body-lineHeight-medium,1.4285));padding:0 var(--base-size-8,.5rem);padding-bottom:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2);padding-top:calc((var(--min-item-height) - var(--custom-line-height, 1.3rem))/2)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemContentText-FFaKp{flex:1 1 auto;width:0}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-truncate-text=true]) .prc-TreeView-TreeViewItemContentText-FFaKp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:where([data-truncate-text=false]) .prc-TreeView-TreeViewItemContentText-FFaKp{word-break:break-word}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemVisual-naWzj{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));display:flex;height:var(--custom-line-height,1.3rem)}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLeadingAction-vmOIV{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:leadingAction}:is(.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLeadingAction-vmOIV)>button{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemTrailingAction-h9M5g{color:var(--fgColor-muted,var(--color-fg-muted));display:flex;grid-area:trailingAction}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemTrailingActionButton-pCTdP{flex-shrink:1}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLevelLine-F-0-2{border-color:var(--borderColor-muted,var(--color-border-muted));border-right:var(--borderWidth-thin,.0625rem) solid;height:100%;width:100%}@media (hover:hover){.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewItemLevelLine-F-0-2{border-color:transparent}.prc-TreeView-TreeViewRootUlStyles-Mzrmj:focus-within .prc-TreeView-TreeViewItemLevelLine-F-0-2,.prc-TreeView-TreeViewRootUlStyles-Mzrmj:hover .prc-TreeView-TreeViewItemLevelLine-F-0-2{border-color:var(--borderColor-muted,var(--color-border-muted))}}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewDirectoryIcon-yP1oY{color:var(--treeViewItem-leadingVisual-iconColor-rest,var(--color-tree-view-item-directory-fill));display:grid}.prc-TreeView-TreeViewRootUlStyles-Mzrmj .prc-TreeView-TreeViewVisuallyHidden-1N8xK{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border-width:0;white-space:nowrap}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd{align-items:center;column-gap:.5rem;display:flex;height:2rem}@media (pointer:coarse){.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd{height:2.75rem}}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+1){--tree-item-loading-width:67%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+2){--tree-item-loading-width:47%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+3){--tree-item-loading-width:73%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+4){--tree-item-loading-width:64%}.prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd:nth-of-type(5n+5){--tree-item-loading-width:50%}.prc-TreeView-TreeItemSkeletonTextStyles-8VJ-g{width:var(--tree-item-loading-width,67%)}
2
- /*# sourceMappingURL=TreeView-bdf34914.css.map */
2
+ /*# sourceMappingURL=TreeView-9a0e341c.css.map */
package/dist/TreeView/TreeView-9a0e341c.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/TreeView/TreeView.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SAoPF,CAnOE,0EACE,YAgBF,CAdE,kMAEE,kGAOF,CALE,8BAJF,kMAKI,+BAAgC,CAEhC,iBAEJ,CADE,CAGF,wGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAQvB,gDAAyC,CAFzC,oDAA6B,CAC7B,cAAe,CAJf,YAAa,CAEb,8CAAuC,CAKvC,wEAAyE,CADzE,6FAA8F,CAP9F,iBAAkB,CAElB,UAAW,CAQX,gEAAmE,CACnE,+DA6BF,CA3BE,8FACE,wGAMF,CAJE,8BAHF,8FAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBA3BF,mFA4BI,qBAAsB,CACtB,yBAgBJ,CAfE,CAOA,4IAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,4IAKI,YAEJ,CADE,CAIJ,kHACE,+BACF,CAEA,uIACE,8GAwBF,CApBE,kJAaE,6DAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,kJAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,gDAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,wGACF,CAEA,mFAEE,4DAAqD,CADrD,yDAEF,CAEA,iFACE,YAAa,CAWb,oCAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,kCAA6B,CAM7B,mFAAsF,CAFtF,gFAMF,CAEA,qFACE,aAAc,CACd,OACF,CAEA,sHACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,uHAEE,qBACF,CAEA,gFAOE,kBAAmB,CADnB,gDAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,gDAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,mGACE,aACF,CAGF,wFAEE,gDAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAQE,+DAAsC,CACtC,mDAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,mFACE,wBACF,CAEA,yLAEE,+DACF,CACF,CAEA,mFAEE,iGAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,uDAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,uDAOI,cAsBJ,CArBE,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAGF,+CACE,wCACF","file":"TreeView-9a0e341c.css","sourcesContent":[".TreeViewRootUlStyles {\n padding: 0;\n margin: 0;\n list-style: none;\n\n /*\n * WARNING: This is a performance optimization.\n *\n * We define styles for the tree items at the root level of the tree\n * to avoid recomputing the styles for each item when the tree updates.\n * We're sacrificing maintainability for performance because TreeView\n * needs to be performant enough to handle large trees (thousands of items).\n *\n * This is intended to be a temporary solution until we can improve the\n * performance of our styling patterns.\n *\n * Do NOT copy this pattern without understanding the tradeoffs.\n */\n .TreeViewItem {\n outline: none;\n\n &:focus-visible > div,\n &:global(.focus-visible) > div {\n box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n @media (forced-colors: active) {\n outline: 2px solid HighlightText;\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n outline-offset: -2;\n }\n }\n\n &[data-has-leading-action] {\n --has-leading-action: 1;\n }\n }\n\n .TreeViewItemContainer {\n --level: 1;\n --toggle-width: 1rem;\n --min-item-height: 2rem;\n\n position: relative;\n display: grid;\n width: 100%;\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-default);\n cursor: pointer;\n border-radius: var(--borderRadius-medium);\n grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: -2px;\n }\n }\n\n @media (pointer: coarse) {\n --toggle-width: 1.5rem;\n --min-item-height: 2.75rem;\n }\n\n /*\n * NOTE: Uses descendant :has() - TreeViewItemSkeleton is nested inside\n * TreeViewItemContent > TreeViewItemContentText, not a direct child.\n * This is acceptable as the search is scoped to this element's subtree.\n */\n &:has(.TreeViewItemSkeleton):hover {\n cursor: default;\n background-color: transparent;\n\n @media (forced-colors: active) {\n outline: none;\n }\n }\n }\n\n &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n grid-template-columns: 0 0 0 1fr;\n }\n\n .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n background-color: var(--control-transparent-bgColor-selected);\n\n /* Current item indicator */\n /* stylelint-disable-next-line selector-max-specificity */\n &::after {\n position: absolute;\n top: calc(50% - var(--base-size-12));\n left: calc(-1 * var(--base-size-8));\n width: 0.25rem;\n height: 1.5rem;\n content: '';\n\n /*\n * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n */\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--fgColor-accent);\n border-radius: var(--borderRadius-medium);\n\n @media (forced-colors: active) {\n background-color: HighlightText;\n }\n }\n }\n\n .TreeViewItemToggle {\n display: flex;\n height: 100%;\n\n /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n color: var(--fgColor-muted);\n grid-area: toggle;\n justify-content: center;\n align-items: flex-start;\n }\n\n .TreeViewItemToggleHover:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n\n .TreeViewItemToggleEnd {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n .TreeViewItemContent {\n display: flex;\n height: 100%;\n padding: 0 var(--base-size-8);\n\n /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n grid-area: content;\n gap: var(--stack-gap-condensed);\n }\n\n .TreeViewItemContentText {\n flex: 1 1 auto;\n width: 0;\n }\n\n &:where([data-truncate-text='true']) .TreeViewItemContentText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &:where([data-truncate-text='false']) .TreeViewItemContentText {\n /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n word-break: break-word;\n }\n\n .TreeViewItemVisual {\n display: flex;\n\n /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n height: var(--custom-line-height, 1.3rem);\n color: var(--fgColor-muted);\n align-items: center;\n }\n\n .TreeViewItemLeadingAction {\n display: flex;\n color: var(--fgColor-muted);\n grid-area: leadingAction;\n\n & > button {\n flex-shrink: 1;\n }\n }\n\n .TreeViewItemTrailingAction {\n display: flex;\n color: var(--fgColor-muted);\n grid-area: trailingAction;\n }\n\n .TreeViewItemTrailingActionButton {\n flex-shrink: 1;\n }\n\n .TreeViewItemLevelLine {\n width: 100%;\n height: 100%;\n\n /*\n * On devices without hover, the nesting indicator lines\n * appear at all times.\n */\n border-color: var(--borderColor-muted);\n border-right: var(--borderWidth-thin) solid;\n }\n\n /*\n * On devices with :hover support, the nesting indicator lines\n * fade in when the user mouses over the entire component,\n * or when there's focus inside the component. This makes\n * sure the component remains simple when not in use.\n */\n @media (hover: hover) {\n .TreeViewItemLevelLine {\n border-color: transparent;\n }\n\n &:hover .TreeViewItemLevelLine,\n &:focus-within .TreeViewItemLevelLine {\n border-color: var(--borderColor-muted);\n }\n }\n\n .TreeViewDirectoryIcon {\n display: grid;\n color: var(--treeViewItem-leadingVisual-iconColor-rest);\n }\n\n .TreeViewVisuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n display: flex;\n align-items: center;\n column-gap: 0.5rem;\n height: 2rem;\n\n @media (pointer: coarse) {\n height: 2.75rem;\n }\n\n &:nth-of-type(5n + 1) {\n --tree-item-loading-width: 67%;\n }\n\n &:nth-of-type(5n + 2) {\n --tree-item-loading-width: 47%;\n }\n\n &:nth-of-type(5n + 3) {\n --tree-item-loading-width: 73%;\n }\n\n &:nth-of-type(5n + 4) {\n --tree-item-loading-width: 64%;\n }\n\n &:nth-of-type(5n + 5) {\n --tree-item-loading-width: 50%;\n }\n}\n\n.TreeItemSkeletonTextStyles {\n width: var(--tree-item-loading-width, 67%);\n}\n"]}
package/dist/TreeView/TreeView.module.css.js CHANGED
@@ -1,4 +1,4 @@
1
- import './TreeView-bdf34914.css';
1
+ import './TreeView-9a0e341c.css';
2
2
 
3
3
  var classes = {"TreeViewRootUlStyles":"prc-TreeView-TreeViewRootUlStyles-Mzrmj","TreeViewItem":"prc-TreeView-TreeViewItem-Ter5f","TreeViewItemContainer":"prc-TreeView-TreeViewItemContainer-z6qqQ","TreeViewItemSkeleton":"prc-TreeView-TreeViewItemSkeleton-FGlnx","TreeViewItemToggle":"prc-TreeView-TreeViewItemToggle-hq3Xq","TreeViewItemToggleHover":"prc-TreeView-TreeViewItemToggleHover-H9tbt","TreeViewItemToggleEnd":"prc-TreeView-TreeViewItemToggleEnd-nWt9I","TreeViewItemContent":"prc-TreeView-TreeViewItemContent-RKsCI","TreeViewItemContentText":"prc-TreeView-TreeViewItemContentText-FFaKp","TreeViewItemVisual":"prc-TreeView-TreeViewItemVisual-naWzj","TreeViewItemLeadingAction":"prc-TreeView-TreeViewItemLeadingAction-vmOIV","TreeViewItemTrailingAction":"prc-TreeView-TreeViewItemTrailingAction-h9M5g","TreeViewItemTrailingActionButton":"prc-TreeView-TreeViewItemTrailingActionButton-pCTdP","TreeViewItemLevelLine":"prc-TreeView-TreeViewItemLevelLine-F-0-2","TreeViewDirectoryIcon":"prc-TreeView-TreeViewDirectoryIcon-yP1oY","TreeViewVisuallyHidden":"prc-TreeView-TreeViewVisuallyHidden-1N8xK","TreeViewSkeletonItemContainerStyle":"prc-TreeView-TreeViewSkeletonItemContainerStyle-lKqwd","TreeItemSkeletonTextStyles":"prc-TreeView-TreeItemSkeletonTextStyles-8VJ-g"};
4
4
 
package/dist/TreeView/useRovingTabIndex.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useRovingTabIndex.d.ts","sourceRoot":"","sources":["../../src/TreeView/useRovingTabIndex.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,YAAY,GACb,EAAE;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;CACvC,QAwDA;AAID,wBAAgB,uBAAuB,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,GAAG,WAAW,GAAG,SAAS,CAyDjH;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAa/E;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,CAwB/G;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAGlF;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAI9E;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAI7E;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAqB5E"}
1
+ {"version":3,"file":"useRovingTabIndex.d.ts","sourceRoot":"","sources":["../../src/TreeView/useRovingTabIndex.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,wBAAgB,iBAAiB,CAAC,EAChC,YAAY,EACZ,YAAY,GACb,EAAE;IACD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;CACvC,QAwDA;AAID,wBAAgB,uBAAuB,CAAC,aAAa,EAAE,WAAW,EAAE,KAAK,EAAE,aAAa,GAAG,WAAW,GAAG,SAAS,CAyDjH;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,CAa/E;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,CAwB/G;AAED,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAGlF;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAI9E;AAED,wBAAgB,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAI7E;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,GAAG,SAAS,CAuB5E"}
package/dist/TreeView/useRovingTabIndex.js CHANGED
@@ -159,7 +159,8 @@ function getFirstElement(element) {
159
159
  }
160
160
  function getLastElement(element) {
161
161
  const root = element.closest('[role=tree]');
162
- const items = Array.from((root === null || root === void 0 ? void 0 : root.querySelectorAll('[role=treeitem]')) || []);
162
+ if (!root) return;
163
+ const items = Array.from(root.querySelectorAll('[role=treeitem]'));
163
164
 
164
165
  // If there are no items, return undefined
165
166
  if (items.length === 0) return;
package/dist/TreeView/useTreeItemCache.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import React from 'react';
2
+ /**
3
+ * A hook that caches tree items to avoid expensive querySelectorAll calls on every keypress.
4
+ * The cache is invalidated when the tree structure changes (via MutationObserver).
5
+ *
6
+ * PERFORMANCE: This is critical for INP because querySelectorAll('[role="treeitem"]')
7
+ * on large trees can take 10-50ms, which directly blocks user input response.
8
+ *
9
+ * Note: useRovingTabIndex also uses querySelectorAll for Home/End/PageUp/PageDown navigation,
10
+ * but those are infrequent single keypresses. Typeahead fires on every character typed,
11
+ * making it the priority optimization target.
12
+ */
13
+ export declare function useTreeItemCache(containerRef: React.RefObject<HTMLElement>): {
14
+ getTreeItems: () => HTMLElement[];
15
+ };
16
+ //# sourceMappingURL=useTreeItemCache.d.ts.map
package/dist/TreeView/useTreeItemCache.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTreeItemCache.d.ts","sourceRoot":"","sources":["../../src/TreeView/useTreeItemCache.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;wBAqC9B,WAAW,EAAE;EAezD"}
package/dist/TreeView/useTreeItemCache.js ADDED
@@ -0,0 +1,85 @@
1
+ import { c } from 'react-compiler-runtime';
2
+ import React from 'react';
3
+
4
+ /**
5
+ * A hook that caches tree items to avoid expensive querySelectorAll calls on every keypress.
6
+ * The cache is invalidated when the tree structure changes (via MutationObserver).
7
+ *
8
+ * PERFORMANCE: This is critical for INP because querySelectorAll('[role="treeitem"]')
9
+ * on large trees can take 10-50ms, which directly blocks user input response.
10
+ *
11
+ * Note: useRovingTabIndex also uses querySelectorAll for Home/End/PageUp/PageDown navigation,
12
+ * but those are infrequent single keypresses. Typeahead fires on every character typed,
13
+ * making it the priority optimization target.
14
+ */
15
+ function useTreeItemCache(containerRef) {
16
+ const $ = c(7);
17
+ const cacheRef = React.useRef(null);
18
+ let t0;
19
+ let t1;
20
+ if ($[0] !== containerRef) {
21
+ t0 = () => {
22
+ const container = containerRef.current;
23
+ if (!container) {
24
+ return;
25
+ }
26
+ const observer = new MutationObserver(mutations => {
27
+ const hasStructuralChange = mutations.some(_temp);
28
+ if (hasStructuralChange) {
29
+ cacheRef.current = null;
30
+ }
31
+ });
32
+ observer.observe(container, {
33
+ childList: true,
34
+ subtree: true,
35
+ attributes: true,
36
+ attributeFilter: ["role"]
37
+ });
38
+ cacheRef.current = null;
39
+ return () => observer.disconnect();
40
+ };
41
+ t1 = [containerRef];
42
+ $[0] = containerRef;
43
+ $[1] = t0;
44
+ $[2] = t1;
45
+ } else {
46
+ t0 = $[1];
47
+ t1 = $[2];
48
+ }
49
+ React.useEffect(t0, t1);
50
+ let t2;
51
+ if ($[3] !== containerRef) {
52
+ t2 = () => {
53
+ const container_0 = containerRef.current;
54
+ if (!container_0) {
55
+ return [];
56
+ }
57
+ if (cacheRef.current !== null) {
58
+ return cacheRef.current;
59
+ }
60
+ cacheRef.current = Array.from(container_0.querySelectorAll("[role=\"treeitem\"]"));
61
+ return cacheRef.current;
62
+ };
63
+ $[3] = containerRef;
64
+ $[4] = t2;
65
+ } else {
66
+ t2 = $[4];
67
+ }
68
+ const getTreeItems = t2;
69
+ let t3;
70
+ if ($[5] !== getTreeItems) {
71
+ t3 = {
72
+ getTreeItems
73
+ };
74
+ $[5] = getTreeItems;
75
+ $[6] = t3;
76
+ } else {
77
+ t3 = $[6];
78
+ }
79
+ return t3;
80
+ }
81
+ function _temp(mutation) {
82
+ return mutation.type === "childList" || mutation.type === "attributes" && mutation.attributeName === "role";
83
+ }
84
+
85
+ export { useTreeItemCache };
package/dist/TreeView/useTreeItemCache.test.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=useTreeItemCache.test.d.ts.map
package/dist/TreeView/useTreeItemCache.test.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useTreeItemCache.test.d.ts","sourceRoot":"","sources":["../../src/TreeView/useTreeItemCache.test.ts"],"names":[],"mappings":""}
package/dist/TreeView/useTypeahead.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useTypeahead.d.ts","sourceRoot":"","sources":["../../src/TreeView/useTypeahead.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,gBAAgB,GAAG;IACtB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAC,YAAY,EAAE,aAAa,EAAC,EAAE,gBAAgB,QA6E3E"}
1
+ {"version":3,"file":"useTypeahead.d.ts","sourceRoot":"","sources":["../../src/TreeView/useTypeahead.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,KAAK,gBAAgB,GAAG;IACtB,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAC,YAAY,EAAE,aAAa,EAAC,EAAE,gBAAgB,QA6E3E"}
package/dist/TreeView/useTypeahead.js CHANGED
@@ -2,9 +2,10 @@ import { c } from 'react-compiler-runtime';
2
2
  import React from 'react';
3
3
  import useSafeTimeout from '../hooks/useSafeTimeout.js';
4
4
  import { getAccessibleName } from './shared.js';
5
+ import { useTreeItemCache } from './useTreeItemCache.js';
5
6
 
6
7
  function useTypeahead(t0) {
7
- const $ = c(11);
8
+ const $ = c(12);
8
9
  const {
9
10
  containerRef,
10
11
  onFocusChange
@@ -16,6 +17,9 @@ function useTypeahead(t0) {
16
17
  safeSetTimeout,
17
18
  safeClearTimeout
18
19
  } = useSafeTimeout();
20
+ const {
21
+ getTreeItems
22
+ } = useTreeItemCache(containerRef);
19
23
  let t1;
20
24
  let t2;
21
25
  if ($[0] !== onFocusChange) {
@@ -32,7 +36,7 @@ function useTypeahead(t0) {
32
36
  }
33
37
  React.useEffect(t1, t2);
34
38
  let t3;
35
- if ($[3] !== containerRef) {
39
+ if ($[3] !== containerRef || $[4] !== getTreeItems) {
36
40
  t3 = searchValue_0 => {
37
41
  if (!searchValue_0) {
38
42
  return;
@@ -40,8 +44,7 @@ function useTypeahead(t0) {
40
44
  if (!containerRef.current) {
41
45
  return;
42
46
  }
43
- const container = containerRef.current;
44
- const elements = Array.from(container.querySelectorAll("[role=\"treeitem\"]"));
47
+ const elements = getTreeItems();
45
48
  const activeIndex = elements.findIndex(_temp);
46
49
  let sortedElements = wrapArray(elements, activeIndex);
47
50
  if (searchValue_0.length === 1) {
@@ -56,19 +59,20 @@ function useTypeahead(t0) {
56
59
  }
57
60
  };
58
61
  $[3] = containerRef;
59
- $[4] = t3;
62
+ $[4] = getTreeItems;
63
+ $[5] = t3;
60
64
  } else {
61
- t3 = $[4];
65
+ t3 = $[5];
62
66
  }
63
67
  const focusSearchValue = t3;
64
68
  let t4;
65
69
  let t5;
66
- if ($[5] !== containerRef || $[6] !== focusSearchValue || $[7] !== safeClearTimeout || $[8] !== safeSetTimeout) {
70
+ if ($[6] !== containerRef || $[7] !== focusSearchValue || $[8] !== safeClearTimeout || $[9] !== safeSetTimeout) {
67
71
  t4 = () => {
68
72
  if (!containerRef.current) {
69
73
  return;
70
74
  }
71
- const container_0 = containerRef.current;
75
+ const container = containerRef.current;
72
76
  const onKeyDown = function onKeyDown(event) {
73
77
  if (!event.key || event.key.length > 1 || event.key === " ") {
74
78
  return;
@@ -83,19 +87,19 @@ function useTypeahead(t0) {
83
87
  event.preventDefault();
84
88
  event.stopPropagation();
85
89
  };
86
- container_0.addEventListener("keydown", onKeyDown);
87
- return () => container_0.removeEventListener("keydown", onKeyDown);
90
+ container.addEventListener("keydown", onKeyDown);
91
+ return () => container.removeEventListener("keydown", onKeyDown);
88
92
  };
89
93
  t5 = [containerRef, focusSearchValue, safeClearTimeout, safeSetTimeout];
90
- $[5] = containerRef;
91
- $[6] = focusSearchValue;
92
- $[7] = safeClearTimeout;
93
- $[8] = safeSetTimeout;
94
- $[9] = t4;
95
- $[10] = t5;
94
+ $[6] = containerRef;
95
+ $[7] = focusSearchValue;
96
+ $[8] = safeClearTimeout;
97
+ $[9] = safeSetTimeout;
98
+ $[10] = t4;
99
+ $[11] = t5;
96
100
  } else {
97
- t4 = $[9];
98
- t5 = $[10];
101
+ t4 = $[10];
102
+ t5 = $[11];
99
103
  }
100
104
  React.useEffect(t4, t5);
101
105
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.6.2-rc.4eca5d85c",
4
+ "version": "38.6.2",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/dist/TreeView/TreeView-bdf34914.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/TreeView/TreeView.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SA+OF,CA9NE,0EACE,YAgBF,CAdE,kMAEE,kGAOF,CALE,8BAJF,kMAKI,+BAAgC,CAEhC,iBAEJ,CADE,CAGF,wGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAQvB,gDAAyC,CAFzC,oDAA6B,CAC7B,cAAe,CAJf,YAAa,CAEb,8CAAuC,CAKvC,wEAAyE,CADzE,6FAA8F,CAP9F,iBAAkB,CAElB,UAAW,CAQX,gEAAmE,CACnE,+DAwBF,CAtBE,8FACE,wGAMF,CAJE,8BAHF,8FAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBA3BF,mFA4BI,qBAAsB,CACtB,yBAWJ,CAVE,CAEA,4IAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,4IAKI,YAEJ,CADE,CAIJ,kHACE,+BACF,CAEA,uIACE,8GAwBF,CApBE,kJAaE,6DAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,kJAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,gDAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,wGACF,CAEA,mFAEE,4DAAqD,CADrD,yDAEF,CAEA,iFACE,YAAa,CAWb,oCAA+B,CAD/B,iBAAkB,CATlB,WAAY,CAQZ,+EAAkF,CAPlF,kCAA6B,CAM7B,mFAAsF,CAFtF,gFAMF,CAEA,qFACE,aAAc,CACd,OACF,CAEA,sHACE,eAAgB,CAChB,sBAAuB,CACvB,kBACF,CAEA,uHAEE,qBACF,CAEA,gFAOE,kBAAmB,CADnB,gDAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,gDAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,mGACE,aACF,CAGF,wFAEE,gDAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAQE,+DAAsC,CACtC,mDAA2C,CAP3C,WAAY,CADZ,UASF,CAQA,qBACE,mFACE,wBACF,CAEA,yLAEE,+DACF,CACF,CAEA,mFAEE,iGAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAMV,kBAAsB,CAEtB,cAAe,CADf,kBAEF,CAGF,uDAEE,kBAAmB,CACnB,gBAAkB,CAFlB,YAAa,CAGb,WAyBF,CAvBE,wBANF,uDAOI,cAsBJ,CArBE,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAEA,yEACE,6BACF,CAGF,+CACE,wCACF","file":"TreeView-bdf34914.css","sourcesContent":[".TreeViewRootUlStyles {\n padding: 0;\n margin: 0;\n list-style: none;\n\n /*\n * WARNING: This is a performance optimization.\n *\n * We define styles for the tree items at the root level of the tree\n * to avoid recomputing the styles for each item when the tree updates.\n * We're sacrificing maintainability for performance because TreeView\n * needs to be performant enough to handle large trees (thousands of items).\n *\n * This is intended to be a temporary solution until we can improve the\n * performance of our styling patterns.\n *\n * Do NOT copy this pattern without understanding the tradeoffs.\n */\n .TreeViewItem {\n outline: none;\n\n &:focus-visible > div,\n &:global(.focus-visible) > div {\n box-shadow: var(--boxShadow-thick) var(--fgColor-accent);\n\n @media (forced-colors: active) {\n outline: 2px solid HighlightText;\n /* stylelint-disable-next-line declaration-property-value-no-unknown */\n outline-offset: -2;\n }\n }\n\n &[data-has-leading-action] {\n --has-leading-action: 1;\n }\n }\n\n .TreeViewItemContainer {\n --level: 1;\n --toggle-width: 1rem;\n --min-item-height: 2rem;\n\n position: relative;\n display: grid;\n width: 100%;\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-default);\n cursor: pointer;\n border-radius: var(--borderRadius-medium);\n grid-template-columns: var(--spacer-width) var(--leading-action-width) var(--toggle-width) 1fr;\n grid-template-areas: 'spacer leadingAction toggle content trailingAction';\n\n --leading-action-width: calc(var(--has-leading-action, 0) * 1.5rem);\n --spacer-width: calc(calc(var(--level) - 1) * (var(--toggle-width) / 2));\n\n &:hover {\n background-color: var(--control-transparent-bgColor-hover);\n\n @media (forced-colors: active) {\n outline: 2px solid transparent;\n outline-offset: -2px;\n }\n }\n\n @media (pointer: coarse) {\n --toggle-width: 1.5rem;\n --min-item-height: 2.75rem;\n }\n\n &:has(.TreeViewItemSkeleton):hover {\n cursor: default;\n background-color: transparent;\n\n @media (forced-colors: active) {\n outline: none;\n }\n }\n }\n\n &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n grid-template-columns: 0 0 0 1fr;\n }\n\n .TreeViewItem[aria-current='true'] > .TreeViewItemContainer {\n background-color: var(--control-transparent-bgColor-selected);\n\n /* Current item indicator */\n /* stylelint-disable-next-line selector-max-specificity */\n &::after {\n position: absolute;\n top: calc(50% - var(--base-size-12));\n left: calc(-1 * var(--base-size-8));\n width: 0.25rem;\n height: 1.5rem;\n content: '';\n\n /*\n * Use fgColor accent for consistency across all themes. Using the \"correct\" variable,\n * --bgColor-accent-emphasis, causes vrt failures for dark high contrast mode\n */\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--fgColor-accent);\n border-radius: var(--borderRadius-medium);\n\n @media (forced-colors: active) {\n background-color: HighlightText;\n }\n }\n }\n\n .TreeViewItemToggle {\n display: flex;\n height: 100%;\n\n /* The toggle should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc(var(--min-item-height) / 2 - var(--base-size-12) / 2);\n color: var(--fgColor-muted);\n grid-area: toggle;\n justify-content: center;\n align-items: flex-start;\n }\n\n .TreeViewItemToggleHover:hover {\n background-color: var(--control-transparent-bgColor-hover);\n }\n\n .TreeViewItemToggleEnd {\n border-top-left-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n .TreeViewItemContent {\n display: flex;\n height: 100%;\n padding: 0 var(--base-size-8);\n\n /* The dynamic top and bottom padding to maintain the minimum item height for single line items */\n /* stylelint-disable-next-line primer/spacing */\n padding-top: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: calc((var(--min-item-height) - var(--custom-line-height, 1.3rem)) / 2);\n line-height: var(--custom-line-height, var(--text-body-lineHeight-medium, 1.4285));\n grid-area: content;\n gap: var(--stack-gap-condensed);\n }\n\n .TreeViewItemContentText {\n flex: 1 1 auto;\n width: 0;\n }\n\n &:where([data-truncate-text='true']) .TreeViewItemContentText {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &:where([data-truncate-text='false']) .TreeViewItemContentText {\n /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */\n word-break: break-word;\n }\n\n .TreeViewItemVisual {\n display: flex;\n\n /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap\n across more lines. */\n height: var(--custom-line-height, 1.3rem);\n color: var(--fgColor-muted);\n align-items: center;\n }\n\n .TreeViewItemLeadingAction {\n display: flex;\n color: var(--fgColor-muted);\n grid-area: leadingAction;\n\n & > button {\n flex-shrink: 1;\n }\n }\n\n .TreeViewItemTrailingAction {\n display: flex;\n color: var(--fgColor-muted);\n grid-area: trailingAction;\n }\n\n .TreeViewItemTrailingActionButton {\n flex-shrink: 1;\n }\n\n .TreeViewItemLevelLine {\n width: 100%;\n height: 100%;\n\n /*\n * On devices without hover, the nesting indicator lines\n * appear at all times.\n */\n border-color: var(--borderColor-muted);\n border-right: var(--borderWidth-thin) solid;\n }\n\n /*\n * On devices with :hover support, the nesting indicator lines\n * fade in when the user mouses over the entire component,\n * or when there's focus inside the component. This makes\n * sure the component remains simple when not in use.\n */\n @media (hover: hover) {\n .TreeViewItemLevelLine {\n border-color: transparent;\n }\n\n &:hover .TreeViewItemLevelLine,\n &:focus-within .TreeViewItemLevelLine {\n border-color: var(--borderColor-muted);\n }\n }\n\n .TreeViewDirectoryIcon {\n display: grid;\n color: var(--treeViewItem-leadingVisual-iconColor-rest);\n }\n\n .TreeViewVisuallyHidden {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n }\n}\n\n.TreeViewSkeletonItemContainerStyle {\n display: flex;\n align-items: center;\n column-gap: 0.5rem;\n height: 2rem;\n\n @media (pointer: coarse) {\n height: 2.75rem;\n }\n\n &:nth-of-type(5n + 1) {\n --tree-item-loading-width: 67%;\n }\n\n &:nth-of-type(5n + 2) {\n --tree-item-loading-width: 47%;\n }\n\n &:nth-of-type(5n + 3) {\n --tree-item-loading-width: 73%;\n }\n\n &:nth-of-type(5n + 4) {\n --tree-item-loading-width: 64%;\n }\n\n &:nth-of-type(5n + 5) {\n --tree-item-loading-width: 50%;\n }\n}\n\n.TreeItemSkeletonTextStyles {\n width: var(--tree-item-loading-width, 67%);\n}\n"]}