@primer/react 0.0.0-20260324024719 → 0.0.0-20260324024849

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @primer/react
 
-## 0.0.0-20260324024719
+## 0.0.0-20260324024849
 
 ### Minor Changes
 
@@ -15,6 +15,8 @@
 
 ### Patch Changes
 
+- [#7696](https://github.com/primer/react/pull/7696) [`40d7163`](https://github.com/primer/react/commit/40d7163ea42ee239582f0a08586320c72c07e57f) Thanks [@francinelucca](https://github.com/francinelucca)! - Fix item dividers not visible in SelectPanel and FilteredActionList when `showItemDividers` is enabled, caused by `content-visibility: auto` clipping the absolutely-positioned divider pseudo-elements.
+
 - Fake entry to force publishing
 
 - [#7510](https://github.com/primer/react/pull/7510) [`8fa988b`](https://github.com/primer/react/commit/8fa988ba613117874657af722ef6de768b0e0eb8) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu under feature flag

package/dist/FilteredActionList/FilteredActionList-6808e67a.css

@@ -0,0 +1,2 @@
+.prc-FilteredActionList-Root-QgIk1{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Header-y6ihu{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));z-index:1}.prc-FilteredActionList-Container-647gF{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-Container-647gF .prc-FilteredActionList-ActionListItem-RSinr:not(:focus,[data-is-active-descendant],[data-active],[data-input-focused]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-FilteredActionList-Container-647gF [data-dividers=true] .prc-FilteredActionList-ActionListItem-RSinr{content-visibility:visible}.prc-FilteredActionList-ActionList-3-Bxb{flex-grow:1}.prc-FilteredActionList-ActionListItem-RSinr:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-CJvWO{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-X2ij0{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-Axs5l{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-Bi-PZ{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
+/*# sourceMappingURL=FilteredActionList-6808e67a.css.map */

package/dist/FilteredActionList/FilteredActionList-6808e67a.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css.js","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,qCAEE,yEAA8C,CAC9C,SACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAiBF,CAXE,gKAEE,gCAAiC,CADjC,uBAEF,CAKA,0GACE,0BACF,CAGF,yCACE,WACF,CAEA,mDACE,wGAKF,CAHE,yDCjCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDuCA,CAGF,mGACE,wGAKF,CAHE,yGCzCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BD+CA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-6808e67a.css","sourcesContent":[".Root {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.Header {\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 1px 0 var(--borderColor-default);\n  z-index: 1;\n}\n\n.Container {\n  display: flex;\n  height: 100%;\n  overflow: auto;\n  flex-grow: 1;\n\n  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n  & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n\n  /* When showDividers is enabled, divider ::before pseudo-elements on ActionListSubContent are\n     positioned outside the item bounds (top: -7px). content-visibility: auto applies paint containment\n     which clips these, so we must disable it for items in lists with dividers. */\n  & [data-dividers='true'] .ActionListItem {\n    content-visibility: visible;\n  }\n}\n\n.ActionList {\n  flex-grow: 1;\n}\n\n.ActionListItem:focus {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.FullScreenTextInput {\n  @media screen and (--viewportRange-narrow) {\n    /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n    @supports (-webkit-touch-callout: none) {\n      font-size: var(--text-title-size-small);\n    }\n  }\n}\n\n.SelectAllContainer {\n  display: flex;\n  align-items: center;\n  padding-block: var(--base-size-4);\n  padding-inline: var(--base-size-16);\n  background: var(--bgColor-muted);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n  /* -1px hack to offset 1px border-bottom causing uneven alignment */\n  /* stylelint-disable-next-line primer/spacing */\n  margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n  position: absolute;\n  top: var(--base-size-4);\n  left: calc(-1 * var(--base-size-8));\n  width: var(--base-size-4);\n  height: calc(100% - var(--base-size-8));\n  content: '';\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}

package/dist/FilteredActionList/FilteredActionList.module.css.js

@@ -1,4 +1,4 @@
-import './FilteredActionList-02db90c6.css';
+import './FilteredActionList-6808e67a.css';
 
 var classes = {"Root":"prc-FilteredActionList-Root-QgIk1","Header":"prc-FilteredActionList-Header-y6ihu","Container":"prc-FilteredActionList-Container-647gF","ActionListItem":"prc-FilteredActionList-ActionListItem-RSinr","ActionList":"prc-FilteredActionList-ActionList-3-Bxb","FullScreenTextInput":"prc-FilteredActionList-FullScreenTextInput-CJvWO","SelectAllContainer":"prc-FilteredActionList-SelectAllContainer-X2ij0","SelectAllCheckbox":"prc-FilteredActionList-SelectAllCheckbox-Axs5l","SelectAllLabel":"prc-FilteredActionList-SelectAllLabel-Bi-PZ"};
 

package/package.json

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

package/dist/FilteredActionList/FilteredActionList-02db90c6.css

@@ -1,2 +0,0 @@
-.prc-FilteredActionList-Root-QgIk1{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Header-y6ihu{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));z-index:1}.prc-FilteredActionList-Container-647gF{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-Container-647gF .prc-FilteredActionList-ActionListItem-RSinr:not(:focus,[data-is-active-descendant],[data-active],[data-input-focused]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-FilteredActionList-ActionList-3-Bxb{flex-grow:1}.prc-FilteredActionList-ActionListItem-RSinr:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-CJvWO{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-X2ij0{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-Axs5l{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-Bi-PZ{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
-/*# sourceMappingURL=FilteredActionList-02db90c6.css.map */

package/dist/FilteredActionList/FilteredActionList-02db90c6.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css.js","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,qCAEE,yEAA8C,CAC9C,SACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAUF,CAJE,gKAEE,gCAAiC,CADjC,uBAEF,CAGF,yCACE,WACF,CAEA,mDACE,wGAKF,CAHE,yDC1BA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDgCA,CAGF,mGACE,wGAKF,CAHE,yGClCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDwCA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-02db90c6.css","sourcesContent":[".Root {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.Header {\n  /* stylelint-disable-next-line primer/box-shadow */\n  box-shadow: 0 1px 0 var(--borderColor-default);\n  z-index: 1;\n}\n\n.Container {\n  display: flex;\n  height: 100%;\n  overflow: auto;\n  flex-grow: 1;\n\n  /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n     Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n     which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n  & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {\n    content-visibility: auto;\n    contain-intrinsic-size: auto 32px;\n  }\n}\n\n.ActionList {\n  flex-grow: 1;\n}\n\n.ActionListItem:focus {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.FullScreenTextInput {\n  @media screen and (--viewportRange-narrow) {\n    /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n    @supports (-webkit-touch-callout: none) {\n      font-size: var(--text-title-size-small);\n    }\n  }\n}\n\n.SelectAllContainer {\n  display: flex;\n  align-items: center;\n  padding-block: var(--base-size-4);\n  padding-inline: var(--base-size-16);\n  background: var(--bgColor-muted);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n  /* -1px hack to offset 1px border-bottom causing uneven alignment */\n  /* stylelint-disable-next-line primer/spacing */\n  margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n  position: absolute;\n  top: var(--base-size-4);\n  left: calc(-1 * var(--base-size-8));\n  width: var(--base-size-4);\n  height: calc(100% - var(--base-size-8));\n  content: '';\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}