@primer/react 0.0.0-20260617202152 → 0.0.0-20260617213021

package/dist/TreeView/TreeView-1bf45a33.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/TreeView/TreeView.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SA8PF,CA7OE,0EAQE,YAAa,CADb,6CAgBF,CAbE,kMAEE,mFAMF,CAJE,8BAJF,kMAKI,+BAAgC,CAChC,mBAEJ,CADE,CAGF,wGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAcvB,gDAAyC,CAFzC,oCAA6B,CAC7B,cAAe,CAVf,YAAa,CAQb,8CAAuC,CAKvC,wEAAyE,CADzE,kGAAmG,CALnG,6CAAwC,CARxC,iBAAkB,CAElB,UAAW,CAcX,gEAAmE,CACnE,+DAeF,CAbE,8FACE,mEAMF,CAJE,8BAHF,8FAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBAjCF,mFAkCI,qBAAsB,CACtB,yBAEJ,CADE,CAGF,kHACE,oCACF,CAOA,gJAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,gJAKI,YAEJ,CADE,CAGF,uIACE,sEAwBF,CApBE,kJAaE,8CAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,kJAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,kCAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,mEACF,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,kCAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,kCAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,mGACE,aACF,CAGF,wFAEE,kCAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAGE,mDAA2C,CAW3C,sEAA8D,CAZ9D,WAAY,CADZ,UAcF,CAEA,qBApOF,yCAqOI,6BA0BJ,CAxBI,qGAEE,oDACF,CACF,CAEA,mFAEE,8DAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAOV,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-1bf45a33.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    /*\n     * `overflow-clip-margin` extends the paint clip edge by 8px so the current-item indicator\n     * (positioned at `left: -8px` of the row container) remains visible when a consumer applies\n     * `contain: paint` (or `contain: strict`, or `content-visibility: auto`) to this `<li>`. Has\n     * no effect when no paint containment is active, so default rendering is unchanged.\n     */\n    overflow-clip-margin: var(--base-size-8);\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        outline-offset: -2px;\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    /*\n     * Mirrors the `overflow-clip-margin` on `.TreeViewItem` so the indicator also stays\n     * visible when `containIntrinsicSize` is set on this row (which sets\n     * `content-visibility: auto` on this container and implies paint containment).\n     */\n    overflow-clip-margin: var(--base-size-8);\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 auto;\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  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr auto;\n  }\n\n  /*\n   * Suppress hover affordances on rows being used as skeleton loading placeholders.\n   * Marked positively via `data-loading` from `LoadingItem` so we avoid the broad\n   * invalidation cost of `:has(.TreeViewItemSkeleton)` across every row in large trees.\n   */\n  .TreeViewItem:where([data-loading]) > .TreeViewItemContainer:hover {\n    cursor: default;\n    background-color: transparent;\n\n    @media (forced-colors: active) {\n      outline: none;\n    }\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    border-right: var(--borderWidth-thin) solid;\n\n    /*\n     * `--tree-line-color` is set on the root `<ul>` and inherited down. On coarse pointers it\n     * stays unset and falls back to `muted` (lines always visible). On hover-capable devices it\n     * is initialized to `transparent` on the root and flipped to `muted` while the tree is\n     * hovered or focused, so the browser only has to propagate a single inherited custom\n     * property instead of re-matching `.TreeViewItemLevelLine` descendant selectors on every\n     * hover/focus change inside large trees.\n     */\n    /* stylelint-disable-next-line primer/colors -- private custom property, defaults to a Primer token */\n    border-color: var(--tree-line-color, var(--borderColor-muted));\n  }\n\n  @media (hover: hover) {\n    --tree-line-color: transparent;\n\n    &:hover,\n    &:focus-within {\n      --tree-line-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    /* stylelint-disable-next-line property-no-deprecated */\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"]}
+{"version":3,"sources":["../src/TreeView/TreeView.module.css.js"],"names":[],"mappings":"AAAA,yCAGE,eAAgB,CADhB,QAAS,CADT,SA8PF,CA7OE,0EAQE,YAAa,CADb,6CAgBF,CAbE,4FAEE,mFAMF,CARA,4FAEE,mFAMF,CAJE,8BAJF,4FAKI,+BAAgC,CAChC,mBAEJ,CARA,4FAKI,+BAAgC,CAChC,mBAEJ,CADE,CAGF,mGACE,sBACF,CAGF,mFACE,SAAU,CACV,mBAAoB,CACpB,sBAAuB,CAcvB,gDAAyC,CAFzC,oCAA6B,CAC7B,cAAe,CAVf,YAAa,CAQb,8CAAuC,CAKvC,wEAAyE,CADzE,kGAAmG,CALnG,6CAAwC,CARxC,iBAAkB,CAElB,UAAW,CAcX,gEAAmE,CACnE,+DAeF,CAbE,yFACE,mEAMF,CAJE,8BAHF,yFAII,6BAA8B,CAC9B,mBAEJ,CADE,CAGF,wBAjCF,mFAkCI,qBAAsB,CACtB,yBAEJ,CADE,CAGF,kHACE,oCACF,CAOA,gJAEE,4BAA6B,CAD7B,cAMF,CAHE,8BAJF,gJAKI,YAEJ,CADE,CAGF,uIACE,sEAwBF,CApBE,6IAaE,8CAAuC,CACvC,gDAAyC,CARzC,UAAW,CADX,aAAc,CAFd,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,YAeF,CAHE,8BAhBF,6IAiBI,8BAEJ,CADE,CAIJ,gFAWE,sBAAuB,CAHvB,kCAA2B,CAP3B,YAAa,CAQb,gBAAiB,CAPjB,WAAY,CAQZ,sBAAuB,CAHvB,yEAKF,CAEA,2FACE,mEACF,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,kCAA2B,CAL3B,YAAa,CAIb,uCAGF,CAEA,uFAEE,kCAA2B,CAD3B,YAAa,CAEb,uBAKF,CAHE,8FACE,aACF,CAGF,wFAEE,kCAA2B,CAD3B,YAAa,CAEb,wBACF,CAEA,8FACE,aACF,CAEA,mFAGE,mDAA2C,CAW3C,sEAA8D,CAZ9D,WAAY,CADZ,UAcF,CAEA,qBApOF,yCAqOI,6BA0BJ,CAxBI,qGAEE,oDACF,CACF,CAEA,mFAEE,8DAAuD,CADvD,YAEF,CAEA,oFAGE,UAAW,CAGX,WAAY,CACZ,eAAgB,CAHhB,SAAU,CAHV,iBAAkB,CAClB,SAAU,CAOV,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-1bf45a33.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    /*\n     * `overflow-clip-margin` extends the paint clip edge by 8px so the current-item indicator\n     * (positioned at `left: -8px` of the row container) remains visible when a consumer applies\n     * `contain: paint` (or `contain: strict`, or `content-visibility: auto`) to this `<li>`. Has\n     * no effect when no paint containment is active, so default rendering is unchanged.\n     */\n    overflow-clip-margin: var(--base-size-8);\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        outline-offset: -2px;\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    /*\n     * Mirrors the `overflow-clip-margin` on `.TreeViewItem` so the indicator also stays\n     * visible when `containIntrinsicSize` is set on this row (which sets\n     * `content-visibility: auto` on this container and implies paint containment).\n     */\n    overflow-clip-margin: var(--base-size-8);\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 auto;\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  &:where([data-omit-spacer='true']) .TreeViewItemContainer {\n    grid-template-columns: 0 0 0 1fr auto;\n  }\n\n  /*\n   * Suppress hover affordances on rows being used as skeleton loading placeholders.\n   * Marked positively via `data-loading` from `LoadingItem` so we avoid the broad\n   * invalidation cost of `:has(.TreeViewItemSkeleton)` across every row in large trees.\n   */\n  .TreeViewItem:where([data-loading]) > .TreeViewItemContainer:hover {\n    cursor: default;\n    background-color: transparent;\n\n    @media (forced-colors: active) {\n      outline: none;\n    }\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    border-right: var(--borderWidth-thin) solid;\n\n    /*\n     * `--tree-line-color` is set on the root `<ul>` and inherited down. On coarse pointers it\n     * stays unset and falls back to `muted` (lines always visible). On hover-capable devices it\n     * is initialized to `transparent` on the root and flipped to `muted` while the tree is\n     * hovered or focused, so the browser only has to propagate a single inherited custom\n     * property instead of re-matching `.TreeViewItemLevelLine` descendant selectors on every\n     * hover/focus change inside large trees.\n     */\n    /* stylelint-disable-next-line primer/colors -- private custom property, defaults to a Primer token */\n    border-color: var(--tree-line-color, var(--borderColor-muted));\n  }\n\n  @media (hover: hover) {\n    --tree-line-color: transparent;\n\n    &:hover,\n    &:focus-within {\n      --tree-line-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    /* stylelint-disable-next-line property-no-deprecated */\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.d.ts

@@ -1,6 +1,7 @@
 import { type Icon } from '@primer/octicons-react';
 import React from 'react';
 import type { FCWithSlotMarker } from '../utils/types';
+import { type DistributiveOmit } from '../utils/modern-polymorphic';
 export type TreeViewProps = {
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
@@ -17,7 +18,7 @@ export type TreeViewSecondaryActions = {
     count?: number | string;
     className?: string;
 };
-export type TreeViewItemProps = {
+type TreeViewItemBaseProps = {
     'aria-label'?: React.AriaAttributes['aria-label'];
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
     id: string;
@@ -31,6 +32,9 @@ export type TreeViewItemProps = {
     className?: string;
     secondaryActions?: TreeViewSecondaryActions[];
 };
+export type TreeViewItemProps<As extends React.ElementType = 'li'> = DistributiveOmit<React.ComponentPropsWithoutRef<React.ElementType extends As ? 'li' : As>, 'as' | 'onSelect'> & TreeViewItemBaseProps & {
+    as?: As;
+};
 export type SubTreeState = 'initial' | 'loading' | 'done' | 'error';
 export type TreeViewSubTreeProps = {
     children?: React.ReactNode;
@@ -62,7 +66,11 @@ export type TreeViewErrorDialogProps = {
     onDismiss?: () => void;
 };
 export declare const TreeView: React.FC<TreeViewProps> & {
-    Item: React.ForwardRefExoticComponent<TreeViewItemProps & React.RefAttributes<HTMLElement>>;
+    Item: (<As extends React.ElementType = "li">(props: DistributiveOmit<React.PropsWithoutRef<React.ComponentProps<React.ElementType<any, keyof React.JSX.IntrinsicElements> extends As ? "li" : As>>, "as" | "onSelect"> & TreeViewItemBaseProps & {
+        as?: As | undefined;
+    } & React.RefAttributes<unknown>) => React.ReactNode) & {
+        displayName: string;
+    };
     SubTree: FCWithSlotMarker<TreeViewSubTreeProps>;
     LeadingAction: React.FC<TreeViewVisualProps>;
     LeadingVisual: React.FC<TreeViewVisualProps>;
@@ -70,4 +78,5 @@ export declare const TreeView: React.FC<TreeViewProps> & {
     DirectoryIcon: () => React.JSX.Element;
     ErrorDialog: React.FC<TreeViewErrorDialogProps>;
 };
+export {};
 //# sourceMappingURL=TreeView.d.ts.map

package/dist/TreeView/TreeView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"TreeView.d.ts","sourceRoot":"","sources":["../../src/TreeView/TreeView.tsx"],"names":[],"mappings":"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"}

package/dist/TreeView/TreeView.js

@@ -17,6 +17,7 @@ import { ButtonComponent } from '../Button/Button.js';
 import { ActionList } from '../ActionList/index.js';
 import { usePlatform } from '../KeybindingHint/platform.js';
 import { isSlot } from '../utils/is-slot.js';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { getAccessibleKeybindingHintString } from '../KeybindingHint/utils.js';
 import { AriaStatus } from '../live-region/AriaStatus.js';
@@ -265,7 +266,17 @@ Root.displayName = 'TreeView';
 // ----------------------------------------------------------------------------
 // TreeView.Item
 
-const Item = /*#__PURE__*/React.forwardRef(({
+// We build this type manually (instead of using `PolymorphicProps`) so we can omit
+// `ref` and `onSelect` from the underlying element's props:
+// - `ref` is provided solely by `fixedForwardRef` (typed as `Ref<unknown>`), preserving
+//   backward compatibility with consumers that pass `Ref<HTMLElement>` rather than the
+//   intrinsic element's ref type (e.g. `Ref<HTMLLIElement>` for the default `<li>`).
+// - Our custom `onSelect` (typed against `HTMLElement`) replaces the native
+//   `ReactEventHandler<HTMLLIElement>` that would otherwise be intersected in
+//   and conflict with existing consumers.
+// `DistributiveOmit` keeps the omit distributing over `as` union types.
+
+const ItemImpl = fixedForwardRef(({
   id: itemId,
   containIntrinsicSize,
   current: isCurrentItem = false,
@@ -277,8 +288,19 @@ const Item = /*#__PURE__*/React.forwardRef(({
   className,
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
-  secondaryActions
+  secondaryActions,
+  as: Component,
+  ...restProps
 }, ref) => {
+  // When `as` is provided (and resolves to something other than the default
+  // `'li'`), we render the polymorphic element as the `role="treeitem"` and
+  // wrap it in an `<li role="none">` so the markup remains valid (a
+  // `<ul role="tree">` may only directly contain `<li>` elements). When `as`
+  // is omitted, or explicitly set to `'li'`, we render an `<li>` directly as
+  // the treeitem to preserve the historical DOM shape and ref typing for
+  // existing consumers and to avoid nesting `<li>` inside `<li>`.
+  const ItemElement = Component !== null && Component !== void 0 ? Component : 'li';
+  const isPolymorphic = Component !== undefined && Component !== 'li';
   const [slots, rest] = useSlots(children, {
     leadingAction: LeadingAction,
     leadingVisual: LeadingVisual,
@@ -320,9 +342,7 @@ const Item = /*#__PURE__*/React.forwardRef(({
   const platform = usePlatform();
 
   // Set the expanded state and cache it
-  const setIsExpandedWithCache = React.useCallback(
-  // eslint-disable-next-line react-hooks/preserve-manual-memoization
-  newIsExpanded => {
+  const setIsExpandedWithCache = React.useCallback(newIsExpanded => {
     var _expandedStateCache$c3;
     setIsExpanded(newIsExpanded);
     (_expandedStateCache$c3 = expandedStateCache.current) === null || _expandedStateCache$c3 === void 0 ? void 0 : _expandedStateCache$c3.set(itemId, newIsExpanded);
@@ -345,34 +365,34 @@ const Item = /*#__PURE__*/React.forwardRef(({
       action();
     }
   }, [secondaryActions]);
-  const handleKeyDown = React.useCallback(event_0 => {
-    switch (event_0.key) {
+  const handleKeyDown = React.useCallback(event => {
+    switch (event.key) {
       case 'Enter':
       case ' ':
         if (onSelect) {
-          onSelect(event_0);
+          onSelect(event);
         } else {
-          toggle(event_0);
+          toggle(event);
         }
-        event_0.stopPropagation();
+        event.stopPropagation();
         break;
       case 'ArrowRight':
         // Ignore if modifier keys are pressed
-        if (event_0.altKey || event_0.metaKey) return;
-        event_0.preventDefault();
-        event_0.stopPropagation();
+        if (event.altKey || event.metaKey) return;
+        event.preventDefault();
+        event.stopPropagation();
         setIsExpandedWithCache(true);
         break;
       case 'ArrowLeft':
         // Ignore if modifier keys are pressed
-        if (event_0.altKey || event_0.metaKey) return;
-        event_0.preventDefault();
-        event_0.stopPropagation();
+        if (event.altKey || event.metaKey) return;
+        event.preventDefault();
+        event.stopPropagation();
         setIsExpandedWithCache(false);
         break;
       case 'U':
       case 'u':
-        if (!(event_0.shiftKey && (event_0.metaKey || event_0.ctrlKey))) return;
+        if (!(event.shiftKey && (event.metaKey || event.ctrlKey))) return;
         activateActionsDialog();
         break;
     }
@@ -380,6 +400,106 @@ const Item = /*#__PURE__*/React.forwardRef(({
   const ariaDescribedByIds = [slots.leadingVisual ? leadingVisualId : null, slots.trailingVisual ? trailingVisualId : null].filter(Boolean);
   const shortcut = `Shift+${platform === 'apple' ? 'Meta' : 'Control'}+U`;
   const trailingActionShortcutText = `Press (${getAccessibleKeybindingHintString(shortcut, platform)}) for more actions.`;
+  const itemElement =
+  /*#__PURE__*/
+  // @ts-ignore TypeScript can't infer that the `ref` here is compatible
+  // with every possible polymorphic `ItemElement` (it's typed as
+  // `Ref<unknown>` by `fixedForwardRef`), so we cast at the boundary.
+  jsxs(ItemElement, {
+    ...restProps,
+    className: clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem),
+    ref: ref,
+    tabIndex: 0,
+    id: itemId,
+    role: "treeitem",
+    "aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined : ariaLabel,
+    "aria-labelledby": ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim(),
+    "aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined,
+    "aria-level": level,
+    "aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? undefined : isExpanded,
+    "aria-current": isCurrentItem ? 'true' : undefined,
+    "aria-selected": isFocused ? 'true' : 'false',
+    "data-has-leading-action": slots.leadingAction ? true : undefined,
+    "data-loading": isLoadingPlaceholder ? true : undefined,
+    onKeyDown: handleKeyDown,
+    onFocus: event => {
+      // Defer scroll to the next animation frame so that rapid keyboard
+      // navigation (held key) coalesces into a single reflow per frame
+      scrollElementIntoView(event.currentTarget.firstElementChild);
+
+      // Set the focused state
+      setIsFocused(true);
+
+      // Prevent focus event from bubbling up to parent items
+      event.stopPropagation();
+    },
+    onBlur: () => setIsFocused(false),
+    onClick: event => {
+      if (onSelect) {
+        onSelect(event);
+      } else {
+        toggle(event);
+      }
+      event.stopPropagation();
+    },
+    onAuxClick: event => {
+      if (onSelect && event.button === 1) {
+        onSelect(event);
+      }
+      event.stopPropagation();
+    },
+    children: [/*#__PURE__*/jsxs("div", {
+      className: clsx('PRIVATE_TreeView-item-container', classes.TreeViewItemContainer),
+      style: {
+        // @ts-ignore CSS custom property
+        '--level': level,
+        contentVisibility: containIntrinsicSize ? 'auto' : undefined,
+        containIntrinsicSize
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          gridArea: 'spacer',
+          display: 'flex'
+        },
+        children: /*#__PURE__*/jsx(LevelIndicatorLines, {
+          level: level
+        })
+      }), slots.leadingAction, hasSubTree ?
+      /*#__PURE__*/
+      // This lint rule is disabled due to the guidelines in the `TreeView` api docs.
+      // https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle
+      // This has specific advice that the chevron be available only to pointer event.
+      // If they take up a button role, they become unnecessary and numerous tab stops.
+      jsx("div", {
+        className: clsx('PRIVATE_TreeView-item-toggle', onSelect && 'PRIVATE_TreeView-item-toggle--hover', level === 1 && 'PRIVATE_TreeView-item-toggle--end', classes.TreeViewItemToggle, classes.TreeViewItemToggleHover, classes.TreeViewItemToggleEnd),
+        onClick: event => {
+          if (onSelect) {
+            toggle(event);
+          }
+        },
+        children: isExpanded ? /*#__PURE__*/jsx(ChevronDownIcon, {
+          size: TOGGLE_ICON_SIZE
+        }) : /*#__PURE__*/jsx(ChevronRightIcon, {
+          size: TOGGLE_ICON_SIZE
+        })
+      }) : null, /*#__PURE__*/jsxs("div", {
+        id: labelId,
+        className: clsx('PRIVATE_TreeView-item-content', classes.TreeViewItemContent),
+        children: [slots.leadingVisual, /*#__PURE__*/jsx("span", {
+          className: clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText),
+          children: childrenWithoutSubTree
+        }), slots.trailingVisual]
+      }), secondaryActions ? /*#__PURE__*/jsxs(Fragment, {
+        children: [/*#__PURE__*/jsx(TrailingAction, {
+          items: secondaryActions,
+          shortcutText: trailingActionShortcutText
+        }), actionCommandPressed ? /*#__PURE__*/jsx(ActionDialog, {
+          items: secondaryActions,
+          onClose: () => setActionCommandPressed(false)
+        }) : null]
+      }) : null]
+    }), subTree]
+  });
   return /*#__PURE__*/jsx(ItemContext.Provider, {
     value: {
       itemId,
@@ -392,102 +512,15 @@ const Item = /*#__PURE__*/React.forwardRef(({
       trailingVisualId,
       trailingActionId
     },
-    children: /*#__PURE__*/jsxs("li", {
-      className: clsx('PRIVATE_TreeView-item', className, classes.TreeViewItem),
-      ref: ref,
-      tabIndex: 0,
-      id: itemId,
-      role: "treeitem",
-      "aria-label": secondaryActions ? ariaLabel ? `${ariaLabel}. ${trailingActionShortcutText}` : undefined : ariaLabel,
-      "aria-labelledby": ariaLabel ? undefined : `${ariaLabelledby || labelId} ${secondaryActions ? trailingActionId : ''}`.trim(),
-      "aria-describedby": ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined,
-      "aria-level": level,
-      "aria-expanded": isSubTreeEmpty && (!isExpanded || !hasSubTree) || expanded === null ? undefined : isExpanded,
-      "aria-current": isCurrentItem ? 'true' : undefined,
-      "aria-selected": isFocused ? 'true' : 'false',
-      "data-has-leading-action": slots.leadingAction ? true : undefined,
-      "data-loading": isLoadingPlaceholder ? true : undefined,
-      onKeyDown: handleKeyDown,
-      onFocus: event_1 => {
-        // Defer scroll to the next animation frame so that rapid keyboard
-        // navigation (held key) coalesces into a single reflow per frame
-        scrollElementIntoView(event_1.currentTarget.firstElementChild);
-
-        // Set the focused state
-        setIsFocused(true);
-
-        // Prevent focus event from bubbling up to parent items
-        event_1.stopPropagation();
-      },
-      onBlur: () => setIsFocused(false),
-      onClick: event_2 => {
-        if (onSelect) {
-          onSelect(event_2);
-        } else {
-          toggle(event_2);
-        }
-        event_2.stopPropagation();
-      },
-      onAuxClick: event_3 => {
-        if (onSelect && event_3.button === 1) {
-          onSelect(event_3);
-        }
-        event_3.stopPropagation();
-      },
-      children: [/*#__PURE__*/jsxs("div", {
-        className: clsx('PRIVATE_TreeView-item-container', classes.TreeViewItemContainer),
-        style: {
-          // @ts-ignore CSS custom property
-          '--level': level,
-          contentVisibility: containIntrinsicSize ? 'auto' : undefined,
-          containIntrinsicSize
-        },
-        children: [/*#__PURE__*/jsx("div", {
-          style: {
-            gridArea: 'spacer',
-            display: 'flex'
-          },
-          children: /*#__PURE__*/jsx(LevelIndicatorLines, {
-            level: level
-          })
-        }), slots.leadingAction, hasSubTree ?
-        /*#__PURE__*/
-        // This lint rule is disabled due to the guidelines in the `TreeView` api docs.
-        // https://github.com/github/primer/blob/main/apis/tree-view-api.md#the-expandcollapse-chevron-toggle
-        // This has specific advice that the chevron be available only to pointer event.
-        // If they take up a button role, they become unnecessary and numerous tab stops.
-        jsx("div", {
-          className: clsx('PRIVATE_TreeView-item-toggle', onSelect && 'PRIVATE_TreeView-item-toggle--hover', level === 1 && 'PRIVATE_TreeView-item-toggle--end', classes.TreeViewItemToggle, classes.TreeViewItemToggleHover, classes.TreeViewItemToggleEnd),
-          onClick: event_4 => {
-            if (onSelect) {
-              toggle(event_4);
-            }
-          },
-          children: isExpanded ? /*#__PURE__*/jsx(ChevronDownIcon, {
-            size: TOGGLE_ICON_SIZE
-          }) : /*#__PURE__*/jsx(ChevronRightIcon, {
-            size: TOGGLE_ICON_SIZE
-          })
-        }) : null, /*#__PURE__*/jsxs("div", {
-          id: labelId,
-          className: clsx('PRIVATE_TreeView-item-content', classes.TreeViewItemContent),
-          children: [slots.leadingVisual, /*#__PURE__*/jsx("span", {
-            className: clsx('PRIVATE_TreeView-item-content-text', classes.TreeViewItemContentText),
-            children: childrenWithoutSubTree
-          }), slots.trailingVisual]
-        }), secondaryActions ? /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsx(TrailingAction, {
-            items: secondaryActions,
-            shortcutText: trailingActionShortcutText
-          }), actionCommandPressed ? /*#__PURE__*/jsx(ActionDialog, {
-            items: secondaryActions,
-            onClose: () => setActionCommandPressed(false)
-          }) : null]
-        }) : null]
-      }), subTree]
-    })
+    children: isPolymorphic ? /*#__PURE__*/jsx("li", {
+      role: "none",
+      children: itemElement
+    }) : itemElement
   });
 });
+const Item = Object.assign(ItemImpl, {
+  displayName: 'TreeView.Item'
+});
 
 /** Lines to indicate the depth of an item in a TreeView */
 const LevelIndicatorLines = t0 => {
@@ -520,7 +553,6 @@ const LevelIndicatorLines = t0 => {
   }
   return t2;
 };
-Item.displayName = 'TreeView.Item';
 
 // ----------------------------------------------------------------------------
 // TreeView.SubTree
@@ -755,118 +787,121 @@ const LoadingItem = /*#__PURE__*/React.forwardRef((t0, ref) => {
   } = t0;
   const itemId = useId();
   if (count) {
-    let t1;
+    const t1 = ref;
+    let t2;
     if ($[0] !== count) {
-      t1 = Array.from({
+      t2 = Array.from({
         length: count
       }).map(_temp3);
       $[0] = count;
-      $[1] = t1;
+      $[1] = t2;
     } else {
-      t1 = $[1];
+      t2 = $[1];
     }
-    let t2;
+    let t3;
     if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-      t2 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
-      $[2] = t2;
+      t3 = clsx("PRIVATE_VisuallyHidden", classes.TreeViewVisuallyHidden);
+      $[2] = t3;
     } else {
-      t2 = $[2];
+      t3 = $[2];
     }
-    let t3;
+    let t4;
     if ($[3] !== count) {
-      t3 = /*#__PURE__*/jsxs("div", {
-        className: t2,
+      t4 = /*#__PURE__*/jsxs("div", {
+        className: t3,
         children: ["Loading ", count, " items"]
       });
       $[3] = count;
-      $[4] = t3;
+      $[4] = t4;
     } else {
-      t3 = $[4];
+      t4 = $[4];
     }
-    let t4;
-    if ($[5] !== itemId || $[6] !== ref || $[7] !== t1 || $[8] !== t3) {
-      t4 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
+    let t5;
+    if ($[5] !== itemId || $[6] !== t1 || $[7] !== t2 || $[8] !== t4) {
+      t5 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
         value: true,
         children: /*#__PURE__*/jsxs(Item, {
           id: itemId,
-          ref: ref,
-          children: [t1, t3]
+          ref: t1,
+          children: [t2, t4]
         })
       });
       $[5] = itemId;
-      $[6] = ref;
-      $[7] = t1;
-      $[8] = t3;
-      $[9] = t4;
+      $[6] = t1;
+      $[7] = t2;
+      $[8] = t4;
+      $[9] = t5;
     } else {
-      t4 = $[9];
+      t5 = $[9];
     }
-    return t4;
+    return t5;
   }
-  let t1;
+  const t1 = ref;
   let t2;
+  let t3;
   if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = /*#__PURE__*/jsx(LeadingVisual, {
+    t2 = /*#__PURE__*/jsx(LeadingVisual, {
       children: /*#__PURE__*/jsx(Spinner, {
         size: "small"
       })
     });
-    t2 = /*#__PURE__*/jsx(Text, {
+    t3 = /*#__PURE__*/jsx(Text, {
       className: "fgColor-muted",
       children: "Loading..."
     });
-    $[10] = t1;
-    $[11] = t2;
+    $[10] = t2;
+    $[11] = t3;
   } else {
-    t1 = $[10];
-    t2 = $[11];
+    t2 = $[10];
+    t3 = $[11];
   }
-  let t3;
-  if ($[12] !== itemId || $[13] !== ref) {
-    t3 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
+  let t4;
+  if ($[12] !== itemId || $[13] !== t1) {
+    t4 = /*#__PURE__*/jsx(LoadingPlaceholderContext.Provider, {
       value: true,
       children: /*#__PURE__*/jsxs(Item, {
         id: itemId,
-        ref: ref,
-        children: [t1, t2]
+        ref: t1,
+        children: [t2, t3]
       })
     });
     $[12] = itemId;
-    $[13] = ref;
-    $[14] = t3;
+    $[13] = t1;
+    $[14] = t4;
   } else {
-    t3 = $[14];
+    t4 = $[14];
   }
-  return t3;
+  return t4;
 });
 const EmptyItem = /*#__PURE__*/React.forwardRef((props, ref) => {
   const $ = c(4);
   const t0 = useId();
-  let t1;
+  const t1 = ref;
+  let t2;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = /*#__PURE__*/jsx(Text, {
+    t2 = /*#__PURE__*/jsx(Text, {
       className: "fgColor-muted",
       children: "No items found"
     });
-    $[0] = t1;
+    $[0] = t2;
   } else {
-    t1 = $[0];
+    t2 = $[0];
   }
-  let t2;
-  if ($[1] !== ref || $[2] !== t0) {
-    t2 = /*#__PURE__*/jsx(Item, {
+  let t3;
+  if ($[1] !== t0 || $[2] !== t1) {
+    t3 = /*#__PURE__*/jsx(Item, {
       expanded: null,
       id: t0,
-      ref: ref,
-      children: t1
+      ref: t1,
+      children: t2
     });
-    $[1] = ref;
-    $[2] = t0;
-    $[3] = t2;
+    $[1] = t0;
+    $[2] = t1;
+    $[3] = t3;
   } else {
-    t2 = $[3];
+    t3 = $[3];
   }
-  return t2;
+  return t3;
 });
 function useSubTree(children) {
   const $ = c(8);

package/dist/deprecated/ActionList/Group.d.ts

@@ -25,5 +25,5 @@ export interface GroupProps extends React.ComponentPropsWithoutRef<'div'> {
 /**
  * Collects related `Items` in an `ActionList`.
  */
-export declare function Group({ header, items, ...props }: GroupProps): JSX.Element;
+export declare function Group({ header, items, groupId: _groupId, ...props }: GroupProps): JSX.Element;
 //# sourceMappingURL=Group.d.ts.map

package/dist/deprecated/ActionList/Group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AAGzC,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAA;AAE9B;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACvE;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAA;IAErB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAOxE"}
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../src/deprecated/ActionList/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,UAAU,CAAA;AAGzC,OAAO,KAAK,EAAC,GAAG,EAAC,MAAM,OAAO,CAAA;AAE9B;;GAEG;AACH,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC;IACvE;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAA;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC,OAAO,EAAE,CAAA;IAErB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,EAAC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAO3F"}

package/dist/deprecated/ActionList/Group.js

@@ -11,11 +11,15 @@ function Group(t0) {
   let items;
   let props;
   if ($[0] !== t0) {
-    ({
-      header,
-      items,
-      ...props
-    } = t0);
+    const {
+      header: t1,
+      items: t2,
+      groupId: _groupId,
+      ...t3
+    } = t0;
+    header = t1;
+    items = t2;
+    props = t3;
     $[0] = t0;
     $[1] = header;
     $[2] = items;