@primer/react 38.24.0 → 38.25.0-rc.7f5e08f50
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.
- package/CHANGELOG.md +12 -0
- package/dist/AnchoredOverlay/AnchoredOverlay-d483d670.css +2 -0
- package/dist/AnchoredOverlay/AnchoredOverlay-d483d670.css.map +1 -0
- package/dist/AnchoredOverlay/AnchoredOverlay.module.css.js +1 -1
- package/dist/Card/{Card-cec366f8.css → Card-d8a02dd9.css} +2 -2
- package/dist/Card/{Card-cec366f8.css.map → Card-d8a02dd9.css.map} +1 -1
- package/dist/Card/Card.d.ts +75 -39
- package/dist/Card/Card.d.ts.map +1 -1
- package/dist/Card/Card.js +260 -160
- package/dist/Card/Card.module.css.js +2 -2
- package/dist/Card/index.d.ts +16 -16
- package/dist/Card/index.d.ts.map +1 -1
- package/dist/Card/index.js +2 -2
- package/dist/Overlay/{Overlay-95cfd3c7.css → Overlay-214d10dd.css} +2 -2
- package/dist/Overlay/Overlay-214d10dd.css.map +1 -0
- package/dist/Overlay/Overlay.module.css.js +1 -1
- package/dist/experimental/index.d.ts +1 -1
- package/dist/experimental/index.d.ts.map +1 -1
- package/dist/hooks/useMergedRefs.d.ts +1 -1
- package/dist/hooks/useMergedRefs.d.ts.map +1 -1
- package/dist/hooks/useMergedRefs.js +13 -0
- package/dist/utils/environment.d.ts +4 -1
- package/dist/utils/environment.d.ts.map +1 -1
- package/dist/utils/environment.js +17 -2
- package/generated/components.json +57 -8
- package/package.json +2 -2
- package/dist/AnchoredOverlay/AnchoredOverlay-ec9e15fc.css +0 -2
- package/dist/AnchoredOverlay/AnchoredOverlay-ec9e15fc.css.map +0 -1
- package/dist/Overlay/Overlay-95cfd3c7.css.map +0 -1
package/dist/Card/index.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { CardImpl, CardMetadata,
|
|
1
|
+
import { CardImpl, CardMetadata, CardAction, CardDescription, CardHeading, CardImage, CardIcon } from './Card.js';
|
|
2
2
|
|
|
3
3
|
const Card = Object.assign(CardImpl, {
|
|
4
4
|
Icon: CardIcon,
|
|
5
5
|
Image: CardImage,
|
|
6
6
|
Heading: CardHeading,
|
|
7
7
|
Description: CardDescription,
|
|
8
|
-
|
|
8
|
+
Action: CardAction,
|
|
9
9
|
Metadata: CardMetadata
|
|
10
10
|
});
|
|
11
11
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@keyframes prc-Overlay-overlay-appear-JpFey{0%{opacity:0}to{opacity:1}}.prc-Overlay-Overlay-jfs-T{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);height:auto;max-height:100vh;max-width:calc(100vw - 2rem);min-width:192px;overflow:auto;position:absolute;width:auto}.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal]),.prc-Overlay-Overlay-jfs-T[data-anchor-position=false]{bottom:var(--bottom,auto);right:var(--right,auto)}@media screen and (max-width:calc(48rem - 0.02px)){[data-responsive=fullscreen]:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:0;top:0}}:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:var(--left,auto);top:var(--top,auto)}.prc-Overlay-Overlay-jfs-T:focus{outline:none}@media (forced-colors:active){.prc-Overlay-Overlay-jfs-T{outline:1px solid transparent}}.prc-Overlay-Overlay-jfs-T:where([data-reflow-container=true]){max-width:calc(100vw - 2rem)}.prc-Overlay-Overlay-jfs-T:where([data-overflow-auto]){overflow:auto}.prc-Overlay-Overlay-jfs-T:where([data-overflow-hidden]){overflow:hidden}.prc-Overlay-Overlay-jfs-T:where([data-overflow-scroll]){overflow:scroll}.prc-Overlay-Overlay-jfs-T:where([data-overflow-visible]){overflow:visible}.prc-Overlay-Overlay-jfs-T:where([data-height-xsmall]){height:192px}.prc-Overlay-Overlay-jfs-T:where([data-height-small]){height:256px}.prc-Overlay-Overlay-jfs-T:where([data-height-medium]){height:320px}.prc-Overlay-Overlay-jfs-T:where([data-height-large]){height:432px}.prc-Overlay-Overlay-jfs-T:where([data-height-xlarge]){height:600px}.prc-Overlay-Overlay-jfs-T:where([data-height-auto]),.prc-Overlay-Overlay-jfs-T:where([data-height-initial]){height:auto}.prc-Overlay-Overlay-jfs-T:where([data-height-fit-content]){height:-moz-fit-content;height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xsmall]){max-height:min(192px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-xsmall]){max-height:min(192px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-small]){max-height:min(256px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-small]){max-height:min(256px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-medium]){max-height:min(320px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-medium]){max-height:min(320px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-large]){max-height:min(432px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-large]){max-height:min(432px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xlarge]){max-height:min(600px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-xlarge]){max-height:min(600px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-width-small]){width:256px}.prc-Overlay-Overlay-jfs-T:where([data-width-medium]){width:320px}.prc-Overlay-Overlay-jfs-T:where([data-width-large]){width:480px}.prc-Overlay-Overlay-jfs-T:where([data-width-xlarge]){width:640px}.prc-Overlay-Overlay-jfs-T:where([data-width-xxlarge]){width:960px}.prc-Overlay-Overlay-jfs-T:where([data-width-auto]){width:auto}.prc-Overlay-Overlay-jfs-T:where([data-max-width-small]){max-width:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-medium]){max-width:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-large]){max-width:480px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xlarge]){max-width:640px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xxlarge]){max-width:960px}.prc-Overlay-Overlay-jfs-T:where([data-visibility-visible]){visibility:visible}.prc-Overlay-Overlay-jfs-T:where([data-visibility-hidden]){visibility:hidden}@media screen and (max-width:calc(48rem - 0.02px)){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]),.prc-Overlay-Overlay-jfs-T[data-responsive=fullscreen][data-anchor-position=true]{border-radius:unset;height:100vh;left:0;margin:0;max-height:none;max-width:none;padding-bottom:env(safe-area-inset-bottom);position:fixed;top:0;width:100vw}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]),.prc-Overlay-Overlay-jfs-T[data-responsive=fullscreen][data-anchor-position=true]{height:100dvh}}}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-variant=fullscreen]){height:100dvh}}@media (prefers-reduced-motion:no-preference){.prc-Overlay-Overlay-jfs-T{animation:prc-Overlay-overlay-appear-JpFey .2s cubic-bezier(.33,1,.68,1)}}
|
|
2
|
-
/*# sourceMappingURL=Overlay-
|
|
1
|
+
@keyframes prc-Overlay-overlay-appear-JpFey{0%{opacity:0}to{opacity:1}}.prc-Overlay-Overlay-jfs-T{background-color:var(--overlay-bgColor,#fff);border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,0 0 0 1px #d1d9e080,0 6px 12px -3px #25292e0a,0 6px 18px 0 #25292e1f);height:auto;max-height:100vh;max-width:calc(100vw - 2rem);min-width:192px;overflow:auto;position:absolute;width:auto}.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal]),.prc-Overlay-Overlay-jfs-T[data-anchor-position=false]{bottom:var(--bottom,auto);right:var(--right,auto)}@media screen and (max-width:calc(48rem - 0.02px)){[data-responsive=fullscreen]:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:0;top:0}}:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:var(--left,auto);top:var(--top,auto)}.prc-Overlay-Overlay-jfs-T:focus{outline:none}@media (forced-colors:active){.prc-Overlay-Overlay-jfs-T{outline:1px solid transparent}}.prc-Overlay-Overlay-jfs-T:where([data-reflow-container=true]){max-width:calc(100vw - 2rem)}.prc-Overlay-Overlay-jfs-T:where([data-overflow-auto]){overflow:auto}.prc-Overlay-Overlay-jfs-T:where([data-overflow-hidden]){overflow:hidden}.prc-Overlay-Overlay-jfs-T:where([data-overflow-scroll]){overflow:scroll}.prc-Overlay-Overlay-jfs-T:where([data-overflow-visible]){overflow:visible}.prc-Overlay-Overlay-jfs-T:where([data-height-xsmall]){height:192px}.prc-Overlay-Overlay-jfs-T:where([data-height-small]){height:256px}.prc-Overlay-Overlay-jfs-T:where([data-height-medium]){height:320px}.prc-Overlay-Overlay-jfs-T:where([data-height-large]){height:432px}.prc-Overlay-Overlay-jfs-T:where([data-height-xlarge]){height:600px}.prc-Overlay-Overlay-jfs-T:where([data-height-auto]),.prc-Overlay-Overlay-jfs-T:where([data-height-initial]){height:auto}.prc-Overlay-Overlay-jfs-T:where([data-height-fit-content]){height:-moz-fit-content;height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xsmall]){max-height:min(192px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-xsmall]){max-height:min(192px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-small]){max-height:min(256px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-small]){max-height:min(256px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-medium]){max-height:min(320px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-medium]){max-height:min(320px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-large]){max-height:min(432px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-large]){max-height:min(432px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xlarge]){max-height:min(600px,100vh)}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-max-height-xlarge]){max-height:min(600px,100dvh)}}.prc-Overlay-Overlay-jfs-T:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-width-small]){width:256px}.prc-Overlay-Overlay-jfs-T:where([data-width-medium]){width:320px}.prc-Overlay-Overlay-jfs-T:where([data-width-large]){width:480px}.prc-Overlay-Overlay-jfs-T:where([data-width-xlarge]){width:640px}.prc-Overlay-Overlay-jfs-T:where([data-width-xxlarge]){width:960px}.prc-Overlay-Overlay-jfs-T:where([data-width-auto]){width:auto}.prc-Overlay-Overlay-jfs-T:where([data-max-width-small]){max-width:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-medium]){max-width:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-large]){max-width:480px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xlarge]){max-width:640px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xxlarge]){max-width:960px}.prc-Overlay-Overlay-jfs-T:where([data-visibility-visible]){visibility:visible}.prc-Overlay-Overlay-jfs-T:where([data-visibility-hidden]){visibility:hidden}@media screen and (max-width:calc(48rem - 0.02px)){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]),.prc-Overlay-Overlay-jfs-T[data-component=AnchoredOverlay][data-responsive=fullscreen][data-anchor-position=true],.prc-Overlay-Overlay-jfs-T[data-responsive=fullscreen][data-anchor-position=true]{border-radius:unset;height:100vh;left:0;margin:0;max-height:none;max-width:none;padding-bottom:env(safe-area-inset-bottom);position:fixed;top:0;width:100vw}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]),.prc-Overlay-Overlay-jfs-T[data-component=AnchoredOverlay][data-responsive=fullscreen][data-anchor-position=true],.prc-Overlay-Overlay-jfs-T[data-responsive=fullscreen][data-anchor-position=true]{height:100dvh}}}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-variant=fullscreen]){height:100dvh}}@media (prefers-reduced-motion:no-preference){.prc-Overlay-Overlay-jfs-T{animation:prc-Overlay-overlay-appear-JpFey .2s cubic-bezier(.33,1,.68,1)}}
|
|
2
|
+
/*# sourceMappingURL=Overlay-214d10dd.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Overlay/Overlay.module.css.js"],"names":[],"mappings":"AAAA,4CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,2BAQE,4CAAwC,CACxC,8CAAwC,CACxC,4GAAwC,CALxC,WAAY,CACZ,gBAAiB,CAJjB,4BAA6B,CAE7B,eAAgB,CAGhB,aAAc,CANd,iBAAkB,CAElB,UA0NF,CAjNE,wIAKE,yBAA2B,CAF3B,uBAkBF,CAZI,mDADF,6LAGI,MAAO,CADP,KAGJ,CADE,CAGF,iKAIE,qBAAuB,CAFvB,mBAGF,CAGF,iCACE,YACF,CAEA,8BAvCF,2BAyCI,6BAoLJ,CAnLE,CAEA,+DACE,4BACF,CAEA,uDACE,aACF,CAEA,yDACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,gBACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,6GAEE,WACF,CAEA,4DACE,uBAAmB,CAAnB,kBACF,CAEA,2DACE,2BAKF,CAHE,0BAHF,2DAII,4BAEJ,CADE,CAGF,0DACE,2BAKF,CAHE,0BAHF,0DAII,4BAEJ,CADE,CAGF,2DACE,2BAKF,CAHE,0BAHF,2DAII,4BAEJ,CADE,CAGF,0DACE,2BAKF,CAHE,0BAHF,0DAII,4BAEJ,CADE,CAGF,2DACE,2BAKF,CAHE,0BAHF,2DAII,4BAEJ,CADE,CAGF,gEACE,2BAAuB,CAAvB,sBACF,CAEA,qDACE,WACF,CAEA,sDACE,WACF,CAEA,qDAEE,WACF,CAEA,sDAEE,WACF,CAEA,uDAEE,WACF,CAEA,oDACE,UACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,2DACE,eACF,CAEA,4DACE,kBACF,CAEA,2DACE,iBACF,CAKE,mDAHF,mQAYI,mBAAoB,CAHpB,YAAa,CAHb,MAAO,CAKP,QAAS,CADT,eAAgB,CAFhB,cAAe,CAMf,0CAA2C,CAV3C,cAAe,CACf,KAAM,CAEN,WAcJ,CALI,0BAhBJ,mQAkBM,aAGN,CAFI,CACF,CAGF,0BAEE,4DACE,aACF,CACF,CAGF,8CACE,2BACE,wEACF,CACF","file":"Overlay-214d10dd.css","sourcesContent":["@keyframes overlay-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.Overlay {\n position: absolute;\n max-width: calc(100vw - 2rem);\n width: auto;\n min-width: 192px;\n height: auto;\n max-height: 100vh;\n overflow: auto;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n\n &[data-anchor-position='false'],\n &:not([data-anchor-position]):not([data-variant='modal']) {\n /* stylelint-disable-next-line primer/spacing */\n right: var(--right, auto);\n /* stylelint-disable-next-line primer/spacing */\n bottom: var(--bottom, auto);\n\n /* stylelint-disable-next-line selector-max-specificity */\n &[data-responsive='fullscreen']:not([data-variant]) {\n @media screen and (--viewportRange-narrow) {\n top: 0;\n left: 0;\n }\n }\n\n &:not([data-variant]) {\n /* stylelint-disable-next-line primer/spacing */\n top: var(--top, auto);\n /* stylelint-disable-next-line primer/spacing */\n left: var(--left, auto);\n }\n }\n\n &:focus {\n outline: none;\n }\n\n @media (forced-colors: active) {\n /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */\n outline: solid 1px transparent;\n }\n\n &:where([data-reflow-container='true']) {\n max-width: calc(100vw - 2rem);\n }\n\n &:where([data-overflow-auto]) {\n overflow: auto;\n }\n\n &:where([data-overflow-hidden]) {\n overflow: hidden;\n }\n\n &:where([data-overflow-scroll]) {\n overflow: scroll;\n }\n\n &:where([data-overflow-visible]) {\n overflow: visible;\n }\n\n &:where([data-height-xsmall]) {\n height: 192px;\n }\n\n &:where([data-height-small]) {\n height: 256px;\n }\n\n &:where([data-height-medium]) {\n height: 320px;\n }\n\n &:where([data-height-large]) {\n height: 432px;\n }\n\n &:where([data-height-xlarge]) {\n height: 600px;\n }\n\n &:where([data-height-auto]),\n &:where([data-height-initial]) {\n height: auto;\n }\n\n &:where([data-height-fit-content]) {\n height: fit-content;\n }\n\n &:where([data-max-height-xsmall]) {\n max-height: min(192px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(192px, 100dvh);\n }\n }\n\n &:where([data-max-height-small]) {\n max-height: min(256px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(256px, 100dvh);\n }\n }\n\n &:where([data-max-height-medium]) {\n max-height: min(320px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(320px, 100dvh);\n }\n }\n\n &:where([data-max-height-large]) {\n max-height: min(432px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(432px, 100dvh);\n }\n }\n\n &:where([data-max-height-xlarge]) {\n max-height: min(600px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(600px, 100dvh);\n }\n }\n\n &:where([data-max-height-fit-content]) {\n max-height: fit-content;\n }\n\n &:where([data-width-small]) {\n width: 256px;\n }\n\n &:where([data-width-medium]) {\n width: 320px;\n }\n\n &:where([data-width-large]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-width-xlarge]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 640px;\n }\n\n &:where([data-width-xxlarge]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 960px;\n }\n\n &:where([data-width-auto]) {\n width: auto;\n }\n\n &:where([data-max-width-small]) {\n max-width: 256px;\n }\n\n &:where([data-max-width-medium]) {\n max-width: 320px;\n }\n\n &:where([data-max-width-large]) {\n max-width: 480px;\n }\n\n &:where([data-max-width-xlarge]) {\n max-width: 640px;\n }\n\n &:where([data-max-width-xxlarge]) {\n max-width: 960px;\n }\n\n &:where([data-visibility-visible]) {\n visibility: visible;\n }\n\n &:where([data-visibility-hidden]) {\n visibility: hidden;\n }\n\n &:where([data-responsive='fullscreen']),\n &[data-responsive='fullscreen'][data-anchor-position='true'],\n &[data-component='AnchoredOverlay'][data-responsive='fullscreen'][data-anchor-position='true'] {\n @media screen and (--viewportRange-narrow) {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n max-width: none;\n height: 100vh;\n max-height: none;\n margin: 0;\n border-radius: unset;\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: env(safe-area-inset-bottom);\n\n @supports (height: 100dvh) {\n /* fix for mobile safari (100vh clips the screen with the toolbar) */\n height: 100dvh;\n }\n }\n }\n\n @supports (height: 100dvh) {\n /* fix for mobile safari (100vh clips the screen with the toolbar) */\n &:where([data-variant='fullscreen']) {\n height: 100dvh;\n }\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .Overlay {\n animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n }\n}\n"]}
|
|
@@ -10,7 +10,7 @@ export type { BlankslateProps } from '../Blankslate';
|
|
|
10
10
|
export { ButtonBase } from '../Button';
|
|
11
11
|
export type { ButtonBaseProps } from '../Button';
|
|
12
12
|
export { Card } from '../Card';
|
|
13
|
-
export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps,
|
|
13
|
+
export type { CardProps, CardIconProps, CardImageProps, CardHeadingProps, CardDescriptionProps, CardActionProps, CardMetadataProps, } from '../Card';
|
|
14
14
|
export { DataTable, Table, createColumnHelper } from '../DataTable';
|
|
15
15
|
export type { DataTableProps, TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderProps, TableCellProps, TableContainerProps, TableTitleProps, TableSubtitleProps, TableActionsProps, Column, CellAlignment, ColumnWidth, UniqueRow, ObjectPaths, } from '../DataTable';
|
|
16
16
|
export * from '../Dialog';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AACxC,YAAY,EAAC,eAAe,EAAC,MAAM,eAAe,CAAA;AAElD,OAAO,EAAC,UAAU,EAAC,MAAM,WAAW,CAAA;AACpC,YAAY,EAAC,eAAe,EAAC,MAAM,WAAW,CAAA;AAE9C,OAAO,EAAC,IAAI,EAAC,MAAM,SAAS,CAAA;AAC5B,YAAY,EACV,SAAS,EACT,aAAa,EACb,cAAc,EACd,gBAAgB,EAChB,oBAAoB,EACpB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/experimental/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -29,7 +29,7 @@ import type { ForwardedRef, Ref as StandardRef } from 'react';
|
|
|
29
29
|
* return <button ref={combinedRef} />
|
|
30
30
|
* }
|
|
31
31
|
*/
|
|
32
|
-
export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => () => void;
|
|
32
|
+
export declare function useMergedRefs<T>(refA: Ref<T | null>, refB: Ref<T | null>): (value: T | null) => (() => void) | undefined;
|
|
33
33
|
type CleanupFunction = () => void;
|
|
34
34
|
/**
|
|
35
35
|
* React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMergedRefs.d.ts","sourceRoot":"","sources":["../../src/hooks/useMergedRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAE,GAAG,IAAI,WAAW,EAAmB,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"useMergedRefs.d.ts","sourceRoot":"","sources":["../../src/hooks/useMergedRefs.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAE,GAAG,IAAI,WAAW,EAAmB,MAAM,OAAO,CAAA;AAa7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,WAE7D,CAAC,GAAG,IAAI,8BAsBnB;AAED,KAAK,eAAe,GAAG,MAAM,IAAI,CAAA;AAEjC;;;GAGG;AAEH,KAAK,kBAAkB,CAAC,CAAC,IAAI;IAC3B,cAAc,CAAC,QAAQ,EAAE,CAAC,GAAG,IAAI,GAAG,eAAe,CAAA;CACpD,CAAC,gBAAgB,CAAC,CAAA;AAEnB;;;;;;;GAOG;AACH,KAAK,GAAG,CAAC,CAAC,IAAI,YAAY,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,CAAC,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,GAAG,SAAS,CAAA"}
|
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import 'react';
|
|
3
|
+
import { reactMajorVersion, isExperimentalReactVersion } from '../utils/environment.js';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Cleanup functions for refs were introduced in React 19. For feature detection,
|
|
7
|
+
* we look to see if current version of React is >= 19 or if it is an
|
|
8
|
+
* experimental version of React
|
|
9
|
+
*
|
|
10
|
+
* @see https://react.dev/blog/2024/12/05/react-19
|
|
11
|
+
*/
|
|
12
|
+
const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion;
|
|
3
13
|
|
|
4
14
|
/**
|
|
5
15
|
* Combine two refs of matching type (typically an external or forwarded ref and an internal `useRef` object or
|
|
@@ -38,6 +48,9 @@ function useMergedRefs(refA, refB) {
|
|
|
38
48
|
t0 = value => {
|
|
39
49
|
const cleanupA = setRef(refA, value);
|
|
40
50
|
const cleanupB = setRef(refB, value);
|
|
51
|
+
if (!supportsRefCleanup) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
41
54
|
return () => {
|
|
42
55
|
if (cleanupA) {
|
|
43
56
|
cleanupA();
|
|
@@ -3,5 +3,8 @@
|
|
|
3
3
|
*
|
|
4
4
|
* @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
|
|
5
5
|
*/
|
|
6
|
-
|
|
6
|
+
declare const canUseDOM: boolean;
|
|
7
|
+
declare const reactMajorVersion: number;
|
|
8
|
+
declare const isExperimentalReactVersion: boolean;
|
|
9
|
+
export { canUseDOM, reactMajorVersion, isExperimentalReactVersion };
|
|
7
10
|
//# sourceMappingURL=environment.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"environment.d.ts","sourceRoot":"","sources":["../../src/utils/environment.
|
|
1
|
+
{"version":3,"file":"environment.d.ts","sourceRoot":"","sources":["../../src/utils/environment.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AAEH,QAAA,MAAM,SAAS,SAAwF,CAAA;AAWvG,QAAA,MAAM,iBAAiB,QAAgC,CAAA;AAGvD,QAAA,MAAM,0BAA0B,SAAiD,CAAA;AAEjF,OAAO,EAAC,SAAS,EAAE,iBAAiB,EAAE,0BAA0B,EAAC,CAAA"}
|
|
@@ -1,9 +1,24 @@
|
|
|
1
|
+
import { version } from 'react';
|
|
2
|
+
|
|
1
3
|
/**
|
|
2
4
|
* Indicate whether current execution environment can access the DOM.
|
|
3
5
|
*
|
|
4
6
|
* @see https://github.com/facebook/fbjs/blob/4d1751311d3f67af2dcce2e40df8512a23c7b9c6/packages/fbjs/src/core/ExecutionEnvironment.js#L12
|
|
5
7
|
*/
|
|
6
|
-
// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition,ssr-friendly/no-dom-globals-in-module-scope
|
|
7
9
|
const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
|
8
10
|
|
|
9
|
-
|
|
11
|
+
// Grab the major version from react. This could be formatted as any valid
|
|
12
|
+
// semver version, e.g.:
|
|
13
|
+
//
|
|
14
|
+
// - 19.0.0
|
|
15
|
+
// - 19.0.0-rc.1
|
|
16
|
+
// - 0.0.0-{channel}-{commit}-{time}
|
|
17
|
+
//
|
|
18
|
+
// So we only pull the first part of the version and parse it.
|
|
19
|
+
const reactVersion = version.split('.');
|
|
20
|
+
const reactMajorVersion = parseInt(reactVersion[0], 10);
|
|
21
|
+
const EXPERIMENTAL_REACT_VERSION_REGEX = /^0\.0\.0-experimental-[a-f0-9]{8}-\d{8}$/;
|
|
22
|
+
const isExperimentalReactVersion = EXPERIMENTAL_REACT_VERSION_REGEX.test(version);
|
|
23
|
+
|
|
24
|
+
export { canUseDOM, isExperimentalReactVersion, reactMajorVersion };
|
|
@@ -2126,18 +2126,40 @@
|
|
|
2126
2126
|
"stories": [
|
|
2127
2127
|
{
|
|
2128
2128
|
"id": "experimental-components-card--default",
|
|
2129
|
-
"code": "() => {\n return (\n <
|
|
2129
|
+
"code": "() => {\n return (\n <Card>\n <Card.Icon icon={RocketIcon} />\n <Card.Heading>Card Heading</Card.Heading>\n <Card.Description>\n This is a description of the card providing supplemental information.\n </Card.Description>\n <Card.Metadata>\n <PeopleIcon size={16} />3 contributors\n </Card.Metadata>\n </Card>\n )\n}"
|
|
2130
2130
|
},
|
|
2131
2131
|
{
|
|
2132
2132
|
"id": "experimental-components-card-features--with-image",
|
|
2133
|
-
"code": "() => {\n return (\n <
|
|
2133
|
+
"code": "() => {\n return (\n <Card>\n <Card.Image src=\"https://github.com/octocat.png\" alt=\"Octocat\" />\n <Card.Heading>Card with Image</Card.Heading>\n <Card.Description>\n This card uses an edge-to-edge image instead of an icon.\n </Card.Description>\n </Card>\n )\n}"
|
|
2134
2134
|
},
|
|
2135
2135
|
{
|
|
2136
2136
|
"id": "experimental-components-card-features--with-metadata",
|
|
2137
|
-
"code": "() => {\n return (\n <
|
|
2137
|
+
"code": "() => {\n return (\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Heading>primer/react</Card.Heading>\n <Card.Description>\n {\n \"GitHub's design system implemented as React components for building consistent user interfaces.\"\n }\n </Card.Description>\n <Card.Metadata>\n <StarIcon size={16} />\n 1.2k stars\n </Card.Metadata>\n </Card>\n )\n}"
|
|
2138
|
+
},
|
|
2139
|
+
{
|
|
2140
|
+
"id": "experimental-components-card-features--with-menu",
|
|
2141
|
+
"code": "() => {\n return (\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Heading>primer/react</Card.Heading>\n <Card.Description>\n {\n \"GitHub's design system implemented as React components for building consistent user interfaces.\"\n }\n </Card.Description>\n <Card.Action>\n <ActionMenu>\n <ActionMenu.Anchor>\n <IconButton\n icon={KebabHorizontalIcon}\n aria-label=\"More options for primer/react\"\n variant=\"invisible\"\n />\n </ActionMenu.Anchor>\n <ActionMenu.Overlay>\n <ActionList>\n <ActionList.Item>Star</ActionList.Item>\n <ActionList.Item>Watch</ActionList.Item>\n <ActionList.Item>Fork</ActionList.Item>\n </ActionList>\n </ActionMenu.Overlay>\n </ActionMenu>\n </Card.Action>\n </Card>\n )\n}"
|
|
2142
|
+
},
|
|
2143
|
+
{
|
|
2144
|
+
"id": "experimental-components-card-features--standalone-section",
|
|
2145
|
+
"code": "() => (\n <Card as=\"section\">\n <Card.Icon icon={RepoIcon} />\n <Card.Heading>primer/react</Card.Heading>\n <Card.Description>\n {\n 'Standalone cards render as a labelled <section> landmark. aria-labelledby is automatically wired to Card.Heading.'\n }\n </Card.Description>\n </Card>\n)"
|
|
2146
|
+
},
|
|
2147
|
+
{
|
|
2148
|
+
"id": "experimental-components-card-features--in-list",
|
|
2149
|
+
"code": "() => (\n <ul className={classes.CardList} aria-label=\"Repositories\">\n <li>\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Description>primer/react</Card.Description>\n <Card.Metadata>\n <StarIcon size={16} />\n 1.2k stars\n </Card.Metadata>\n </Card>\n </li>\n <li>\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Description>primer/css</Card.Description>\n <Card.Metadata>\n <StarIcon size={16} />\n 850 stars\n </Card.Metadata>\n </Card>\n </li>\n <li>\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Description>primer/octicons</Card.Description>\n <Card.Metadata>\n <StarIcon size={16} />\n 2.1k stars\n </Card.Metadata>\n </Card>\n </li>\n </ul>\n)"
|
|
2150
|
+
},
|
|
2151
|
+
{
|
|
2152
|
+
"id": "experimental-components-card-features--interactive-content",
|
|
2153
|
+
"code": "() => {\n const repos = [\n {\n name: 'primer/react',\n },\n {\n name: 'primer/css',\n },\n {\n name: 'primer/octicons',\n },\n ]\n return (\n <ul className={classes.CardList} aria-label=\"Repositories\">\n {repos.map((repo) => (\n <li key={repo.name}>\n <Card>\n <Card.Icon icon={RepoIcon} />\n <Card.Description>{repo.name}</Card.Description>\n <Card.Metadata>\n <Button leadingVisual={StarIcon} size=\"small\">\n Star <VisuallyHidden>{repo.name}</VisuallyHidden>\n </Button>\n <Button leadingVisual={RepoForkedIcon} size=\"small\">\n Fork <VisuallyHidden>{repo.name}</VisuallyHidden>\n </Button>\n </Card.Metadata>\n </Card>\n </li>\n ))}\n </ul>\n )\n}"
|
|
2138
2154
|
}
|
|
2139
2155
|
],
|
|
2140
2156
|
"props": [
|
|
2157
|
+
{
|
|
2158
|
+
"name": "children",
|
|
2159
|
+
"type": "React.ReactNode",
|
|
2160
|
+
"required": true,
|
|
2161
|
+
"description": "The contents of the card. Provide either `Card.*` subcomponents (for example `Card.Heading`, `Card.Description`, `Card.Metadata`) or any custom content. A card with no children will not render."
|
|
2162
|
+
},
|
|
2141
2163
|
{
|
|
2142
2164
|
"name": "className",
|
|
2143
2165
|
"type": "string",
|
|
@@ -2154,6 +2176,12 @@
|
|
|
2154
2176
|
"type": "'medium' | 'large'",
|
|
2155
2177
|
"defaultValue": "'large'",
|
|
2156
2178
|
"description": "Controls the border radius of the Card."
|
|
2179
|
+
},
|
|
2180
|
+
{
|
|
2181
|
+
"name": "as",
|
|
2182
|
+
"type": "'div' | 'section'",
|
|
2183
|
+
"defaultValue": "'div'",
|
|
2184
|
+
"description": "The HTML element to render. Use `'section'` for **standalone** Cards (not inside a list of cards) so screen readers announce the Card as a labelled region. When `Card.Heading` is present, `aria-labelledby` is automatically wired. Use the default `'div'` when the Card is inside an `<li>` of a list of cards."
|
|
2157
2185
|
}
|
|
2158
2186
|
],
|
|
2159
2187
|
"subcomponents": [
|
|
@@ -2195,21 +2223,42 @@
|
|
|
2195
2223
|
"name": "as",
|
|
2196
2224
|
"type": "'h2' | 'h3' | 'h4' | 'h5' | 'h6'",
|
|
2197
2225
|
"defaultValue": "'h3'",
|
|
2198
|
-
"description": "The heading level to render."
|
|
2226
|
+
"description": "The heading level to render. When the parent Card uses `as=\"section\"`, the heading's `id` is automatically wired to the section's `aria-labelledby`."
|
|
2199
2227
|
}
|
|
2200
2228
|
]
|
|
2201
2229
|
},
|
|
2202
2230
|
{
|
|
2203
2231
|
"name": "Card.Description",
|
|
2204
|
-
"props": [
|
|
2232
|
+
"props": [
|
|
2233
|
+
{
|
|
2234
|
+
"name": "children",
|
|
2235
|
+
"type": "React.ReactNode",
|
|
2236
|
+
"required": true,
|
|
2237
|
+
"description": "The descriptive text for the card. Rendered inside a `<p>` element so should be flowing text content."
|
|
2238
|
+
}
|
|
2239
|
+
]
|
|
2205
2240
|
},
|
|
2206
2241
|
{
|
|
2207
|
-
"name": "Card.
|
|
2208
|
-
"props": [
|
|
2242
|
+
"name": "Card.Action",
|
|
2243
|
+
"props": [
|
|
2244
|
+
{
|
|
2245
|
+
"name": "children",
|
|
2246
|
+
"type": "React.ReactNode",
|
|
2247
|
+
"required": true,
|
|
2248
|
+
"description": "Interactive control for the top-right corner of the card."
|
|
2249
|
+
}
|
|
2250
|
+
]
|
|
2209
2251
|
},
|
|
2210
2252
|
{
|
|
2211
2253
|
"name": "Card.Metadata",
|
|
2212
|
-
"props": [
|
|
2254
|
+
"props": [
|
|
2255
|
+
{
|
|
2256
|
+
"name": "children",
|
|
2257
|
+
"type": "React.ReactNode",
|
|
2258
|
+
"required": true,
|
|
2259
|
+
"description": "Metadata content for the bottom of the card. Accepts any content: plain text, icons, or other Primer components."
|
|
2260
|
+
}
|
|
2261
|
+
]
|
|
2213
2262
|
}
|
|
2214
2263
|
]
|
|
2215
2264
|
},
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@primer/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "38.
|
|
4
|
+
"version": "38.25.0-rc.7f5e08f50",
|
|
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",
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
"@github/tab-container-element": "^4.8.2",
|
|
80
80
|
"@lit-labs/react": "1.2.1",
|
|
81
81
|
"@oddbird/popover-polyfill": "^0.5.2",
|
|
82
|
-
"@primer/behaviors": "^1.10.
|
|
82
|
+
"@primer/behaviors": "^1.10.3",
|
|
83
83
|
"@primer/live-region-element": "^0.7.1",
|
|
84
84
|
"@primer/octicons-react": "^19.24.1",
|
|
85
85
|
"@primer/primitives": "10.x || 11.x",
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium{position:relative}.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:none;position:absolute;right:var(--base-size-8,.5rem);top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:inline-grid}}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z{position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;position-visibility:anchors-visible;position:fixed!important;z-index:100}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[popover]{border:0;inset:auto;margin:0;max-width:none;padding:0}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom]{left:anchor(left);top:calc(anchor(bottom) + var(--base-size-4,.25rem))}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-bottom][data-align=left]{left:auto;right:calc(anchor(right) - var(--anchored-overlay-anchor-offset-left))}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-top]{bottom:anchor(top);left:anchor(left);margin-bottom:var(--base-size-4,.25rem)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-top][data-align=left]{left:auto;right:anchor(right)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-left]{margin-right:var(--base-size-4,.25rem);right:anchor(left);top:var(--anchored-overlay-top-override,anchor(top));position-try-fallbacks:flip-inline,flip-block,flip-start,--outside-left-to-bottom}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-right]{left:anchor(right);margin-left:var(--base-size-4,.25rem);top:var(--anchored-overlay-top-override,anchor(top));position-try-fallbacks:flip-inline,flip-block,flip-start,--outside-right-to-bottom}@position-try --outside-left-to-bottom{margin:0;right:anchor(right);top:calc(anchor(bottom) + var(--base-size-4,.25rem));width:auto}@position-try --outside-right-to-bottom{left:anchor(left);margin:0;top:calc(anchor(bottom) + var(--base-size-4,.25rem));width:auto}
|
|
2
|
-
/*# sourceMappingURL=AnchoredOverlay-ec9e15fc.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AnchoredOverlay/AnchoredOverlay.module.css.js"],"names":[],"mappings":"AAAA,0DACE,iBACF,CAEA,iDAIE,YAAa,CAHb,iBAAkB,CAElB,8BAAyB,CADzB,4BAOF,CAHE,mDANF,iDAOI,mBAEJ,CADE,CAGF,2CACE,oEAGwB,CACxB,mCAAoC,CAEpC,wBAA0B,CAD1B,WAsDF,CAnDE,oDAIE,QAAS,CAHT,UAAW,CACX,QAAS,CAGT,cAAe,CAFf,SAGF,CAEA,qEAGE,iBAAkB,CADlB,oDAOF,CAJE,sFACE,SAAU,CACV,sEACF,CAGF,kEAEE,kBAAmB,CACnB,iBAAkB,CAFlB,uCAQF,CAJE,mFACE,SAAU,CACV,mBACF,CAGF,mEAWE,sCAAgC,CAVhC,kBAAmB,CASnB,oDAAsD,CAEtD,iFACF,CAEA,oEACE,kBAAmB,CAEnB,qCAA+B,CAD/B,oDAAsD,CAEtD,kFACF,CAGF,uCAGE,QAAS,CAFT,mBAAoB,CACpB,oDAA8C,CAE9C,UACF,CAEA,wCACE,iBAAkB,CAElB,QAAS,CADT,oDAA8C,CAE9C,UACF","file":"AnchoredOverlay-ec9e15fc.css","sourcesContent":[".ResponsiveCloseButtonContainer {\n position: relative;\n}\n\n.ResponsiveCloseButton {\n position: absolute;\n top: var(--base-size-8);\n right: var(--base-size-8);\n display: none;\n\n @media screen and (--viewportRange-narrow) {\n display: inline-grid;\n }\n}\n\n.AnchoredOverlay {\n position-try-fallbacks:\n flip-block,\n flip-inline,\n flip-block flip-inline;\n position-visibility: anchors-visible;\n z-index: 100;\n position: fixed !important;\n\n &[popover] {\n inset: auto;\n margin: 0;\n padding: 0;\n border: 0;\n max-width: none;\n }\n\n &[data-side='outside-bottom'] {\n /* stylelint-disable primer/spacing */\n top: calc(anchor(bottom) + var(--base-size-4));\n left: anchor(left);\n\n &[data-align='left'] {\n left: auto;\n right: calc(anchor(right) - var(--anchored-overlay-anchor-offset-left));\n }\n }\n\n &[data-side='outside-top'] {\n margin-bottom: var(--base-size-4);\n bottom: anchor(top);\n left: anchor(left);\n\n &[data-align='left'] {\n left: auto;\n right: anchor(right);\n }\n }\n\n &[data-side='outside-left'] {\n right: anchor(left);\n /* Falls back to `anchor(top)` when JS hasn't overridden it. JS sets the\n override when the overlay's bottom would overflow the viewport so we\n can lift it up to keep the bottom edge on screen, mirroring the JS\n anchored-positioning code path.\n\n This override only applies when CSS cannot find space using the default position -\n or any of its defined fallbacks.\n */\n top: var(--anchored-overlay-top-override, anchor(top));\n margin-right: var(--base-size-4);\n position-try-fallbacks: flip-inline, flip-block, flip-start, --outside-left-to-bottom;\n }\n\n &[data-side='outside-right'] {\n left: anchor(right);\n top: var(--anchored-overlay-top-override, anchor(top));\n margin-left: var(--base-size-4);\n position-try-fallbacks: flip-inline, flip-block, flip-start, --outside-right-to-bottom;\n }\n}\n\n@position-try --outside-left-to-bottom {\n right: anchor(right);\n top: calc(anchor(bottom) + var(--base-size-4));\n margin: 0;\n width: auto;\n}\n\n@position-try --outside-right-to-bottom {\n left: anchor(left);\n top: calc(anchor(bottom) + var(--base-size-4));\n margin: 0;\n width: auto;\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Overlay/Overlay.module.css.js"],"names":[],"mappings":"AAAA,4CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,2BAQE,4CAAwC,CACxC,8CAAwC,CACxC,4GAAwC,CALxC,WAAY,CACZ,gBAAiB,CAJjB,4BAA6B,CAE7B,eAAgB,CAGhB,aAAc,CANd,iBAAkB,CAElB,UAyNF,CAhNE,wIAKE,yBAA2B,CAF3B,uBAkBF,CAZI,mDADF,6LAGI,MAAO,CADP,KAGJ,CADE,CAGF,iKAIE,qBAAuB,CAFvB,mBAGF,CAGF,iCACE,YACF,CAEA,8BAvCF,2BAyCI,6BAmLJ,CAlLE,CAEA,+DACE,4BACF,CAEA,uDACE,aACF,CAEA,yDACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,gBACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,6GAEE,WACF,CAEA,4DACE,uBAAmB,CAAnB,kBACF,CAEA,2DACE,2BAKF,CAHE,0BAHF,2DAII,4BAEJ,CADE,CAGF,0DACE,2BAKF,CAHE,0BAHF,0DAII,4BAEJ,CADE,CAGF,2DACE,2BAKF,CAHE,0BAHF,2DAII,4BAEJ,CADE,CAGF,0DACE,2BAKF,CAHE,0BAHF,0DAII,4BAEJ,CADE,CAGF,2DACE,2BAKF,CAHE,0BAHF,2DAII,4BAEJ,CADE,CAGF,gEACE,2BAAuB,CAAvB,sBACF,CAEA,qDACE,WACF,CAEA,sDACE,WACF,CAEA,qDAEE,WACF,CAEA,sDAEE,WACF,CAEA,uDAEE,WACF,CAEA,oDACE,UACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,2DACE,eACF,CAEA,4DACE,kBACF,CAEA,2DACE,iBACF,CAIE,mDAFF,iJAWI,mBAAoB,CAHpB,YAAa,CAHb,MAAO,CAKP,QAAS,CADT,eAAgB,CAFhB,cAAe,CAMf,0CAA2C,CAV3C,cAAe,CACf,KAAM,CAEN,WAcJ,CALI,0BAfJ,iJAiBM,aAGN,CAFI,CACF,CAGF,0BAEE,4DACE,aACF,CACF,CAGF,8CACE,2BACE,wEACF,CACF","file":"Overlay-95cfd3c7.css","sourcesContent":["@keyframes overlay-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.Overlay {\n position: absolute;\n max-width: calc(100vw - 2rem);\n width: auto;\n min-width: 192px;\n height: auto;\n max-height: 100vh;\n overflow: auto;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n\n &[data-anchor-position='false'],\n &:not([data-anchor-position]):not([data-variant='modal']) {\n /* stylelint-disable-next-line primer/spacing */\n right: var(--right, auto);\n /* stylelint-disable-next-line primer/spacing */\n bottom: var(--bottom, auto);\n\n /* stylelint-disable-next-line selector-max-specificity */\n &[data-responsive='fullscreen']:not([data-variant]) {\n @media screen and (--viewportRange-narrow) {\n top: 0;\n left: 0;\n }\n }\n\n &:not([data-variant]) {\n /* stylelint-disable-next-line primer/spacing */\n top: var(--top, auto);\n /* stylelint-disable-next-line primer/spacing */\n left: var(--left, auto);\n }\n }\n\n &:focus {\n outline: none;\n }\n\n @media (forced-colors: active) {\n /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */\n outline: solid 1px transparent;\n }\n\n &:where([data-reflow-container='true']) {\n max-width: calc(100vw - 2rem);\n }\n\n &:where([data-overflow-auto]) {\n overflow: auto;\n }\n\n &:where([data-overflow-hidden]) {\n overflow: hidden;\n }\n\n &:where([data-overflow-scroll]) {\n overflow: scroll;\n }\n\n &:where([data-overflow-visible]) {\n overflow: visible;\n }\n\n &:where([data-height-xsmall]) {\n height: 192px;\n }\n\n &:where([data-height-small]) {\n height: 256px;\n }\n\n &:where([data-height-medium]) {\n height: 320px;\n }\n\n &:where([data-height-large]) {\n height: 432px;\n }\n\n &:where([data-height-xlarge]) {\n height: 600px;\n }\n\n &:where([data-height-auto]),\n &:where([data-height-initial]) {\n height: auto;\n }\n\n &:where([data-height-fit-content]) {\n height: fit-content;\n }\n\n &:where([data-max-height-xsmall]) {\n max-height: min(192px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(192px, 100dvh);\n }\n }\n\n &:where([data-max-height-small]) {\n max-height: min(256px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(256px, 100dvh);\n }\n }\n\n &:where([data-max-height-medium]) {\n max-height: min(320px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(320px, 100dvh);\n }\n }\n\n &:where([data-max-height-large]) {\n max-height: min(432px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(432px, 100dvh);\n }\n }\n\n &:where([data-max-height-xlarge]) {\n max-height: min(600px, 100vh);\n\n @supports (height: 100dvh) {\n max-height: min(600px, 100dvh);\n }\n }\n\n &:where([data-max-height-fit-content]) {\n max-height: fit-content;\n }\n\n &:where([data-width-small]) {\n width: 256px;\n }\n\n &:where([data-width-medium]) {\n width: 320px;\n }\n\n &:where([data-width-large]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-width-xlarge]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 640px;\n }\n\n &:where([data-width-xxlarge]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 960px;\n }\n\n &:where([data-width-auto]) {\n width: auto;\n }\n\n &:where([data-max-width-small]) {\n max-width: 256px;\n }\n\n &:where([data-max-width-medium]) {\n max-width: 320px;\n }\n\n &:where([data-max-width-large]) {\n max-width: 480px;\n }\n\n &:where([data-max-width-xlarge]) {\n max-width: 640px;\n }\n\n &:where([data-max-width-xxlarge]) {\n max-width: 960px;\n }\n\n &:where([data-visibility-visible]) {\n visibility: visible;\n }\n\n &:where([data-visibility-hidden]) {\n visibility: hidden;\n }\n\n &:where([data-responsive='fullscreen']),\n &[data-responsive='fullscreen'][data-anchor-position='true'] {\n @media screen and (--viewportRange-narrow) {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n max-width: none;\n height: 100vh;\n max-height: none;\n margin: 0;\n border-radius: unset;\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: env(safe-area-inset-bottom);\n\n @supports (height: 100dvh) {\n /* fix for mobile safari (100vh clips the screen with the toolbar) */\n height: 100dvh;\n }\n }\n }\n\n @supports (height: 100dvh) {\n /* fix for mobile safari (100vh clips the screen with the toolbar) */\n &:where([data-variant='fullscreen']) {\n height: 100dvh;\n }\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .Overlay {\n animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n }\n}\n"]}
|