@primer/react 38.20.0 → 38.20.1-rc.8029e422e

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/react
 
+## 38.20.1
+
+### Patch Changes
+
+- [#7757](https://github.com/primer/react/pull/7757) [`ed82a1e`](https://github.com/primer/react/commit/ed82a1e0399b98428d4b794239bb37649806b5cc) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - SelectPanel: Lock body scroll when modal variant is on.
+
 ## 38.20.0
 
 ### Minor Changes

package/dist/SelectPanel/{SelectPanel-3ac7e8d0.css → SelectPanel-00796bf3.css}

@@ -1,2 +1,2 @@
-.prc-SelectPanel-Overlay-tEbxh{--max-height:0}.prc-SelectPanel-Wrapper-OD-e6{display:flex;flex-direction:column;height:inherit;max-height:inherit}.prc-SelectPanel-Header-p2DSz{align-items:flex-start;display:flex;justify-content:space-between;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:var(--base-size-8,.5rem)}.prc-SelectPanel-Header-p2DSz:where([data-variant=fullscreen]){flex-shrink:0;min-height:40px}.prc-SelectPanel-Title-4cax5{font-size:var(--text-body-size-medium,.875rem);margin-left:var(--base-size-8,.5rem)}.prc-SelectPanel-Wrapper-OD-e6[data-variant=modal] .prc-SelectPanel-Title-4cax5{margin-top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-Wrapper-OD-e6[data-variant=anchored] .prc-SelectPanel-Title-4cax5{margin-top:var(--base-size-8,.5rem)}}.prc-SelectPanel-Subtitle-5L2Fr{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel-Notice-zIRk9,.prc-SelectPanel-Subtitle-5L2Fr{margin-left:var(--base-size-8,.5rem)}.prc-SelectPanel-Notice-zIRk9{margin-right:var(--base-size-8,.5rem);margin-top:var(--base-size-4,.25rem)}.prc-SelectPanel-Notice-zIRk9 a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel-Notice-zIRk9:where([data-variant=info]){background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));color:var(--fgColor-accent,var(--color-accent-fg))}.prc-SelectPanel-Notice-zIRk9:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-attention,var(--color-attention-fg))}.prc-SelectPanel-Notice-zIRk9:where([data-variant=critical]){background-color:var(--bgColor-danger-muted,var(--color-danger-subtle));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-danger,var(--color-danger-fg))}.prc-SelectPanel-Footer-Rxa8K{border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,var(--color-border-default));display:flex;padding:var(--base-size-8,.5rem)}.prc-SelectPanel-FilteredActionList--VY7U{height:inherit;max-height:inherit}.prc-SelectPanel-Message-4RsG4{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;padding:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel-Message-4RsG4 a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel-MessageTitle-mTq0E{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel-MessageBody-zVnxH{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel-MessageIcon-gpYuP{color:var(--fgColor-attention,var(--color-attention-fg));margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel-MessageIcon-gpYuP:where([data-variant=error]){color:var(--fgColor-danger,var(--color-danger-fg))}.prc-SelectPanel-MessageAction-zx88f{margin-top:var(--base-size-8,.5rem)}.prc-SelectPanel-ResponsiveCloseButton-uA7Py{display:inline-grid}.prc-SelectPanel-ResponsiveFooter-qnA4v{align-items:center;display:none;justify-content:center;padding:var(--base-size-8,.5rem)}.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-display-footer=always]){display:flex}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-display-footer=only-small]){display:flex}}.prc-SelectPanel-ResponsiveFooter-qnA4v[data-stretch-secondary-action=never]{justify-content:space-between}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-stretch-secondary-action=only-big]){justify-content:space-between}}.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-stretch-save-button=only-small]){justify-content:space-between}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-stretch-save-button=only-small]){justify-content:center}}.prc-SelectPanel-SecondaryAction-AFlHt{align-items:stretch;display:flex;flex-grow:1;justify-content:center}.prc-SelectPanel-SecondaryAction-AFlHt[data-stretch-secondary-action=never]{align-items:flex-start;flex-grow:0}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-SecondaryAction-AFlHt:where([data-stretch-secondary-action=only-big]){align-items:flex-start;flex-grow:0}}.prc-SelectPanel-CancelSaveButtons-DvvZo{display:flex;gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.prc-SelectPanel-ResponsiveCancelSaveButtons-e8Csd{display:none}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveCancelSaveButtons-e8Csd{display:flex;gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}}.prc-SelectPanel-ResponsiveSaveButton-6If1k{display:none}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveSaveButton-6If1k{display:flex}}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveSaveButton-6If1k:where([data-stretch-save-button=only-small]){flex-grow:1}}.prc-SelectPanel-Backdrop-ukvA6{background-color:var(--overlay-backdrop-bgColor,var(--color-overlay-backdrop));inset:0;position:absolute}.prc-SelectPanel-TextInput--Qqkq{margin:var(--base-size-8,.5rem)}
-/*# sourceMappingURL=SelectPanel-3ac7e8d0.css.map */
+.prc-SelectPanel-Overlay-tEbxh{--max-height:0}.prc-SelectPanel-Wrapper-OD-e6{display:flex;flex-direction:column;height:inherit;max-height:inherit}.prc-SelectPanel-Header-p2DSz{align-items:flex-start;display:flex;justify-content:space-between;padding-left:var(--base-size-8,.5rem);padding-right:var(--base-size-8,.5rem);padding-top:var(--base-size-8,.5rem)}.prc-SelectPanel-Header-p2DSz:where([data-variant=fullscreen]){flex-shrink:0;min-height:40px}.prc-SelectPanel-Title-4cax5{font-size:var(--text-body-size-medium,.875rem);margin-left:var(--base-size-8,.5rem)}.prc-SelectPanel-Wrapper-OD-e6[data-variant=modal] .prc-SelectPanel-Title-4cax5{margin-top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-Wrapper-OD-e6[data-variant=anchored] .prc-SelectPanel-Title-4cax5{margin-top:var(--base-size-8,.5rem)}}.prc-SelectPanel-Subtitle-5L2Fr{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem)}.prc-SelectPanel-Notice-zIRk9,.prc-SelectPanel-Subtitle-5L2Fr{margin-left:var(--base-size-8,.5rem)}.prc-SelectPanel-Notice-zIRk9{margin-right:var(--base-size-8,.5rem);margin-top:var(--base-size-4,.25rem)}.prc-SelectPanel-Notice-zIRk9 a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel-Notice-zIRk9:where([data-variant=info]){background-color:var(--bgColor-accent-muted,var(--color-accent-subtle));border-color:var(--borderColor-accent-muted,var(--color-accent-muted));color:var(--fgColor-accent,var(--color-accent-fg))}.prc-SelectPanel-Notice-zIRk9:where([data-variant=warning]){background-color:var(--bgColor-attention-muted,var(--color-attention-subtle));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-attention,var(--color-attention-fg))}.prc-SelectPanel-Notice-zIRk9:where([data-variant=critical]){background-color:var(--bgColor-danger-muted,var(--color-danger-subtle));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-danger,var(--color-danger-fg))}.prc-SelectPanel-Footer-Rxa8K{border-top:var(--borderWidth-thin,.0625rem) solid;border-top-color:var(--borderColor-default,var(--color-border-default));display:flex;padding:var(--base-size-8,.5rem)}.prc-SelectPanel-FilteredActionList--VY7U{height:inherit;max-height:inherit}.prc-SelectPanel-Message-4RsG4{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--base-size-4,.25rem);height:100%;justify-content:center;padding:var(--base-size-24,1.5rem);text-align:center}.prc-SelectPanel-Message-4RsG4 a{color:inherit;-webkit-text-decoration:underline;text-decoration:underline}.prc-SelectPanel-MessageTitle-mTq0E{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.prc-SelectPanel-MessageBody-zVnxH{align-items:center;color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);gap:var(--stack-gap-condensed,.5rem)}.prc-SelectPanel-MessageIcon-gpYuP{color:var(--fgColor-attention,var(--color-attention-fg));margin-bottom:var(--base-size-8,.5rem)}.prc-SelectPanel-MessageIcon-gpYuP:where([data-variant=error]){color:var(--fgColor-danger,var(--color-danger-fg))}.prc-SelectPanel-MessageAction-zx88f{margin-top:var(--base-size-8,.5rem)}.prc-SelectPanel-ResponsiveCloseButton-uA7Py{display:inline-grid}.prc-SelectPanel-ResponsiveFooter-qnA4v{align-items:center;display:none;justify-content:center;padding:var(--base-size-8,.5rem)}.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-display-footer=always]){display:flex}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-display-footer=only-small]){display:flex}}.prc-SelectPanel-ResponsiveFooter-qnA4v[data-stretch-secondary-action=never]{justify-content:space-between}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-stretch-secondary-action=only-big]){justify-content:space-between}}.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-stretch-save-button=only-small]){justify-content:space-between}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveFooter-qnA4v:where([data-stretch-save-button=only-small]){justify-content:center}}.prc-SelectPanel-SecondaryAction-AFlHt{align-items:stretch;display:flex;flex-grow:1;justify-content:center}.prc-SelectPanel-SecondaryAction-AFlHt[data-stretch-secondary-action=never]{align-items:flex-start;flex-grow:0}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-SecondaryAction-AFlHt:where([data-stretch-secondary-action=only-big]){align-items:flex-start;flex-grow:0}}.prc-SelectPanel-CancelSaveButtons-DvvZo{display:flex;gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}.prc-SelectPanel-ResponsiveCancelSaveButtons-e8Csd{display:none}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveCancelSaveButtons-e8Csd{display:flex;gap:var(--stack-gap-condensed,.5rem);justify-content:flex-end}}.prc-SelectPanel-ResponsiveSaveButton-6If1k{display:none}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveSaveButton-6If1k{display:flex}}@media screen and (max-width:calc(48rem - 0.02px)){.prc-SelectPanel-ResponsiveSaveButton-6If1k:where([data-stretch-save-button=only-small]){flex-grow:1}}.prc-SelectPanel-Backdrop-ukvA6{background-color:var(--overlay-backdrop-bgColor,var(--color-overlay-backdrop));inset:0;position:fixed}.prc-SelectPanel-TextInput--Qqkq{margin:var(--base-size-8,.5rem)}
+/*# sourceMappingURL=SelectPanel-00796bf3.css.map */

package/dist/SelectPanel/SelectPanel-00796bf3.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SelectPanel/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,+BAEE,cACF,CAEA,+BACE,YAAa,CAGb,qBAAsB,CAFtB,cAAe,CACf,kBAEF,CAEA,8BAGE,sBAAuB,CAFvB,YAAa,CACb,6BAA8B,CAI9B,qCAAgC,CADhC,sCAAiC,CADjC,oCAQF,CAJE,+DAEE,aAAc,CADd,eAEF,CAGF,6BAEE,8CAAuC,CADvC,oCAEF,CAEA,gFACE,mCAEF,CASE,mDADF,mFAEI,mCAEJ,CADE,CAGF,gCAGE,gDAA2B,CAD3B,4CAEF,CAEA,8DALE,oCASF,CAJA,8BAEE,qCAAgC,CADhC,oCAGF,CAEA,gCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,yDAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,kDAGF,CAEA,4DAEE,6EAAgD,CAChD,4EAAgD,CAFhD,wDAGF,CAEA,6DAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,kDAGF,CAEA,8BAGE,iDAAyC,CACzC,uEAA4C,CAH5C,YAAa,CACb,gCAGF,CAEA,0CAGE,cAAe,CACf,kBACF,CAEA,+BAOE,kBAAmB,CANnB,YAAa,CAIb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAPvB,WAAY,CAIZ,sBAAuB,CAHvB,kCAA4B,CAC5B,iBAWF,CAJE,iCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,oCACE,8CAAuC,CACvC,gDACF,CAEA,mCAGE,kBAAmB,CADnB,gDAA2B,CAD3B,4CAAsC,CAGtC,oCACF,CAEA,mCAEE,wDAA+B,CAD/B,sCAMF,CAHE,+DACE,kDACF,CAGF,qCACE,mCACF,CAEA,6CACE,mBACF,CAEA,wCAEE,kBAAmB,CADnB,YAAa,CAGb,sBAAuB,CADvB,gCA8BF,CA3BE,4EACE,YACF,CAGE,mDADF,gFAEI,YAEJ,CADE,CAGF,6EACE,6BACF,CAGE,mDADF,wFAEI,6BAEJ,CADE,CAGF,qFACE,6BAKF,CAHE,mDAHF,qFAII,sBAEJ,CADE,CAIJ,uCAEE,mBAAoB,CACpB,YAAa,CAFb,WAAY,CAGZ,sBAaF,CAXE,4EAEE,sBAAuB,CADvB,WAEF,CAGE,mDADF,uFAGI,sBAAuB,CADvB,WAGJ,CADE,CAIJ,yCACE,YAAa,CACb,oCAA+B,CAC/B,wBACF,CAEA,mDACE,YAOF,CALE,mDAHF,mDAII,YAAa,CACb,oCAA+B,CAC/B,wBAEJ,CADE,CAGF,4CACE,YAWF,CATE,mDAHF,4CAII,YAQJ,CAPE,CAGE,mDADF,yFAEI,WAEJ,CADE,CAIJ,gCAGE,8EAAiD,CADjD,OAAQ,CADR,cAGF,CAEA,iCACE,+BACF","file":"SelectPanel-00796bf3.css","sourcesContent":[".Overlay {\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n}\n\n.Wrapper {\n  display: flex;\n  height: inherit;\n  max-height: inherit;\n  flex-direction: column;\n}\n\n.Header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-top: var(--base-size-8);\n  padding-right: var(--base-size-8);\n  padding-left: var(--base-size-8);\n\n  &:where([data-variant='fullscreen']) {\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n}\n\n.Title {\n  margin-left: var(--base-size-8);\n  font-size: var(--text-body-size-medium);\n}\n\n.Wrapper[data-variant='modal'] .Title {\n  margin-top: var(--base-size-8);\n  /* styling specific to the modal variant */\n}\n\n/*\n * Align SelectPanel header text with AnchoredOverlay close button\n * \n * Ensures the title properly aligns with the close button position\n * in anchor variant on narrow viewports.\n */\n.Wrapper[data-variant='anchored'] .Title {\n  @media screen and (--viewportRange-narrow) {\n    margin-top: var(--base-size-8);\n  }\n}\n\n.Subtitle {\n  margin-left: var(--base-size-8);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.Notice {\n  margin-top: var(--base-size-4);\n  margin-right: var(--base-size-8);\n  margin-left: var(--base-size-8);\n}\n\n.Notice a {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.Notice:where([data-variant='info']) {\n  color: var(--fgColor-accent);\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n}\n\n.Notice:where([data-variant='warning']) {\n  color: var(--fgColor-attention);\n  background-color: var(--bgColor-attention-muted);\n  border-color: var(--borderColor-attention-muted);\n}\n\n.Notice:where([data-variant='critical']) {\n  color: var(--fgColor-danger);\n  background-color: var(--bgColor-danger-muted);\n  border-color: var(--borderColor-danger-muted);\n}\n\n.Footer {\n  display: flex;\n  padding: var(--base-size-8);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n}\n\n.FilteredActionList {\n  /* inheriting height and maxHeight ensures that the FilteredActionList is never taller\n     than the Overlay (which would break scrolling the items) */\n  height: inherit;\n  max-height: inherit;\n}\n\n.Message {\n  display: flex;\n  height: 100%;\n  padding: var(--base-size-24);\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n  gap: var(--base-size-4);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.MessageBody {\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.MessageIcon {\n  margin-bottom: var(--base-size-8);\n  color: var(--fgColor-attention);\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n  }\n}\n\n.MessageAction {\n  margin-top: var(--base-size-8);\n}\n\n.ResponsiveCloseButton {\n  display: inline-grid;\n}\n\n.ResponsiveFooter {\n  display: none;\n  align-items: center;\n  padding: var(--base-size-8);\n  justify-content: center;\n\n  &:where([data-display-footer='always']) {\n    display: flex;\n  }\n\n  &:where([data-display-footer='only-small']) {\n    @media screen and (--viewportRange-narrow) {\n      display: flex;\n    }\n  }\n\n  &[data-stretch-secondary-action='never'] {\n    justify-content: space-between;\n  }\n\n  &:where([data-stretch-secondary-action='only-big']) {\n    @media screen and (--viewportRange-narrow) {\n      justify-content: space-between;\n    }\n  }\n\n  &:where([data-stretch-save-button='only-small']) {\n    justify-content: space-between;\n\n    @media screen and (--viewportRange-narrow) {\n      justify-content: center;\n    }\n  }\n}\n\n.SecondaryAction {\n  flex-grow: 1;\n  align-items: stretch;\n  display: flex;\n  justify-content: center;\n\n  &[data-stretch-secondary-action='never'] {\n    flex-grow: 0;\n    align-items: flex-start;\n  }\n\n  &:where([data-stretch-secondary-action='only-big']) {\n    @media screen and (--viewportRange-narrow) {\n      flex-grow: 0;\n      align-items: flex-start;\n    }\n  }\n}\n\n.CancelSaveButtons {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n  justify-content: flex-end;\n}\n\n.ResponsiveCancelSaveButtons {\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: flex;\n    gap: var(--stack-gap-condensed);\n    justify-content: flex-end;\n  }\n}\n\n.ResponsiveSaveButton {\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: flex;\n  }\n\n  &:where([data-stretch-save-button='only-small']) {\n    @media screen and (--viewportRange-narrow) {\n      flex-grow: 1;\n    }\n  }\n}\n\n.Backdrop {\n  position: fixed;\n  inset: 0;\n  background-color: var(--overlay-backdrop-bgColor);\n}\n\n.TextInput {\n  margin: var(--base-size-8);\n}\n"]}

package/dist/SelectPanel/SelectPanel.js

@@ -249,9 +249,9 @@ function Panel({
     }
   }, [items, itemsInViewSet, onSelectedChange, selected]);
 
-  // disable body scroll when the panel is open on narrow screens
+  // disable body scroll when the panel is open in modal mode or on narrow screens
   useEffect(() => {
-    if (open && isNarrowScreenSize && usingFullScreenOnNarrow) {
+    if (open && (variant === 'modal' || isNarrowScreenSize && usingFullScreenOnNarrow)) {
       const bodyOverflowStyle = document.body.style.overflow || '';
       // If the body is already set to overflow: hidden, it likely means
       // that there is already a modal open. In that case, we should bail
@@ -264,7 +264,7 @@ function Panel({
         document.body.style.overflow = bodyOverflowStyle;
       };
     }
-  }, [isNarrowScreenSize, open, usingFullScreenOnNarrow]);
+  }, [isNarrowScreenSize, open, usingFullScreenOnNarrow, variant]);
   useEffect(() => {
     if (open) {
       if (items.length === 0 && !(isLoading || loading)) {

package/dist/SelectPanel/SelectPanel.module.css.js

@@ -1,4 +1,4 @@
-import './SelectPanel-3ac7e8d0.css';
+import './SelectPanel-00796bf3.css';
 
 var classes = {"Overlay":"prc-SelectPanel-Overlay-tEbxh","Wrapper":"prc-SelectPanel-Wrapper-OD-e6","Header":"prc-SelectPanel-Header-p2DSz","Title":"prc-SelectPanel-Title-4cax5","Subtitle":"prc-SelectPanel-Subtitle-5L2Fr","Notice":"prc-SelectPanel-Notice-zIRk9","Footer":"prc-SelectPanel-Footer-Rxa8K","FilteredActionList":"prc-SelectPanel-FilteredActionList--VY7U","Message":"prc-SelectPanel-Message-4RsG4","MessageTitle":"prc-SelectPanel-MessageTitle-mTq0E","MessageBody":"prc-SelectPanel-MessageBody-zVnxH","MessageIcon":"prc-SelectPanel-MessageIcon-gpYuP","MessageAction":"prc-SelectPanel-MessageAction-zx88f","ResponsiveCloseButton":"prc-SelectPanel-ResponsiveCloseButton-uA7Py","ResponsiveFooter":"prc-SelectPanel-ResponsiveFooter-qnA4v","SecondaryAction":"prc-SelectPanel-SecondaryAction-AFlHt","CancelSaveButtons":"prc-SelectPanel-CancelSaveButtons-DvvZo","ResponsiveCancelSaveButtons":"prc-SelectPanel-ResponsiveCancelSaveButtons-e8Csd","ResponsiveSaveButton":"prc-SelectPanel-ResponsiveSaveButton-6If1k","Backdrop":"prc-SelectPanel-Backdrop-ukvA6","TextInput":"prc-SelectPanel-TextInput--Qqkq"};
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.20.0",
+  "version": "38.20.1-rc.8029e422e",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/dist/SelectPanel/SelectPanel-3ac7e8d0.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/SelectPanel/SelectPanel.module.css.js"],"names":[],"mappings":"AAAA,+BAEE,cACF,CAEA,+BACE,YAAa,CAGb,qBAAsB,CAFtB,cAAe,CACf,kBAEF,CAEA,8BAGE,sBAAuB,CAFvB,YAAa,CACb,6BAA8B,CAI9B,qCAAgC,CADhC,sCAAiC,CADjC,oCAQF,CAJE,+DAEE,aAAc,CADd,eAEF,CAGF,6BAEE,8CAAuC,CADvC,oCAEF,CAEA,gFACE,mCAEF,CASE,mDADF,mFAEI,mCAEJ,CADE,CAGF,gCAGE,gDAA2B,CAD3B,4CAEF,CAEA,8DALE,oCASF,CAJA,8BAEE,qCAAgC,CADhC,oCAGF,CAEA,gCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAEA,yDAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,kDAGF,CAEA,4DAEE,6EAAgD,CAChD,4EAAgD,CAFhD,wDAGF,CAEA,6DAEE,uEAA6C,CAC7C,sEAA6C,CAF7C,kDAGF,CAEA,8BAGE,iDAAyC,CACzC,uEAA4C,CAH5C,YAAa,CACb,gCAGF,CAEA,0CAGE,cAAe,CACf,kBACF,CAEA,+BAOE,kBAAmB,CANnB,YAAa,CAIb,qBAAsB,CAGtB,WAAY,CACZ,6BAAuB,CAPvB,WAAY,CAIZ,sBAAuB,CAHvB,kCAA4B,CAC5B,iBAWF,CAJE,iCACE,aAAc,CACd,iCAA0B,CAA1B,yBACF,CAGF,oCACE,8CAAuC,CACvC,gDACF,CAEA,mCAGE,kBAAmB,CADnB,gDAA2B,CAD3B,4CAAsC,CAGtC,oCACF,CAEA,mCAEE,wDAA+B,CAD/B,sCAMF,CAHE,+DACE,kDACF,CAGF,qCACE,mCACF,CAEA,6CACE,mBACF,CAEA,wCAEE,kBAAmB,CADnB,YAAa,CAGb,sBAAuB,CADvB,gCA8BF,CA3BE,4EACE,YACF,CAGE,mDADF,gFAEI,YAEJ,CADE,CAGF,6EACE,6BACF,CAGE,mDADF,wFAEI,6BAEJ,CADE,CAGF,qFACE,6BAKF,CAHE,mDAHF,qFAII,sBAEJ,CADE,CAIJ,uCAEE,mBAAoB,CACpB,YAAa,CAFb,WAAY,CAGZ,sBAaF,CAXE,4EAEE,sBAAuB,CADvB,WAEF,CAGE,mDADF,uFAGI,sBAAuB,CADvB,WAGJ,CADE,CAIJ,yCACE,YAAa,CACb,oCAA+B,CAC/B,wBACF,CAEA,mDACE,YAOF,CALE,mDAHF,mDAII,YAAa,CACb,oCAA+B,CAC/B,wBAEJ,CADE,CAGF,4CACE,YAWF,CATE,mDAHF,4CAII,YAQJ,CAPE,CAGE,mDADF,yFAEI,WAEJ,CADE,CAIJ,gCAGE,8EAAiD,CADjD,OAAQ,CADR,iBAGF,CAEA,iCACE,+BACF","file":"SelectPanel-3ac7e8d0.css","sourcesContent":[".Overlay {\n  /* CSS variables values are passed in via styles */\n  --max-height: 0;\n}\n\n.Wrapper {\n  display: flex;\n  height: inherit;\n  max-height: inherit;\n  flex-direction: column;\n}\n\n.Header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding-top: var(--base-size-8);\n  padding-right: var(--base-size-8);\n  padding-left: var(--base-size-8);\n\n  &:where([data-variant='fullscreen']) {\n    min-height: 40px;\n    flex-shrink: 0;\n  }\n}\n\n.Title {\n  margin-left: var(--base-size-8);\n  font-size: var(--text-body-size-medium);\n}\n\n.Wrapper[data-variant='modal'] .Title {\n  margin-top: var(--base-size-8);\n  /* styling specific to the modal variant */\n}\n\n/*\n * Align SelectPanel header text with AnchoredOverlay close button\n * \n * Ensures the title properly aligns with the close button position\n * in anchor variant on narrow viewports.\n */\n.Wrapper[data-variant='anchored'] .Title {\n  @media screen and (--viewportRange-narrow) {\n    margin-top: var(--base-size-8);\n  }\n}\n\n.Subtitle {\n  margin-left: var(--base-size-8);\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n}\n\n.Notice {\n  margin-top: var(--base-size-4);\n  margin-right: var(--base-size-8);\n  margin-left: var(--base-size-8);\n}\n\n.Notice a {\n  color: inherit;\n  text-decoration: underline;\n}\n\n.Notice:where([data-variant='info']) {\n  color: var(--fgColor-accent);\n  background-color: var(--bgColor-accent-muted);\n  border-color: var(--borderColor-accent-muted);\n}\n\n.Notice:where([data-variant='warning']) {\n  color: var(--fgColor-attention);\n  background-color: var(--bgColor-attention-muted);\n  border-color: var(--borderColor-attention-muted);\n}\n\n.Notice:where([data-variant='critical']) {\n  color: var(--fgColor-danger);\n  background-color: var(--bgColor-danger-muted);\n  border-color: var(--borderColor-danger-muted);\n}\n\n.Footer {\n  display: flex;\n  padding: var(--base-size-8);\n  border-top: var(--borderWidth-thin) solid;\n  border-top-color: var(--borderColor-default);\n}\n\n.FilteredActionList {\n  /* inheriting height and maxHeight ensures that the FilteredActionList is never taller\n     than the Overlay (which would break scrolling the items) */\n  height: inherit;\n  max-height: inherit;\n}\n\n.Message {\n  display: flex;\n  height: 100%;\n  padding: var(--base-size-24);\n  text-align: center;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  flex-grow: 1;\n  gap: var(--base-size-4);\n\n  a {\n    color: inherit;\n    text-decoration: underline;\n  }\n}\n\n.MessageTitle {\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n}\n\n.MessageBody {\n  font-size: var(--text-body-size-small);\n  color: var(--fgColor-muted);\n  align-items: center;\n  gap: var(--stack-gap-condensed);\n}\n\n.MessageIcon {\n  margin-bottom: var(--base-size-8);\n  color: var(--fgColor-attention);\n\n  &:where([data-variant='error']) {\n    color: var(--fgColor-danger);\n  }\n}\n\n.MessageAction {\n  margin-top: var(--base-size-8);\n}\n\n.ResponsiveCloseButton {\n  display: inline-grid;\n}\n\n.ResponsiveFooter {\n  display: none;\n  align-items: center;\n  padding: var(--base-size-8);\n  justify-content: center;\n\n  &:where([data-display-footer='always']) {\n    display: flex;\n  }\n\n  &:where([data-display-footer='only-small']) {\n    @media screen and (--viewportRange-narrow) {\n      display: flex;\n    }\n  }\n\n  &[data-stretch-secondary-action='never'] {\n    justify-content: space-between;\n  }\n\n  &:where([data-stretch-secondary-action='only-big']) {\n    @media screen and (--viewportRange-narrow) {\n      justify-content: space-between;\n    }\n  }\n\n  &:where([data-stretch-save-button='only-small']) {\n    justify-content: space-between;\n\n    @media screen and (--viewportRange-narrow) {\n      justify-content: center;\n    }\n  }\n}\n\n.SecondaryAction {\n  flex-grow: 1;\n  align-items: stretch;\n  display: flex;\n  justify-content: center;\n\n  &[data-stretch-secondary-action='never'] {\n    flex-grow: 0;\n    align-items: flex-start;\n  }\n\n  &:where([data-stretch-secondary-action='only-big']) {\n    @media screen and (--viewportRange-narrow) {\n      flex-grow: 0;\n      align-items: flex-start;\n    }\n  }\n}\n\n.CancelSaveButtons {\n  display: flex;\n  gap: var(--stack-gap-condensed);\n  justify-content: flex-end;\n}\n\n.ResponsiveCancelSaveButtons {\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: flex;\n    gap: var(--stack-gap-condensed);\n    justify-content: flex-end;\n  }\n}\n\n.ResponsiveSaveButton {\n  display: none;\n\n  @media screen and (--viewportRange-narrow) {\n    display: flex;\n  }\n\n  &:where([data-stretch-save-button='only-small']) {\n    @media screen and (--viewportRange-narrow) {\n      flex-grow: 1;\n    }\n  }\n}\n\n.Backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: var(--overlay-backdrop-bgColor);\n}\n\n.TextInput {\n  margin: var(--base-size-8);\n}\n"]}