@primer/react 38.0.0 → 38.1.0-rc.e96ea6506
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 +150 -155
- package/dist/PageLayout/PageLayout-1849f083.css +2 -0
- package/dist/PageLayout/PageLayout-1849f083.css.map +1 -0
- package/dist/PageLayout/PageLayout.module.css.js +1 -1
- package/dist/Popover/Popover.d.ts +2 -0
- package/dist/Popover/Popover.d.ts.map +1 -1
- package/dist/Popover/Popover.js +55 -25
- package/generated/components.json +10 -0
- package/package.json +1 -1
- package/dist/PageLayout/PageLayout-a276fa3b.css +0 -2
- package/dist/PageLayout/PageLayout-a276fa3b.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,228 +1,217 @@
|
|
|
1
1
|
# @primer/react
|
|
2
2
|
|
|
3
|
-
## 38.
|
|
4
|
-
|
|
5
|
-
### Major Changes
|
|
3
|
+
## 38.1.0
|
|
6
4
|
|
|
7
|
-
|
|
5
|
+
### Minor Changes
|
|
8
6
|
|
|
9
|
-
- [#
|
|
7
|
+
- [#7063](https://github.com/primer/react/pull/7063) [`247c66a`](https://github.com/primer/react/commit/247c66a3c297afba73c6e9e3842cc15ff8a845c1) Thanks [@francinelucca](https://github.com/francinelucca)! - Feat: popover implement click outside
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
## 38.0.0
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
### Major Changes
|
|
14
12
|
|
|
15
|
-
- [#
|
|
13
|
+
- [#6944](https://github.com/primer/react/pull/6944) [`446956d`](https://github.com/primer/react/commit/446956d3466ca11b95adf720d7cf07a1bb6bad92) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx from deprecated ActionList component.
|
|
16
14
|
|
|
17
15
|
- [#6965](https://github.com/primer/react/pull/6965) [`f61238c`](https://github.com/primer/react/commit/f61238c295377f59a5d3c5b0c782e98c238fa639) Thanks [@francinelucca](https://github.com/francinelucca)! - Chore/remove styled. components: deprecated UnderlineNav, ValidationAnimation, LabelGroup, Tooltip
|
|
18
16
|
|
|
19
|
-
- [#
|
|
17
|
+
- [#6921](https://github.com/primer/react/pull/6921) [`c58f171`](https://github.com/primer/react/commit/c58f171be98dfec354eeb85c870368e84796fe6e) Thanks [@llastflowers](https://github.com/llastflowers)! - Update ActionList component and related components to no longer support sx/styled-components
|
|
20
18
|
|
|
21
|
-
- [#
|
|
19
|
+
- [#6902](https://github.com/primer/react/pull/6902) [`c395547`](https://github.com/primer/react/commit/c395547ae30bb51ea40388183f384848a397dc80) Thanks [@iansan5653](https://github.com/iansan5653)! - Support nested children in ActionBar.
|
|
22
20
|
|
|
23
|
-
- [#
|
|
21
|
+
- [#6930](https://github.com/primer/react/pull/6930) [`260c74c`](https://github.com/primer/react/commit/260c74c4e9f780a891157c9a2bc1450a12f8593a) Thanks [@mperrotti](https://github.com/mperrotti)! - Removes `sx` prop from DataTable.Container
|
|
24
22
|
|
|
25
|
-
- [#
|
|
23
|
+
- [#6942](https://github.com/primer/react/pull/6942) [`3ced917`](https://github.com/primer/react/commit/3ced917f595667e1f68a6b9110bd034e0d88bf2a) Thanks [@francinelucca](https://github.com/francinelucca)! - Removes sx prop from PageLayout and subcomponents
|
|
26
24
|
|
|
27
|
-
- [#
|
|
25
|
+
- [#6951](https://github.com/primer/react/pull/6951) [`2703bc9`](https://github.com/primer/react/commit/2703bc9cad2d3f16552b748f3799949a35464a1a) Thanks [@francinelucca](https://github.com/francinelucca)! - Update FormControl component to no longer support sx
|
|
28
26
|
|
|
29
|
-
- [#
|
|
27
|
+
- [#7027](https://github.com/primer/react/pull/7027) [`415fafc`](https://github.com/primer/react/commit/415fafc23bb2060cc856cda8de432a4447a47bfd) Thanks [@francinelucca](https://github.com/francinelucca)! - Remove styled-components and styled-system from dependencies
|
|
30
28
|
|
|
31
|
-
- [#
|
|
29
|
+
- [#7032](https://github.com/primer/react/pull/7032) [`9fce541`](https://github.com/primer/react/commit/9fce5419ce76c94837f2bd4b013f007837a97182) Thanks [@francinelucca](https://github.com/francinelucca)! - - remove sx, SxProp, exports
|
|
32
30
|
|
|
33
|
-
- [#
|
|
31
|
+
- [#6897](https://github.com/primer/react/pull/6897) [`c1448cc`](https://github.com/primer/react/commit/c1448cc6546b0e58b1ceb54fa2989a1fd7cbfe30) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Replaces `useTheme` usage with `theme`. If an application uses a custom theme that modifies one of the following 5 tokens, they will be reset to the default theme values. (`space.2, colors.success.fg, colors.border.default, colors.border.muted, animation.easeOutCubic`)
|
|
34
32
|
|
|
35
|
-
- [#
|
|
33
|
+
- [#7015](https://github.com/primer/react/pull/7015) [`0889246`](https://github.com/primer/react/commit/0889246fda736fe7dd967a295fe8467109d06bc9) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore: remove Box, BoxProps export
|
|
36
34
|
|
|
37
|
-
- [#
|
|
35
|
+
- [#6945](https://github.com/primer/react/pull/6945) [`1c84c0f`](https://github.com/primer/react/commit/1c84c0ff2b261a02d81c11fb16c7d3fb05294506) Thanks [@francinelucca](https://github.com/francinelucca)! - chore(Octicon): remove sx
|
|
38
36
|
|
|
39
|
-
- [#
|
|
37
|
+
- [#6904](https://github.com/primer/react/pull/6904) [`62df166`](https://github.com/primer/react/commit/62df166574d6248b3405c224a2f63f1e53a75ece) Thanks [@pksjce](https://github.com/pksjce)! - Remove sx property from Button
|
|
40
38
|
|
|
41
|
-
- [#
|
|
39
|
+
- [#6874](https://github.com/primer/react/pull/6874) [`15824db`](https://github.com/primer/react/commit/15824db141ef32b3e090bcf1880f03bd9684392a) Thanks [@pksjce](https://github.com/pksjce)! - Remove sx from UnderlinePanels
|
|
42
40
|
|
|
43
|
-
- [#
|
|
41
|
+
- [#6690](https://github.com/primer/react/pull/6690) [`c5c2053`](https://github.com/primer/react/commit/c5c2053caf38da76a4310098e805b2edb05e2552) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx support from the Token component.
|
|
44
42
|
|
|
45
|
-
- [#
|
|
43
|
+
- [#6673](https://github.com/primer/react/pull/6673) [`19befd6`](https://github.com/primer/react/commit/19befd66b801532bb0ef85e60296c73d8c747fc5) Thanks [@llastflowers](https://github.com/llastflowers)! - Update CircleBadge component to no longer support sx
|
|
46
44
|
|
|
47
|
-
- [#
|
|
45
|
+
- [#6868](https://github.com/primer/react/pull/6868) [`2053cb3`](https://github.com/primer/react/commit/2053cb3f7ee15fe1e4c3cc9be3c09c82dd5aed93) Thanks [@mperrotti](https://github.com/mperrotti)! - Removes Box usage and sx prop from NavList and ActionList
|
|
48
46
|
|
|
49
|
-
- [#
|
|
47
|
+
- [#6631](https://github.com/primer/react/pull/6631) [`86b3e60`](https://github.com/primer/react/commit/86b3e6063855615675c87df6eccad41d83db3762) Thanks [@joshblack](https://github.com/joshblack)! - Remove the sx prop from Label
|
|
50
48
|
|
|
51
|
-
- [#
|
|
49
|
+
- [#6865](https://github.com/primer/react/pull/6865) [`eaf7e58`](https://github.com/primer/react/commit/eaf7e5840e4fbe4042c80711f983a0df05e2b68d) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: remove sx from Overlay
|
|
52
50
|
|
|
53
|
-
- [#
|
|
51
|
+
- [#6825](https://github.com/primer/react/pull/6825) [`4196e0e`](https://github.com/primer/react/commit/4196e0eed6894d020a83b9f382f5cb6817f9a725) Thanks [@mperrotti](https://github.com/mperrotti)! - Removes `Box` component usage and `sx` prop from the `Link` component, Storybook stories, and a .figma.tsx file
|
|
54
52
|
|
|
55
|
-
- [#
|
|
53
|
+
- [#6864](https://github.com/primer/react/pull/6864) [`b0abd78`](https://github.com/primer/react/commit/b0abd785713d9f95ca9d5e41394e00153176077d) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove support for `sx` from the `TabNav` component
|
|
56
54
|
|
|
57
|
-
- [#
|
|
55
|
+
- [#6923](https://github.com/primer/react/pull/6923) [`e5753f0`](https://github.com/primer/react/commit/e5753f0560fc57d426e795c012ffcb0b7fb0d290) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: remove sx from deprecated Dialog
|
|
58
56
|
|
|
59
|
-
- [#
|
|
57
|
+
- [#6729](https://github.com/primer/react/pull/6729) [`7ae5db2`](https://github.com/primer/react/commit/7ae5db229837fdd75dd73ce1779c7faa18734f89) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Update Text component to no longer support sx.
|
|
60
58
|
|
|
61
|
-
- [#
|
|
59
|
+
- [#6667](https://github.com/primer/react/pull/6667) [`d122122`](https://github.com/primer/react/commit/d12212225884b17cf6236af9feb8b098caaeea35) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Update Tooltip component to no longer support sx.
|
|
62
60
|
|
|
63
|
-
- [#
|
|
61
|
+
- [#6611](https://github.com/primer/react/pull/6611) [`15c1eb7`](https://github.com/primer/react/commit/15c1eb734210938182323bb15200d69ae4a3a300) Thanks [@joshblack](https://github.com/joshblack)! - Update Avatar component to no longer support sx, add sx wrapper to @primer/styled-react
|
|
64
62
|
|
|
65
|
-
- [#
|
|
63
|
+
- [#6844](https://github.com/primer/react/pull/6844) [`1f9f582`](https://github.com/primer/react/commit/1f9f582f29e623a33401061832d8b6ab778c47b3) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Update `Breadcrumbs` to no longer support sx
|
|
66
64
|
|
|
67
|
-
- [#
|
|
65
|
+
- [#6812](https://github.com/primer/react/pull/6812) [`0834e9e`](https://github.com/primer/react/commit/0834e9ebe910c363f413723a254e0f2bd947a4b6) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from the Dialog component and sub-components
|
|
68
66
|
|
|
69
|
-
- [#
|
|
70
|
-
BREAKING CHANGE: make Caret component internal only
|
|
67
|
+
- [#6928](https://github.com/primer/react/pull/6928) [`2eeff36`](https://github.com/primer/react/commit/2eeff368832b6fc122aef70302f681b1f14ad71f) Thanks [@mperrotti](https://github.com/mperrotti)! - Removes `sx` prop from VisuallyHidden component, and as a result also removes `sx` prop from CheckboxGroup.Label and RadioGroup.Label
|
|
71
68
|
|
|
72
|
-
- [#
|
|
69
|
+
- [#6860](https://github.com/primer/react/pull/6860) [`628e601`](https://github.com/primer/react/commit/628e60172343fdf1c94734c39480991b0591e267) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from the `Heading` component
|
|
73
70
|
|
|
74
|
-
- [#
|
|
71
|
+
- [#6805](https://github.com/primer/react/pull/6805) [`0f075d1`](https://github.com/primer/react/commit/0f075d1a679f0733ad984eeb2a677989ceca8ad0) Thanks [@mperrotti](https://github.com/mperrotti)! - Removes usage of Box component from other components.
|
|
75
72
|
|
|
76
|
-
|
|
73
|
+
- [#6857](https://github.com/primer/react/pull/6857) [`b9b558e`](https://github.com/primer/react/commit/b9b558efe1033150b05adc88d28234db5dc82f95) Thanks [@pksjce](https://github.com/pksjce)! - Remove PointerBox from @primer-react
|
|
77
74
|
|
|
78
|
-
- [#
|
|
75
|
+
- [#6708](https://github.com/primer/react/pull/6708) [`b7b8a36`](https://github.com/primer/react/commit/b7b8a36d14b3c5b6f9c289423691fe9285eae786) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx prop support from the Spinner component.
|
|
79
76
|
|
|
80
|
-
- [#
|
|
77
|
+
- [#6833](https://github.com/primer/react/pull/6833) [`5ad1e93`](https://github.com/primer/react/commit/5ad1e939c1ef494f7680b0753a4d7c6296e088d6) Thanks [@joshblack](https://github.com/joshblack)! - Remove sx support from Radio
|
|
81
78
|
|
|
82
|
-
- [#
|
|
79
|
+
- [#6841](https://github.com/primer/react/pull/6841) [`3e02e2c`](https://github.com/primer/react/commit/3e02e2c235a3633b646b8f2a493f3a23e17187bf) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from `deprecated/Pagehead`
|
|
83
80
|
|
|
84
|
-
- [#
|
|
81
|
+
- [#6692](https://github.com/primer/react/pull/6692) [`bb8d648`](https://github.com/primer/react/commit/bb8d648a42ec84e9baefae00fa87ede2be449e64) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx Props and BoxWithFallBack from Timeline component.
|
|
85
82
|
|
|
86
|
-
- [#
|
|
83
|
+
- [#6668](https://github.com/primer/react/pull/6668) [`acb6233`](https://github.com/primer/react/commit/acb6233fa0cf715d660ae222ebca9853115cb707) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Update UnderlineNav component to no longer support sx and remove Box usage from it.
|
|
87
84
|
|
|
88
|
-
- [#
|
|
85
|
+
- [#6835](https://github.com/primer/react/pull/6835) [`961c1c4`](https://github.com/primer/react/commit/961c1c48d942b9d8d81289a5d09d78f4d985f5da) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from `ButtonGroup`
|
|
89
86
|
|
|
90
|
-
- [#
|
|
87
|
+
- [#6834](https://github.com/primer/react/pull/6834) [`fa70b5e`](https://github.com/primer/react/commit/fa70b5eaae4c68ccac2bbfa44546ee85594a054a) Thanks [@joshblack](https://github.com/joshblack)! - Remove the `sx` prop from `Flash`
|
|
91
88
|
|
|
92
|
-
- [#
|
|
89
|
+
- [#6876](https://github.com/primer/react/pull/6876) [`2102252`](https://github.com/primer/react/commit/2102252ef34899bb37c52ca4df193ba5cca41a94) Thanks [@llastflowers](https://github.com/llastflowers)! - Update FilteredActionList and FilteredActionListLoaders components to no longer support sx
|
|
93
90
|
|
|
94
|
-
|
|
91
|
+
- [#6840](https://github.com/primer/react/pull/6840) [`aba8050`](https://github.com/primer/react/commit/aba8050ee9d324fa53a7b81d30b4f8dc7186c70a) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` prop from `deprecated/FilteredSearch`
|
|
95
92
|
|
|
96
|
-
- [#
|
|
93
|
+
- [#6685](https://github.com/primer/react/pull/6685) [`00261c9`](https://github.com/primer/react/commit/00261c934fe88a74ef310c3134fe202226156b4b) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove the sx prop from RadioGroup and Truncate.
|
|
97
94
|
|
|
98
|
-
- [#
|
|
95
|
+
- [#6878](https://github.com/primer/react/pull/6878) [`7081dd3`](https://github.com/primer/react/commit/7081dd3b45f7dae08f7a39038be95dbf20dd8a27) Thanks [@llastflowers](https://github.com/llastflowers)! - Update BaseStyles component to no longer support sx
|
|
99
96
|
|
|
100
|
-
- [#
|
|
101
|
-
@primer/styled-react: add Box component
|
|
97
|
+
- [#6679](https://github.com/primer/react/pull/6679) [`6158135`](https://github.com/primer/react/commit/6158135e42be9486bb7de35fbedf96e412b8a1d7) Thanks [@llastflowers](https://github.com/llastflowers)! - Update CounterLabel component to no longer support sx
|
|
102
98
|
|
|
103
|
-
- [#
|
|
99
|
+
- [#6827](https://github.com/primer/react/pull/6827) [`6843040`](https://github.com/primer/react/commit/6843040ad9b9810cb14f6186e53b01e83bed60f8) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for the sx prop from RelativeTime
|
|
104
100
|
|
|
105
|
-
- [#
|
|
101
|
+
- [#6813](https://github.com/primer/react/pull/6813) [`a1a4ad0`](https://github.com/primer/react/commit/a1a4ad00b87b489f6341aa818a9b8b8662fe2a82) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` prop for `InlineMessage`
|
|
106
102
|
|
|
107
|
-
- [#
|
|
103
|
+
- [#6866](https://github.com/primer/react/pull/6866) [`3237a4e`](https://github.com/primer/react/commit/3237a4e549779a2b3144b1f48974e533d28cca2a) Thanks [@francinelucca](https://github.com/francinelucca)! - chore(LinkButton): remove sx from LinkButton
|
|
108
104
|
|
|
109
|
-
- [#
|
|
105
|
+
- [#6655](https://github.com/primer/react/pull/6655) [`092185f`](https://github.com/primer/react/commit/092185f7b9d6c70296e629e03790676502b701e5) Thanks [@llastflowers](https://github.com/llastflowers)! - Update CheckboxGroup component to no longer support sx
|
|
110
106
|
|
|
111
|
-
- [#
|
|
107
|
+
- [#6654](https://github.com/primer/react/pull/6654) [`513cc3f`](https://github.com/primer/react/commit/513cc3feed5723632e54f07cae9d4397e3783fdc) Thanks [@llastflowers](https://github.com/llastflowers)! - Update Checkbox component to no longer support sx
|
|
112
108
|
|
|
113
|
-
- [#
|
|
109
|
+
- [#6837](https://github.com/primer/react/pull/6837) [`134f96e`](https://github.com/primer/react/commit/134f96e81476f829f2b0f0b44fa73cc1604983d5) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Update ProgressBar to no longer support sx
|
|
114
110
|
|
|
115
|
-
- [#
|
|
111
|
+
- [#6839](https://github.com/primer/react/pull/6839) [`32febac`](https://github.com/primer/react/commit/32febac10a887cce418abf6f4419cfb100a8f292) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from `Header`
|
|
116
112
|
|
|
117
|
-
- [#
|
|
113
|
+
- [#6871](https://github.com/primer/react/pull/6871) [`44b3d73`](https://github.com/primer/react/commit/44b3d732157048059681f3fdcb86c5d77a59aec5) Thanks [@joshblack](https://github.com/joshblack)! - Remove support for `sx` from `PageHeader`
|
|
118
114
|
|
|
119
|
-
- [#
|
|
115
|
+
- [#6863](https://github.com/primer/react/pull/6863) [`9614c0e`](https://github.com/primer/react/commit/9614c0eae7d77bdf879df474c44d613b673e6d4e) Thanks [@pksjce](https://github.com/pksjce)! - Remove Banner from experimental
|
|
120
116
|
|
|
121
|
-
- [#
|
|
117
|
+
- [#6754](https://github.com/primer/react/pull/6754) [`4d080aa`](https://github.com/primer/react/commit/4d080aa4c8718d2f4ab42c841cf2c8d252cdd19f) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Update Popover to no longer support sx
|
|
122
118
|
|
|
123
|
-
- [#
|
|
119
|
+
- [#6666](https://github.com/primer/react/pull/6666) [`71382dc`](https://github.com/primer/react/commit/71382dc5c0726f46a9da7823a9543334b7d0fcca) Thanks [@mperrotti](https://github.com/mperrotti)! - Removes styled-system usage from TextInputWrapper and related components and Storybook stories.
|
|
124
120
|
|
|
125
|
-
- [#
|
|
121
|
+
- [#6425](https://github.com/primer/react/pull/6425) [`e23d965`](https://github.com/primer/react/commit/e23d96524783863d92fc770a36c564b14098242b) Thanks [@joshblack](https://github.com/joshblack)! - Update @primer/react to only export ESM bundles
|
|
126
122
|
|
|
127
|
-
- [#
|
|
123
|
+
- [#6806](https://github.com/primer/react/pull/6806) [`9d13904`](https://github.com/primer/react/commit/9d13904037541d8f4f68d5d833f632304cace06e) Thanks [@joshblack](https://github.com/joshblack)! - Remove the `sx` prop from `Announce`, `AriaAlert`, and `AriaStatus`
|
|
128
124
|
|
|
129
|
-
- [#
|
|
125
|
+
- [#6741](https://github.com/primer/react/pull/6741) [`4896ef1`](https://github.com/primer/react/commit/4896ef1b541e47e5f6364c5eb0f7ab357594e456) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx prop support from the SegmentedControl component.
|
|
130
126
|
|
|
131
|
-
- [#
|
|
127
|
+
- [#6634](https://github.com/primer/react/pull/6634) [`d883432`](https://github.com/primer/react/commit/d883432010274cf87691a9affb0e012764b2cdae) Thanks [@TylerJDev](https://github.com/TylerJDev)! - CircleOcticon: Remove component `CircleOcticon`
|
|
132
128
|
|
|
133
|
-
- [#
|
|
129
|
+
- [#6713](https://github.com/primer/react/pull/6713) [`7d7b797`](https://github.com/primer/react/commit/7d7b797b7696af8dd9533e501f62f3666982307d) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Deprecate TextInputWithTokens component. The component has been moved to the deprecated entrypoint due to low usage and accessibility implications. Import from `@primer/react/deprecated` instead of `@primer/react`.
|
|
134
130
|
|
|
135
|
-
- [#
|
|
131
|
+
- [#6272](https://github.com/primer/react/pull/6272) [`d74d73e`](https://github.com/primer/react/commit/d74d73e413a9941cdc74c6f5a2cf6b1be9e7e8db) Thanks [@llastflowers](https://github.com/llastflowers)! - remove unused `contrast` from Select component
|
|
136
132
|
|
|
137
|
-
- [#
|
|
133
|
+
- [#6652](https://github.com/primer/react/pull/6652) [`c6d923f`](https://github.com/primer/react/commit/c6d923f93c0cb40453f1a9dab9209a9caeb87bce) Thanks [@llastflowers](https://github.com/llastflowers)! - Update AvatarStack component to no longer support sx
|
|
138
134
|
|
|
139
|
-
- [#
|
|
135
|
+
- [#6716](https://github.com/primer/react/pull/6716) [`e177d55`](https://github.com/primer/react/commit/e177d551730a30a0f3cddf97fb55ee1ca54c784a) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx prop support from the SelectPanel component.
|
|
140
136
|
|
|
141
|
-
- [#
|
|
137
|
+
- [#6737](https://github.com/primer/react/pull/6737) [`2d01fc4`](https://github.com/primer/react/commit/2d01fc4116ea5bf77dcaae4674aa80930ebe4917) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx prop support from the Select component.
|
|
142
138
|
|
|
143
|
-
- [#
|
|
139
|
+
- [#6706](https://github.com/primer/react/pull/6706) [`e3f26cc`](https://github.com/primer/react/commit/e3f26ccbcf40b38cea75f32970ddb23865d7b827) Thanks [@TylerJDev](https://github.com/TylerJDev)! - Deprecate CircleBadge component
|
|
144
140
|
|
|
145
|
-
- [#
|
|
141
|
+
- [#6676](https://github.com/primer/react/pull/6676) [`ab5ffb0`](https://github.com/primer/react/commit/ab5ffb00d6e54224542ee60bcc23915b0bb65b15) Thanks [@mperrotti](https://github.com/mperrotti)! - Removes styled-system and related utilities from Caret.tsx, IssueLabelToken.tsx, StateLabel.tsx, ToggleSwitch.tsx, and deprecated/ActionList/List.tsx
|
|
146
142
|
|
|
147
|
-
|
|
143
|
+
Removes WidthProps from ProgressBar.tsx
|
|
148
144
|
|
|
149
|
-
- [#
|
|
145
|
+
- [#6735](https://github.com/primer/react/pull/6735) [`45a52c1`](https://github.com/primer/react/commit/45a52c17cc72af52d123d7104b2d395cd2ca61c8) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Update SideNav component to no longer support sx.
|
|
150
146
|
|
|
151
|
-
- [#
|
|
147
|
+
- [#6682](https://github.com/primer/react/pull/6682) [`5bbaae7`](https://github.com/primer/react/commit/5bbaae78f732df2470c1ea7933863ef8a3f9681c) Thanks [@llastflowers](https://github.com/llastflowers)! - Update LabelGroup component to no longer support sx
|
|
152
148
|
|
|
153
|
-
- [#
|
|
149
|
+
- [#6680](https://github.com/primer/react/pull/6680) [`5c30443`](https://github.com/primer/react/commit/5c3044342cd2214bbd9d1d50a704d8789ca019d4) Thanks [@llastflowers](https://github.com/llastflowers)! - Update Details component to no longer support sx
|
|
154
150
|
|
|
155
|
-
- [#
|
|
151
|
+
- [#6625](https://github.com/primer/react/pull/6625) [`65ae375`](https://github.com/primer/react/commit/65ae3757c1828bb5db5b5dd24d4ce743c679cf28) Thanks [@llastflowers](https://github.com/llastflowers)! - Update BranchName component to no longer support sx
|
|
156
152
|
|
|
157
|
-
- [#
|
|
153
|
+
- [#6627](https://github.com/primer/react/pull/6627) [`6111046`](https://github.com/primer/react/commit/61110467f759c6680797c56d72deb9f86bba4dcd) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Update ToggleSwitch component to no longer support sx, add sx wrapper to @primer/styled-react.
|
|
158
154
|
|
|
159
|
-
- [#
|
|
155
|
+
- [#6607](https://github.com/primer/react/pull/6607) [`133d5a5`](https://github.com/primer/react/commit/133d5a5e74b85811d2bb8b536836d5c16680efe1) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove sx prop support from the VisuallyHidden component
|
|
160
156
|
|
|
161
|
-
- [#
|
|
157
|
+
- [#6622](https://github.com/primer/react/pull/6622) [`247b3f7`](https://github.com/primer/react/commit/247b3f75c49e16b883e8f0528a036fc62d274ee6) Thanks [@francinelucca](https://github.com/francinelucca)! - BREAKING CHANGE: remove AvatarToken
|
|
158
|
+
BREAKING CHANGE: make Caret component internal only
|
|
162
159
|
|
|
163
|
-
- [#
|
|
160
|
+
- [#6595](https://github.com/primer/react/pull/6595) [`de5a4b7`](https://github.com/primer/react/commit/de5a4b7297a44d0dd1ad175ea8d740f570bc27e6) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Remove AvatarPair component from codebase
|
|
164
161
|
|
|
165
|
-
- [#
|
|
162
|
+
- [#6656](https://github.com/primer/react/pull/6656) [`3a778b9`](https://github.com/primer/react/commit/3a778b97b93a0fe2c54f585d668cd70d30c0ca56) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Update StateLabel component to no longer support sx.
|
|
166
163
|
|
|
167
|
-
- [#
|
|
164
|
+
- [#6610](https://github.com/primer/react/pull/6610) [`65fc87d`](https://github.com/primer/react/commit/65fc87dc35652c5b228fc7e22d7644645ede2c89) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove sx prop support from the Stack component
|
|
168
165
|
|
|
169
|
-
- [#
|
|
166
|
+
- [#6613](https://github.com/primer/react/pull/6613) [`3ab94c5`](https://github.com/primer/react/commit/3ab94c5e8853855c8533c8403fd0d0203ab087d6) Thanks [@llastflowers](https://github.com/llastflowers)! - Update SplitPageLayout component to no longer support sx
|
|
170
167
|
|
|
171
|
-
- [#
|
|
168
|
+
- [#6602](https://github.com/primer/react/pull/6602) [`d6d25dc`](https://github.com/primer/react/commit/d6d25dc9263119103138156158f74b408d300dd2) Thanks [@jonrohan](https://github.com/jonrohan)! - Remove sx support from SubNav component
|
|
172
169
|
|
|
173
170
|
### Minor Changes
|
|
174
171
|
|
|
175
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - TreeView: Add trailing actions prop `secondaryActions`
|
|
176
|
-
|
|
177
172
|
- [#6979](https://github.com/primer/react/pull/6979) [`8b2632b`](https://github.com/primer/react/commit/8b2632ba63ef0fbd67d43e50df4a7ec6ea640e8e) Thanks [@TylerJDev](https://github.com/TylerJDev)! - ActionBar: Adds `ActionBar.Group` sub component
|
|
178
173
|
|
|
179
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - CircleOcticon: Deprecate component
|
|
180
|
-
|
|
181
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: add PortalContext
|
|
182
|
-
|
|
183
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - Tooltip: Add delay functionality to tooltips with the options of `instant` (default), `medium`, `long`
|
|
184
|
-
|
|
185
174
|
- [#7066](https://github.com/primer/react/pull/7066) [`c32f726`](https://github.com/primer/react/commit/c32f7260838e850df5efd839c23cf74bc519e3b7) Thanks [@adierkens](https://github.com/adierkens)! - Exports useAnchoredPosition utility
|
|
186
175
|
|
|
187
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(Label): Add missing ref for Label without sx prop
|
|
188
|
-
|
|
189
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - Add ProgressBarItemProps and ProgressBarItemProps type exports to @primer/react
|
|
190
|
-
|
|
191
176
|
- [#7045](https://github.com/primer/react/pull/7045) [`7595b8d`](https://github.com/primer/react/commit/7595b8d0d534043aeca69f0862a8ffd5c911c50c) Thanks [@langermank](https://github.com/langermank)! - Add new `Banner` `actionsLayout` prop to handle actions layout edge cases
|
|
192
177
|
|
|
193
178
|
- [#7033](https://github.com/primer/react/pull/7033) [`4c4c4cd`](https://github.com/primer/react/commit/4c4c4cd4bfd7d75066df199f47a23deb86a588f2) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Deprecate `leadingIcon` in favor of `leadingVisual` for `SegmentedControl.Button`.
|
|
194
179
|
|
|
195
180
|
- [#6976](https://github.com/primer/react/pull/6976) [`2ec5bf2`](https://github.com/primer/react/commit/2ec5bf2898a6966161a076f5896910bf1b1f4018) Thanks [@francinelucca](https://github.com/francinelucca)! - feat: support custom slots
|
|
196
181
|
|
|
197
|
-
- [#
|
|
182
|
+
- [#6919](https://github.com/primer/react/pull/6919) [`32e12c6`](https://github.com/primer/react/commit/32e12c690a53aef918e765d128f381c8f57bfd02) Thanks [@TylerJDev](https://github.com/TylerJDev)! - TreeView: Add `count` and `className` support for trailing actions
|
|
198
183
|
|
|
199
|
-
- [#
|
|
184
|
+
- [#6889](https://github.com/primer/react/pull/6889) [`9201d93`](https://github.com/primer/react/commit/9201d939056333945375c454999d853e0bbabf8f) Thanks [@broccolinisoup](https://github.com/broccolinisoup)! - Tooltip: Add delay functionality to tooltips with the options of `instant` (default), `medium`, `long`
|
|
200
185
|
|
|
201
|
-
- [#
|
|
186
|
+
- [#6937](https://github.com/primer/react/pull/6937) [`09ee0ea`](https://github.com/primer/react/commit/09ee0ea580ba6901d6e80cb35f7cc846db17197e) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: add styles to formcontrol and subcomponents
|
|
202
187
|
|
|
203
|
-
- [#
|
|
188
|
+
- [#6456](https://github.com/primer/react/pull/6456) [`fbd3ac7`](https://github.com/primer/react/commit/fbd3ac75a67b89635dcd28879a1b4a93cef70289) Thanks [@TylerJDev](https://github.com/TylerJDev)! - TreeView: Add trailing actions prop `secondaryActions`
|
|
204
189
|
|
|
205
|
-
- [#
|
|
190
|
+
- [#6855](https://github.com/primer/react/pull/6855) [`356a129`](https://github.com/primer/react/commit/356a129d2a1a0c02d9ca59280e7711e501c0d20d) Thanks [@cheshire137](https://github.com/cheshire137)! - Add buttonLabelOn and buttonLabelOff to ToggleSwitch
|
|
206
191
|
|
|
207
|
-
- [#
|
|
192
|
+
- [#6815](https://github.com/primer/react/pull/6815) [`2024709`](https://github.com/primer/react/commit/2024709eca73533c74ee042cb1524e78e495fba2) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: add PortalContext
|
|
208
193
|
|
|
209
|
-
- [#
|
|
194
|
+
- [#6709](https://github.com/primer/react/pull/6709) [`78784b3`](https://github.com/primer/react/commit/78784b3127acb844ec8a60d4a36141addb75d43d) Thanks [@pksjce](https://github.com/pksjce)! - Remove overflow property from popover (It has no usage)
|
|
210
195
|
|
|
211
|
-
- [#
|
|
196
|
+
- [#6721](https://github.com/primer/react/pull/6721) [`d6378c2`](https://github.com/primer/react/commit/d6378c246748403275ca17bc8aa7f713157ab1b7) Thanks [@cheshire137](https://github.com/cheshire137)! - Add count to SegmentedControlButton
|
|
212
197
|
|
|
213
|
-
|
|
198
|
+
- [#6843](https://github.com/primer/react/pull/6843) [`f082c77`](https://github.com/primer/react/commit/f082c77768526d9f97566a793e80a386cc0bc699) Thanks [@camchenry](https://github.com/camchenry)! - Allow changing initially focused button in ConfirmationDialog
|
|
214
199
|
|
|
215
|
-
- [#
|
|
200
|
+
- [#6726](https://github.com/primer/react/pull/6726) [`50c230f`](https://github.com/primer/react/commit/50c230f01b7e4b7c4664a676381737f995bf644e) Thanks [@joshblack](https://github.com/joshblack)! - Add ProgressBarItemProps and ProgressBarItemProps type exports to @primer/react
|
|
216
201
|
|
|
217
|
-
- [#
|
|
202
|
+
- [#6726](https://github.com/primer/react/pull/6726) [`50c230f`](https://github.com/primer/react/commit/50c230f01b7e4b7c4664a676381737f995bf644e) Thanks [@joshblack](https://github.com/joshblack)! - Add ToggleSwitchProps type to package exports
|
|
218
203
|
|
|
219
|
-
- [#
|
|
204
|
+
- [#6542](https://github.com/primer/react/pull/6542) [`f4ded58`](https://github.com/primer/react/commit/f4ded585c4f6188390cdc3243018fe63af310633) Thanks [@TylerJDev](https://github.com/TylerJDev)! - CircleOcticon: Deprecate component
|
|
220
205
|
|
|
221
|
-
- [#
|
|
206
|
+
- [#6535](https://github.com/primer/react/pull/6535) [`e6c7614`](https://github.com/primer/react/commit/e6c7614d7aaa420ce8518ad54af62e6409fea9dd) Thanks [@hussam-i-am](https://github.com/hussam-i-am)! - fix(Label): Add missing ref for Label without sx prop
|
|
222
207
|
|
|
223
|
-
- [#
|
|
208
|
+
- [#6468](https://github.com/primer/react/pull/6468) [`1f531cb`](https://github.com/primer/react/commit/1f531cb5c0fb87fc20ab8ce4321367d3f24ab734) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Deprecate AvatarPair component - move to @primer/react/deprecated
|
|
209
|
+
|
|
210
|
+
### Patch Changes
|
|
224
211
|
|
|
225
|
-
- [#
|
|
212
|
+
- [#6994](https://github.com/primer/react/pull/6994) [`701a9d0`](https://github.com/primer/react/commit/701a9d02cc5958bdeb12d63bbc169c5d40bd26e6) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: prevent slot rewrite on CheckboxOrRadioGroup subcomponents
|
|
213
|
+
|
|
214
|
+
- [#6984](https://github.com/primer/react/pull/6984) [`a3765c2`](https://github.com/primer/react/commit/a3765c2e6c7d23972cdeeb8e206d802678f0d832) Thanks [@mperrotti](https://github.com/mperrotti)! - Fixes vertical alignment of prev/next pagination chevrons
|
|
226
215
|
|
|
227
216
|
- [#7014](https://github.com/primer/react/pull/7014) [`a108ab9`](https://github.com/primer/react/commit/a108ab92fa71af83f7da1ee9a311bc272568cfb3) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: remove useTheme from IssueLabel
|
|
228
217
|
|
|
@@ -232,87 +221,93 @@
|
|
|
232
221
|
|
|
233
222
|
- [#7008](https://github.com/primer/react/pull/7008) [`ca6d60d`](https://github.com/primer/react/commit/ca6d60d37dcdaec354bbdd097fd8c656971e752b) Thanks [@langermank](https://github.com/langermank)! - Use primitives for Button line-height
|
|
234
223
|
|
|
235
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - Breadcrumbs : Add overflow menu for responsive behavior
|
|
236
|
-
|
|
237
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - Add missing CSS for `KeybindingHint`
|
|
238
|
-
|
|
239
224
|
- [#6877](https://github.com/primer/react/pull/6877) [`860ac93`](https://github.com/primer/react/commit/860ac93dcdff0ba6f05cac1b5137721a9b34dfcb) Thanks [@mperrotti](https://github.com/mperrotti)! - In `ActionBar`, `aria-label` now gets added to the `role="toolbar"` element.
|
|
240
225
|
|
|
241
226
|
- [#7017](https://github.com/primer/react/pull/7017) [`2fd6c82`](https://github.com/primer/react/commit/2fd6c82e327db24b63cf604465b4192b0d29d8a9) Thanks [@langermank](https://github.com/langermank)! - update token close button sizing
|
|
242
227
|
|
|
243
|
-
- [#7050](https://github.com/primer/react/pull/7050) [`bf3ed17`](https://github.com/primer/react/commit/bf3ed17a9c6935ffcca9e50f1e1129c2984bfb40) Thanks [@francinelucca](https://github.com/francinelucca)! - chore(FilteredActionList): fix className override
|
|
244
|
-
|
|
245
228
|
- [#7000](https://github.com/primer/react/pull/7000) [`34e7fa8`](https://github.com/primer/react/commit/34e7fa8cd88684c16d17e997aa7ef69d40b50340) Thanks [@pksjce](https://github.com/pksjce)! - Add gap prop to ActionBar for customizable spacing between items
|
|
246
229
|
|
|
247
|
-
- [#
|
|
230
|
+
- [#6959](https://github.com/primer/react/pull/6959) [`76f1ca3`](https://github.com/primer/react/commit/76f1ca32a9303b18a2084c4e11c4699963b88e4e) Thanks [@francinelucca](https://github.com/francinelucca)! - chore(AvatarStack, CheckboxOrRadioGroup, UnstyledTextInput): cleanup remaining sx props
|
|
248
231
|
|
|
249
|
-
- [#
|
|
232
|
+
- [#6973](https://github.com/primer/react/pull/6973) [`a3f7ea9`](https://github.com/primer/react/commit/a3f7ea96514d4ba0a2d28aeb26e49eaafb8bf474) Thanks [@jonrohan](https://github.com/jonrohan)! - fix(AnchoredOverlay): Omit aria-label and aria-labelledby from renderAnchor props
|
|
250
233
|
|
|
251
|
-
- [#
|
|
234
|
+
- [#7046](https://github.com/primer/react/pull/7046) [`4ffe66d`](https://github.com/primer/react/commit/4ffe66d0d87c5ab8a3c0d9ef4e9ba571e6d57393) Thanks [@pksjce](https://github.com/pksjce)! - Fix: ActionMenu with overflow contains scrollbars within its rounded border
|
|
252
235
|
|
|
253
|
-
- [#
|
|
236
|
+
- [#6996](https://github.com/primer/react/pull/6996) [`173f76d`](https://github.com/primer/react/commit/173f76d917a688515ae36f2240bf5461db5eda0c) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: add missing slot checks to CheckboxOrRadioGroup, SelectPanel, ActionMenu, Treeview, SegmentedControl and PageHeader
|
|
254
237
|
|
|
255
|
-
- [#
|
|
238
|
+
- [#6954](https://github.com/primer/react/pull/6954) [`7dd483f`](https://github.com/primer/react/commit/7dd483f74e2a75e5c0a44f46a860afc2bdf0da9a) Thanks [@langermank](https://github.com/langermank)! - Adjust ConfirmationDialog heading styling
|
|
256
239
|
|
|
257
|
-
- [#
|
|
240
|
+
- [#7007](https://github.com/primer/react/pull/7007) [`96968a2`](https://github.com/primer/react/commit/96968a28c1ddb2c31cb3e2f0e2e6297c1ee8df97) Thanks [@mperrotti](https://github.com/mperrotti)! - Corrects bg color of disabled indeterminate checkbox
|
|
258
241
|
|
|
259
|
-
- [#
|
|
242
|
+
- [#7019](https://github.com/primer/react/pull/7019) [`4308179`](https://github.com/primer/react/commit/43081799465d5e4d66a0d761406a2ab64fb27d91) Thanks [@francinelucca](https://github.com/francinelucca)! - add missing isSlot checks
|
|
260
243
|
|
|
261
|
-
- [#
|
|
244
|
+
- [#6982](https://github.com/primer/react/pull/6982) [`3c32e7e`](https://github.com/primer/react/commit/3c32e7e162ae9a5f66c068639934cc55c01cca72) Thanks [@mperrotti](https://github.com/mperrotti)! - Uses correct bg color for disabled ToggleSwitch knob
|
|
262
245
|
|
|
263
|
-
- [#
|
|
246
|
+
- [#6935](https://github.com/primer/react/pull/6935) [`8641c7a`](https://github.com/primer/react/commit/8641c7a778f88c9f65fa1f3d2c40994468651ae7) Thanks [@JelloBagel](https://github.com/JelloBagel)! - Fix overflow calculations of more menu button in action bar
|
|
264
247
|
|
|
265
|
-
- [#
|
|
248
|
+
- [#6925](https://github.com/primer/react/pull/6925) [`ecc81b5`](https://github.com/primer/react/commit/ecc81b569b421a4181b0a2f4cdff9cfe60fe28fd) Thanks [@francinelucca](https://github.com/francinelucca)! - chore(TextInput): remove sx
|
|
266
249
|
|
|
267
|
-
- [#
|
|
250
|
+
- [#7030](https://github.com/primer/react/pull/7030) [`52d6cf7`](https://github.com/primer/react/commit/52d6cf7e7cc2a0f4ea3186ee61412a2a2549b530) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(SelectPanel): remove hidden attribute from selection Radio
|
|
268
251
|
|
|
269
|
-
- [#
|
|
252
|
+
- [#6958](https://github.com/primer/react/pull/6958) [`3032026`](https://github.com/primer/react/commit/30320263482baf9d2c634ec27122c9a42ece308a) Thanks [@siddharthkp](https://github.com/siddharthkp)! - @primer/react: Export `useId` and `useSyncedState`
|
|
270
253
|
|
|
271
|
-
- [#
|
|
254
|
+
- [#6980](https://github.com/primer/react/pull/6980) [`4b84948`](https://github.com/primer/react/commit/4b849489b123636209d6dd71b0fe66fbe7963bdb) Thanks [@TylerJDev](https://github.com/TylerJDev)! - ActionBar: Supplies `aria-label` to toolbar inside of `ActionBar`
|
|
272
255
|
|
|
273
|
-
- [#
|
|
256
|
+
- [#7048](https://github.com/primer/react/pull/7048) [`f4a92f6`](https://github.com/primer/react/commit/f4a92f6d5fab8aee0bebb0b3bd8a400d55dc6cc7) Thanks [@langermank](https://github.com/langermank)! - Adjust Breadcrumb item focus outline
|
|
274
257
|
|
|
275
|
-
- [
|
|
258
|
+
- [`4378ee8`](https://github.com/primer/react/commit/4378ee84442de8d75fbb34fcce48e28c09429c5c) Thanks [@langermank](https://github.com/langermank)! - Add missing CSS for `KeybindingHint`
|
|
276
259
|
|
|
277
|
-
- [#
|
|
260
|
+
- [#6900](https://github.com/primer/react/pull/6900) [`e3e601c`](https://github.com/primer/react/commit/e3e601c545967eb79fb7bc752c8895b93fda620e) Thanks [@francinelucca](https://github.com/francinelucca)! - fix(SelectPanel): do not bubble up keyboard events
|
|
278
261
|
|
|
279
|
-
- [#
|
|
280
|
-
@primer/react: add missing isSlot checks
|
|
262
|
+
- [#6673](https://github.com/primer/react/pull/6673) [`19befd6`](https://github.com/primer/react/commit/19befd66b801532bb0ef85e60296c73d8c747fc5) Thanks [@llastflowers](https://github.com/llastflowers)! - Remove support for `sx` from `CircleBadge` component
|
|
281
263
|
|
|
282
|
-
- [#
|
|
264
|
+
- [#6908](https://github.com/primer/react/pull/6908) [`af288e6`](https://github.com/primer/react/commit/af288e632c042c5e82aae6ee2bd5107e8be2b9ec) Thanks [@llastflowers](https://github.com/llastflowers)! - update FormControl ValidationIcon position
|
|
283
265
|
|
|
284
|
-
- [#
|
|
266
|
+
- [#6931](https://github.com/primer/react/pull/6931) [`d5c5ecf`](https://github.com/primer/react/commit/d5c5ecf17a40571976d7974d3b57158455afec38) Thanks [@francinelucca](https://github.com/francinelucca)! - use UnderlinePanels.Tab, UnderlinePanels.Panel from @primer/react
|
|
285
267
|
|
|
286
|
-
- [#
|
|
268
|
+
- [#6905](https://github.com/primer/react/pull/6905) [`1cb348f`](https://github.com/primer/react/commit/1cb348f079dffcf10bdf422b1e14e0a29fa4662d) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Replace StateLabel color with new draft token
|
|
287
269
|
|
|
288
|
-
- [#
|
|
270
|
+
- [#6927](https://github.com/primer/react/pull/6927) [`913739d`](https://github.com/primer/react/commit/913739dfe4b7d8f4f5829157e200bd538e509e74) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Link: Adjust text-decoration-offset
|
|
289
271
|
|
|
290
|
-
- [#
|
|
272
|
+
- [#6829](https://github.com/primer/react/pull/6829) [`b568765`](https://github.com/primer/react/commit/b568765159a22fefbb2e521947a6c99109cb6f19) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: fix ActionBar gap issue
|
|
291
273
|
|
|
292
|
-
- [#
|
|
274
|
+
- [#6879](https://github.com/primer/react/pull/6879) [`c8fc6b8`](https://github.com/primer/react/commit/c8fc6b81d61834ab143a578b379d7dcc49e17d62) Thanks [@francinelucca](https://github.com/francinelucca)! - chore(FilteredActionList): fix className override
|
|
293
275
|
|
|
294
|
-
- [#
|
|
276
|
+
- [#6896](https://github.com/primer/react/pull/6896) [`5c29b01`](https://github.com/primer/react/commit/5c29b010db51e85c387963aee45ee97f12aae7ef) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Fix typing issues in PageHeader exports.
|
|
295
277
|
|
|
296
|
-
- [#
|
|
278
|
+
- [#6881](https://github.com/primer/react/pull/6881) [`8d52362`](https://github.com/primer/react/commit/8d523624366dda9cbb5c200560ffcf9b91f57655) Thanks [@langermank](https://github.com/langermank)! - Implement forced colors for progress bar
|
|
297
279
|
|
|
298
|
-
- [#
|
|
280
|
+
- [#6854](https://github.com/primer/react/pull/6854) [`dd8eeed`](https://github.com/primer/react/commit/dd8eeeddb39a7afbdd38d3df8f0568f176e5d4de) Thanks [@pksjce](https://github.com/pksjce)! - Breadcrumbs: Fix esc button not being able to focus on the menubuttonRef
|
|
299
281
|
|
|
300
|
-
- [#
|
|
301
|
-
@primer/styled-react: Add `ThemeProvider` and `BaseStyles`
|
|
282
|
+
- [#6669](https://github.com/primer/react/pull/6669) [`627cc4b`](https://github.com/primer/react/commit/627cc4bc2663cc50a6b21cf6ec8b8e99b7b260bb) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: use Banner instead of custom implementation for SelectPanel notice
|
|
302
283
|
|
|
303
|
-
- [#
|
|
284
|
+
- [#6664](https://github.com/primer/react/pull/6664) [`2910207`](https://github.com/primer/react/commit/2910207766bf6d7168ce356f401d99d26538c496) Thanks [@pksjce](https://github.com/pksjce)! - Breadcrumbs : Add overflow menu for responsive behavior
|
|
304
285
|
|
|
305
|
-
- [#
|
|
286
|
+
- [#6664](https://github.com/primer/react/pull/6664) [`2910207`](https://github.com/primer/react/commit/2910207766bf6d7168ce356f401d99d26538c496) Thanks [@pksjce](https://github.com/pksjce)! - Breadcrumb overflow styling
|
|
306
287
|
|
|
307
|
-
- [#
|
|
288
|
+
- [#6846](https://github.com/primer/react/pull/6846) [`37ce4aa`](https://github.com/primer/react/commit/37ce4aaf2830fbe0423e0d7546dfdad6e21ac398) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds `sx` prop back to TextInput
|
|
308
289
|
|
|
309
|
-
- [#
|
|
290
|
+
- [#6701](https://github.com/primer/react/pull/6701) [`1aa7404`](https://github.com/primer/react/commit/1aa7404f4070244083b9b05394921cda4dfe31c6) Thanks [@pksjce](https://github.com/pksjce)! - Banner: Should prefer aria-labelled-by over aria-label
|
|
310
291
|
|
|
311
|
-
- [#
|
|
292
|
+
- [#6715](https://github.com/primer/react/pull/6715) [`6def61e`](https://github.com/primer/react/commit/6def61e2286df882b5f15e329c801acd5bd29595) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - Remove sx from the SkeletonBox component.
|
|
312
293
|
|
|
313
|
-
- [#
|
|
294
|
+
- [#6750](https://github.com/primer/react/pull/6750) [`0077b96`](https://github.com/primer/react/commit/0077b968f45fad50cb7abe52bd0cb442504279c2) Thanks [@pksjce](https://github.com/pksjce)! - v38: Make sure Banner is exported from main and experimental
|
|
314
295
|
|
|
315
|
-
- [#
|
|
296
|
+
- [#6751](https://github.com/primer/react/pull/6751) [`c8f3879`](https://github.com/primer/react/commit/c8f3879b0ce184c785573bfccd84aef0b8ef54ef) Thanks [@pksjce](https://github.com/pksjce)! - v38: Move pointerbox to deprecated still maintaining the main export
|
|
297
|
+
|
|
298
|
+
- [#6592](https://github.com/primer/react/pull/6592) [`bdac258`](https://github.com/primer/react/commit/bdac258a6f610da974ef4b8c25ccef876946fc79) Thanks [@langermank](https://github.com/langermank)! - Add support for `loading` footer buttons in ConfirmationDialog
|
|
299
|
+
|
|
300
|
+
- [#6509](https://github.com/primer/react/pull/6509) [`3b3cf52`](https://github.com/primer/react/commit/3b3cf52f267da4f44123032bf388dc5ff9f61cf8) Thanks [@joshblack](https://github.com/joshblack)! - Update layout for Banner to address extra spacing below description when no actions are included
|
|
301
|
+
|
|
302
|
+
- [#6431](https://github.com/primer/react/pull/6431) [`0c21301`](https://github.com/primer/react/commit/0c21301ba0c7b1d0272258f8fe59026beab83c95) Thanks [@langermank](https://github.com/langermank)! - Add `border` and `background-color` tokens to `ProgressBar` CSS, which increases contrast for high contrast themes
|
|
303
|
+
|
|
304
|
+
- [#6603](https://github.com/primer/react/pull/6603) [`f781f7f`](https://github.com/primer/react/commit/f781f7f5434be4c482a8f7819c73c258b93604ce) Thanks [@langermank](https://github.com/langermank)! - Only show focus outline for `Radio` if `focus-visible`
|
|
305
|
+
|
|
306
|
+
- [#6604](https://github.com/primer/react/pull/6604) [`77a60e7`](https://github.com/primer/react/commit/77a60e7775987ee05b07cd8235ff4a26230b12e2) Thanks [@joshblack](https://github.com/joshblack)! - Add @github/mini-throttle as dependency to project to help with bundle output
|
|
307
|
+
|
|
308
|
+
- [#6478](https://github.com/primer/react/pull/6478) [`77c8739`](https://github.com/primer/react/commit/77c873936b195915c3f364d01a5b1bb15b0ac1a0) Thanks [@llastflowers](https://github.com/llastflowers)! - Update Select component to correctly pass className to TextInputWraper for styling purposes
|
|
309
|
+
|
|
310
|
+
- [#6429](https://github.com/primer/react/pull/6429) [`661eae0`](https://github.com/primer/react/commit/661eae0a28ee99228400e6c99a483af0523beeb8) Thanks [@devinmcinnis](https://github.com/devinmcinnis)! - Anchor elements render as interactive elements in TokenBase
|
|
316
311
|
|
|
317
312
|
## 38.0.0-rc.9
|
|
318
313
|
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot-1zlEO{--region-order-header:0;--region-order-pane-start:1;--region-order-content:2;--region-order-pane-end:3;--region-order-footer:4;--spacing-none:0;--spacing-condensed:var(--base-size-16,1rem);--spacing-normal:var(--base-size-16,1rem)}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:100%;--pane-width-medium:100%;--pane-width-large:100%;--pane-max-width-diff:511px}@media screen and (min-width:768px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing:0;--spacing-row:0;--spacing-column:0;--spacing-divider:0;--offset-header:0;--pane-width:0;--pane-min-width:0;--pane-max-width:0;--pane-width-custom:0;--pane-width-size:0;padding:var(--spacing)}.prc-PageLayout-PageLayoutWrapper-s2ao4{display:flex;flex-wrap:wrap;height:100%;margin-left:auto;margin-right:auto;width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-jzDMn{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}@media screen and (min-width:768px){.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-4A4Qm{height:100%;position:relative}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}.prc-PageLayout-Header-mQXK1{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-HeaderContent-dVIQb{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-bofyb{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-b-QRo{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;flex-shrink:1;min-width:1px;order:var(--region-order-content)}.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden=true]){display:none}.prc-PageLayout-Content--F7-I{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content--F7-I:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content--F7-I:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content--F7-I:where([data-width=full]){max-width:100%}.prc-PageLayout-Content--F7-I:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-nGO0U{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}@media screen and (min-width:768px){.prc-PageLayout-PaneWrapper-nGO0U{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-nGO0U:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column)}}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=end]){margin-right:var(--spacing)}.prc-PageLayout-Pane-Vl5LI{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI{overflow:auto}}.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=end]){margin-bottom:var(--spacing)}.prc-PageLayout-FooterWrapper-WZwgZ{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterHorizontalDivider-sNLmj{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-UFWGW{padding:var(--spacing)}.prc-PageLayout-DraggableHandle-zPw82{background-color:transparent;cursor:col-resize;inset:0 -2px;position:absolute;transition-delay:.1s}.prc-PageLayout-DraggableHandle-zPw82:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle))}.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true],.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true]:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis))}
|
|
2
|
+
/*# sourceMappingURL=PageLayout-1849f083.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/PageLayout/PageLayout.module.css"],"names":[],"mappings":"AAEA,qCACE,iBACF,CAIA,uCACE,wBAAiB,CAAjB,gBACF,CAEA,qCAEE,uBAAwB,CACxB,2BAA4B,CAC5B,wBAAyB,CACzB,yBAA0B,CAC1B,uBAAwB,CAGxB,gBAAiB,CACjB,4CAAwC,CACxC,yCA0CF,CAxCE,qCAbF,qCAcI,2CAuCJ,CAtCE,CAfF,qCAkBE,uBAAwB,CACxB,wBAAyB,CACzB,uBAAwB,CACxB,2BAgCF,CA9BE,oCAvBF,qCAwBI,wBAAyB,CACzB,yBAA0B,CAC1B,wBA2BJ,CA1BE,CAEA,qCA7BF,qCA8BI,wBAAyB,CACzB,yBAA0B,CAC1B,wBAqBJ,CApBE,CAEA,qCAnCF,qCAoCI,2BAiBJ,CAhBE,CArCF,qCAwCE,WAAY,CACZ,eAAgB,CAChB,kBAAmB,CACnB,mBAAoB,CACpB,iBAAkB,CAClB,cAAe,CACf,kBAAmB,CACnB,kBAAmB,CACnB,qBAAsB,CACtB,mBAAoB,CAGpB,sBACF,CAEA,wCACE,YAAa,CAGb,cAAe,CAGf,WAAY,CAJZ,gBAAiB,CADjB,iBAAkB,CAIlB,UAkBF,CAfE,mEACE,eACF,CAEA,kEACE,gBACF,CAEA,iEACE,cACF,CAEA,mEACE,gBACF,CAGF,wCACE,YAAa,CACb,aAAc,CACd,cAAe,CACf,cACF,CAEA,wCAIE,2CAA8C,CAF9C,4CA6BF,CAzBE,mEACE,YACF,CAEA,mEAIE,uEAA4C,CAH5C,aAAc,CACd,UAGF,CAEA,qEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,+BAMF,CAEA,oCA3BF,wCA6BI,uBAAyB,CADzB,wBAGJ,CADE,CAGF,sCAEE,WAAY,CADZ,iBAuBF,CApBE,iEACE,YACF,CAEA,iEAIE,uEAA4C,CAH5C,aAAc,CACd,SAGF,CAEA,mEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,8BAMF,CAGF,6BAGE,4BAA6B,CAF7B,UAGF,CAEA,oCAEE,sBACF,CAEA,8CAEE,yBACF,CAEA,qCACE,YAAa,CAUb,YAAa,CANb,qBAAsB,CAOtB,WAAY,CACZ,aAAc,CATd,aAAc,CAEd,iCAYF,CAHE,kEACE,YACF,CAGF,8BAOE,WAAY,CADZ,gBAAiB,CADjB,iBAAkB,CADlB,sBAAuB,CAHvB,UAuBF,CAfE,yDACE,eACF,CAEA,wDACE,gBACF,CAEA,uDACE,cACF,CAEA,yDACE,gBACF,CAGF,kCACE,YAAa,CAGb,aAAc,CADd,cAAe,CADf,UA8CF,CA1CE,+DACE,YACF,CAEA,6DAGE,qBAAsB,CADtB,6BAA8B,CAE9B,kCACF,CAEA,+DAGE,6BAA8B,CAD9B,gCAAiC,CAEjC,oCACF,CAEA,oCAxBF,kCA2BI,yBAA2B,CAD3B,sBAAwB,CADxB,UAuBJ,CAnBI,uDAIE,gBAAiB,CAHjB,eAAgB,CAEhB,wBAEF,CAEA,6DAGE,0BAA2B,CAD3B,iCAEF,CAEA,+DAGE,kBAAmB,CADnB,kCAEF,CACF,CAIA,uEAEE,0BACF,CAEA,qEAEE,2BACF,CAGF,2BAGE,sBAAuB,CAFvB,4BAeF,CAXE,oCALF,2BAMI,aAUJ,CATE,CAEA,mDACE,UAKF,CAHE,oCAHF,mDAII,0EAEJ,CADE,CAKF,yEAEE,yBACF,CAEA,uEAEE,4BACF,CAGF,oCAKE,yBAA0B,CAH1B,gCAAiC,CADjC,UAKF,CAEA,8CAEE,4BACF,CAEA,oCAEE,sBACF,CAEA,sCAIE,4BAA6B,CAD7B,iBAAkB,CADlB,YAAa,CADb,iBAAkB,CAIlB,oBACF,CAEA,4CACE,yEACF,CAMA,0HACE,4EACF","file":"PageLayout-1849f083.css","sourcesContent":["/* Maintain resize cursor while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] {\n cursor: col-resize;\n}\n\n/* Disable text selection while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] * {\n user-select: none;\n}\n\n.PageLayoutRoot {\n /* Region Order */\n --region-order-header: 0;\n --region-order-pane-start: 1;\n --region-order-content: 2;\n --region-order-pane-end: 3;\n --region-order-footer: 4;\n\n /* Spacing Values */\n --spacing-none: 0;\n --spacing-condensed: var(--base-size-16);\n --spacing-normal: var(--base-size-16);\n\n @media screen and (min-width: 1012px) {\n --spacing-normal: var(--base-size-24);\n }\n\n /* Pane Width Values */\n --pane-width-small: 100%;\n --pane-width-medium: 100%;\n --pane-width-large: 100%;\n --pane-max-width-diff: 511px;\n\n @media screen and (min-width: 768px) {\n --pane-width-small: 240px;\n --pane-width-medium: 256px;\n --pane-width-large: 256px;\n }\n\n @media screen and (min-width: 1012px) {\n --pane-width-small: 256px;\n --pane-width-medium: 296px;\n --pane-width-large: 320px;\n }\n\n @media screen and (min-width: 1280px) {\n --pane-max-width-diff: 959px;\n }\n\n /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n --spacing: 0;\n --spacing-row: 0;\n --spacing-column: 0;\n --spacing-divider: 0;\n --offset-header: 0;\n --pane-width: 0;\n --pane-min-width: 0;\n --pane-max-width: 0;\n --pane-width-custom: 0;\n --pane-width-size: 0;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n display: flex;\n margin-right: auto;\n margin-left: auto;\n flex-wrap: wrap;\n /* the wrapper should match the Root's dimensions by default */\n width: 100%;\n height: 100%;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PageLayoutContent {\n display: flex;\n flex: 1 1 100%;\n flex-wrap: wrap;\n max-width: 100%;\n}\n\n.HorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: calc(-1 * var(--spacing-divider));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: calc(-1 * var(--spacing-divider));\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n\n @media screen and (min-width: 768px) {\n margin-right: 0 !important;\n margin-left: 0 !important;\n }\n}\n\n.VerticalDivider {\n position: relative;\n height: 100%;\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n}\n\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.HeaderContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.HeaderHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.ContentWrapper {\n display: flex;\n\n /* Hack to prevent overflowing content from pushing the pane region to the next line */\n min-width: 1px;\n flex-direction: column;\n order: var(--region-order-content);\n\n /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.\n Without this, the content region could wrap onto a different line\n than the pane region on wide viewports if its contents are too wide. */\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n}\n\n.Content {\n width: 100%;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n margin-right: auto;\n margin-left: auto;\n flex-grow: 1;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PaneWrapper {\n display: flex;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n\n @media screen and (min-width: 768px) {\n width: auto;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n\n &:where([data-sticky]) {\n position: sticky;\n /* stylelint-disable-next-line primer/spacing */\n top: var(--offset-header);\n max-height: 100vh;\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n }\n }\n}\n\n.PaneVerticalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n }\n}\n\n.Pane {\n width: var(--pane-width-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n\n @media screen and (min-width: 768px) {\n overflow: auto;\n }\n\n &:where([data-resizable]) {\n width: 100%;\n\n @media screen and (min-width: 768px) {\n width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));\n }\n }\n}\n\n.PaneHorizontalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n }\n}\n\n.FooterWrapper {\n width: 100%;\n order: var(--region-order-footer);\n\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.FooterHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.FooterContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n background-color: transparent;\n transition-delay: 0.1s;\n}\n\n.DraggableHandle:hover {\n background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n background-color: var(--bgColor-accent-emphasis);\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n background-color: var(--bgColor-accent-emphasis);\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './PageLayout-
|
|
1
|
+
import './PageLayout-1849f083.css';
|
|
2
2
|
|
|
3
3
|
var classes = {"PageLayoutRoot":"prc-PageLayout-PageLayoutRoot-1zlEO","PageLayoutWrapper":"prc-PageLayout-PageLayoutWrapper-s2ao4","PageLayoutContent":"prc-PageLayout-PageLayoutContent-jzDMn","HorizontalDivider":"prc-PageLayout-HorizontalDivider-CYLp5","VerticalDivider":"prc-PageLayout-VerticalDivider-4A4Qm","Header":"prc-PageLayout-Header-mQXK1","HeaderContent":"prc-PageLayout-HeaderContent-dVIQb","HeaderHorizontalDivider":"prc-PageLayout-HeaderHorizontalDivider-bofyb","ContentWrapper":"prc-PageLayout-ContentWrapper-b-QRo","Content":"prc-PageLayout-Content--F7-I","PaneWrapper":"prc-PageLayout-PaneWrapper-nGO0U","PaneVerticalDivider":"prc-PageLayout-PaneVerticalDivider-1c9vy","Pane":"prc-PageLayout-Pane-Vl5LI","PaneHorizontalDivider":"prc-PageLayout-PaneHorizontalDivider-4exOb","FooterWrapper":"prc-PageLayout-FooterWrapper-WZwgZ","FooterHorizontalDivider":"prc-PageLayout-FooterHorizontalDivider-sNLmj","FooterContent":"prc-PageLayout-FooterContent-UFWGW","DraggableHandle":"prc-PageLayout-DraggableHandle-zPw82"};
|
|
4
4
|
|
|
@@ -15,6 +15,8 @@ export type PopoverContentProps = {
|
|
|
15
15
|
width?: 'xsmall' | 'small' | 'large' | 'medium' | 'auto' | 'xlarge';
|
|
16
16
|
height?: 'small' | 'large' | 'medium' | 'auto' | 'xlarge' | 'fit-content';
|
|
17
17
|
overflow?: 'auto' | 'hidden' | 'scroll' | 'visible';
|
|
18
|
+
onClickOutside?: (event: MouseEvent | TouchEvent) => void;
|
|
19
|
+
ignoreClickRefs?: React.RefObject<HTMLElement>[];
|
|
18
20
|
} & HTMLProps<HTMLDivElement>;
|
|
19
21
|
declare const _default: React.ForwardRefExoticComponent<Omit<PopoverProps, "ref"> & React.RefAttributes<HTMLDivElement>> & {
|
|
20
22
|
Content: React.FC<React.PropsWithChildren<PopoverContentProps>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,
|
|
1
|
+
{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAA;AACpC,OAAO,KAAe,MAAM,OAAO,CAAA;AAMnC,KAAK,aAAa,GACd,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,aAAa,GACb,UAAU,GACV,cAAc,GACd,WAAW,CAAA;AAEf,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,kBAAkB,GACpB,SAAS,CAAC,cAAc,CAAC,CAAA;AAmB3B,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;IACnE,MAAM,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,aAAa,CAAA;IACzE,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;IAInD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAA;IAIzD,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAA;CACjD,GAAG,SAAS,CAAC,cAAc,CAAC,CAAA;;;;AAiC7B,wBAAgE"}
|
package/dist/Popover/Popover.js
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
2
|
import { clsx } from 'clsx';
|
|
3
3
|
import classes from './Popover.module.css.js';
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { useRef } from 'react';
|
|
5
5
|
import { jsx } from 'react/jsx-runtime';
|
|
6
|
+
import { useOnOutsideClick } from '../hooks/useOnOutsideClick.js';
|
|
6
7
|
|
|
8
|
+
const EMPTY_IGNORE_CLICK_REFS = [];
|
|
7
9
|
const Popover = /*#__PURE__*/React.forwardRef(function Popover(t0, forwardRef) {
|
|
8
10
|
const $ = c(15);
|
|
9
11
|
let className;
|
|
@@ -67,8 +69,11 @@ const Popover = /*#__PURE__*/React.forwardRef(function Popover(t0, forwardRef) {
|
|
|
67
69
|
});
|
|
68
70
|
Popover.displayName = 'Popover';
|
|
69
71
|
const PopoverContent = t0 => {
|
|
70
|
-
|
|
72
|
+
var _onClickOutside, _ignoreClickRefs;
|
|
73
|
+
const $ = c(17);
|
|
71
74
|
let className;
|
|
75
|
+
let ignoreClickRefs;
|
|
76
|
+
let onClickOutside;
|
|
72
77
|
let props;
|
|
73
78
|
let t1;
|
|
74
79
|
let t2;
|
|
@@ -77,50 +82,75 @@ const PopoverContent = t0 => {
|
|
|
77
82
|
className,
|
|
78
83
|
width: t1,
|
|
79
84
|
height: t2,
|
|
85
|
+
onClickOutside,
|
|
86
|
+
ignoreClickRefs,
|
|
80
87
|
...props
|
|
81
88
|
} = t0);
|
|
82
89
|
$[0] = t0;
|
|
83
90
|
$[1] = className;
|
|
84
|
-
$[2] =
|
|
85
|
-
$[3] =
|
|
86
|
-
$[4] =
|
|
91
|
+
$[2] = ignoreClickRefs;
|
|
92
|
+
$[3] = onClickOutside;
|
|
93
|
+
$[4] = props;
|
|
94
|
+
$[5] = t1;
|
|
95
|
+
$[6] = t2;
|
|
87
96
|
} else {
|
|
88
97
|
className = $[1];
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
98
|
+
ignoreClickRefs = $[2];
|
|
99
|
+
onClickOutside = $[3];
|
|
100
|
+
props = $[4];
|
|
101
|
+
t1 = $[5];
|
|
102
|
+
t2 = $[6];
|
|
92
103
|
}
|
|
93
104
|
const width = t1 === undefined ? "small" : t1;
|
|
94
105
|
const height = t2 === undefined ? "fit-content" : t2;
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
106
|
+
const divRef = useRef(null);
|
|
107
|
+
const outsideClickHandler = (_onClickOutside = onClickOutside) !== null && _onClickOutside !== void 0 ? _onClickOutside : _temp;
|
|
108
|
+
const t3 = (_ignoreClickRefs = ignoreClickRefs) !== null && _ignoreClickRefs !== void 0 ? _ignoreClickRefs : EMPTY_IGNORE_CLICK_REFS;
|
|
109
|
+
let t4;
|
|
110
|
+
if ($[7] !== outsideClickHandler || $[8] !== t3) {
|
|
111
|
+
t4 = {
|
|
112
|
+
onClickOutside: outsideClickHandler,
|
|
113
|
+
containerRef: divRef,
|
|
114
|
+
ignoreClickRefs: t3
|
|
115
|
+
};
|
|
116
|
+
$[7] = outsideClickHandler;
|
|
117
|
+
$[8] = t3;
|
|
118
|
+
$[9] = t4;
|
|
100
119
|
} else {
|
|
101
|
-
|
|
120
|
+
t4 = $[9];
|
|
102
121
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
122
|
+
useOnOutsideClick(t4);
|
|
123
|
+
let t5;
|
|
124
|
+
if ($[10] !== className) {
|
|
125
|
+
t5 = clsx(className, classes.PopoverContent);
|
|
126
|
+
$[10] = className;
|
|
127
|
+
$[11] = t5;
|
|
128
|
+
} else {
|
|
129
|
+
t5 = $[11];
|
|
130
|
+
}
|
|
131
|
+
let t6;
|
|
132
|
+
if ($[12] !== height || $[13] !== props || $[14] !== t5 || $[15] !== width) {
|
|
133
|
+
t6 = /*#__PURE__*/jsx("div", {
|
|
134
|
+
ref: divRef,
|
|
106
135
|
"data-width": width,
|
|
107
136
|
"data-height": height,
|
|
108
|
-
className:
|
|
137
|
+
className: t5,
|
|
109
138
|
...props
|
|
110
139
|
});
|
|
111
|
-
$[
|
|
112
|
-
$[
|
|
113
|
-
$[
|
|
114
|
-
$[
|
|
115
|
-
$[
|
|
140
|
+
$[12] = height;
|
|
141
|
+
$[13] = props;
|
|
142
|
+
$[14] = t5;
|
|
143
|
+
$[15] = width;
|
|
144
|
+
$[16] = t6;
|
|
116
145
|
} else {
|
|
117
|
-
|
|
146
|
+
t6 = $[16];
|
|
118
147
|
}
|
|
119
|
-
return
|
|
148
|
+
return t6;
|
|
120
149
|
};
|
|
121
150
|
PopoverContent.displayName = 'Popover.Content';
|
|
122
151
|
var Popover$1 = Object.assign(Popover, {
|
|
123
152
|
Content: PopoverContent
|
|
124
153
|
});
|
|
154
|
+
function _temp() {}
|
|
125
155
|
|
|
126
156
|
export { Popover$1 as default };
|
|
@@ -5146,6 +5146,16 @@
|
|
|
5146
5146
|
"type": "| 'auto' | 'hidden' | 'scroll' | 'visible'",
|
|
5147
5147
|
"defaultValue": "'auto'",
|
|
5148
5148
|
"description": "Sets the overflow behavior of the popover content."
|
|
5149
|
+
},
|
|
5150
|
+
{
|
|
5151
|
+
"name": "onClickOutside",
|
|
5152
|
+
"type": "(event: MouseEvent | TouchEvent) => void",
|
|
5153
|
+
"description": "Callback fired when a click is detected outside the popover content"
|
|
5154
|
+
},
|
|
5155
|
+
{
|
|
5156
|
+
"name": "ignoreClickRefs",
|
|
5157
|
+
"type": "React.RefObject<HTMLElement>[]",
|
|
5158
|
+
"description": "Refs to elements that should be ignored when detecting outside clicks"
|
|
5149
5159
|
}
|
|
5150
5160
|
]
|
|
5151
5161
|
}
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
body[data-page-layout-dragging=true]{cursor:col-resize}body[data-page-layout-dragging=true] *{-webkit-user-select:none;user-select:none}.prc-PageLayout-PageLayoutRoot-1zlEO{--region-order-header:0;--region-order-pane-start:1;--region-order-content:2;--region-order-pane-end:3;--region-order-footer:4;--spacing-none:0;--spacing-condensed:var(--base-size-16,1rem);--spacing-normal:var(--base-size-16,1rem)}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing-normal:var(--base-size-24,1.5rem)}}.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:100%;--pane-width-medium:100%;--pane-width-large:100%;--pane-max-width-diff:511px}@media screen and (min-width:768px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:240px;--pane-width-medium:256px;--pane-width-large:256px}}@media screen and (min-width:1012px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-width-small:256px;--pane-width-medium:296px;--pane-width-large:320px}}@media screen and (min-width:1280px){.prc-PageLayout-PageLayoutRoot-1zlEO{--pane-max-width-diff:959px}}.prc-PageLayout-PageLayoutRoot-1zlEO{--spacing:0;--spacing-row:0;--spacing-column:0;--spacing-divider:0;--offset-header:0;--pane-width:0;--pane-min-width:0;--pane-max-width:0;--pane-width-custom:0;--pane-width-size:0;padding:var(--spacing)}.prc-PageLayout-PageLayoutWrapper-s2ao4{display:flex;flex-wrap:wrap;margin-left:auto;margin-right:auto}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=medium]){max-width:768px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=large]){max-width:1012px}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=full]){max-width:100%}.prc-PageLayout-PageLayoutWrapper-s2ao4:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PageLayoutContent-jzDMn{display:flex;flex:1 1 100%;flex-wrap:wrap;max-width:100%}.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:calc(var(--spacing-divider)*-1);margin-right:calc(var(--spacing-divider)*-1)}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=none]){display:none}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;height:1px}.prc-PageLayout-HorizontalDivider-CYLp5:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset 0 -1px 0 0 var(--borderColor-default,var(--color-border-default)),inset 0 1px 0 0 var(--borderColor-default,var(--color-border-default));display:block;height:var(--base-size-8,.5rem)}@media screen and (min-width:768px){.prc-PageLayout-HorizontalDivider-CYLp5{margin-left:0!important;margin-right:0!important}}.prc-PageLayout-VerticalDivider-4A4Qm{height:100%;position:relative}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=none]){display:none}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=line]){background-color:var(--borderColor-default,var(--color-border-default));display:block;width:1px}.prc-PageLayout-VerticalDivider-4A4Qm:where([data-variant=filled]){background-color:var(--bgColor-inset,var(--color-canvas-inset));box-shadow:inset -1px 0 0 0 var(--borderColor-default,var(--color-border-default)),inset 1px 0 0 0 var(--borderColor-default,var(--color-border-default));display:block;width:var(--base-size-8,.5rem)}.prc-PageLayout-Header-mQXK1{margin-bottom:var(--spacing);width:100%}.prc-PageLayout-HeaderContent-dVIQb{padding:var(--spacing)}.prc-PageLayout-HeaderHorizontalDivider-bofyb{margin-top:var(--spacing)}.prc-PageLayout-ContentWrapper-b-QRo{display:flex;flex-basis:0;flex-direction:column;flex-grow:1;flex-shrink:1;min-width:1px;order:var(--region-order-content)}.prc-PageLayout-ContentWrapper-b-QRo:where([data-is-hidden=true]){display:none}.prc-PageLayout-Content--F7-I{flex-grow:1;margin-left:auto;margin-right:auto;padding:var(--spacing);width:100%}.prc-PageLayout-Content--F7-I:where([data-width=medium]){max-width:768px}.prc-PageLayout-Content--F7-I:where([data-width=large]){max-width:1012px}.prc-PageLayout-Content--F7-I:where([data-width=full]){max-width:100%}.prc-PageLayout-Content--F7-I:where([data-width=xlarge]){max-width:1280px}.prc-PageLayout-PaneWrapper-nGO0U{display:flex;margin-left:0;margin-right:0;width:100%}.prc-PageLayout-PaneWrapper-nGO0U:where([data-is-hidden=true]){display:none}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:column;margin-top:var(--spacing-row);order:var(--region-order-pane-end)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:column-reverse;margin-bottom:var(--spacing-row);order:var(--region-order-pane-start)}@media screen and (min-width:768px){.prc-PageLayout-PaneWrapper-nGO0U{margin-bottom:0!important;margin-top:0!important;width:auto}.prc-PageLayout-PaneWrapper-nGO0U:where([data-sticky]){max-height:100vh;position:sticky;top:var(--offset-header)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=end]){flex-direction:row-reverse;margin-left:var(--spacing-column)}.prc-PageLayout-PaneWrapper-nGO0U:where([data-position=start]){flex-direction:row;margin-right:var(--spacing-column)}}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=start]){margin-left:var(--spacing)}.prc-PageLayout-PaneVerticalDivider-1c9vy:where([data-position=end]){margin-right:var(--spacing)}.prc-PageLayout-Pane-Vl5LI{padding:var(--spacing);width:var(--pane-width-size)}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI{overflow:auto}}.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:100%}@media screen and (min-width:768px){.prc-PageLayout-Pane-Vl5LI:where([data-resizable]){width:clamp(var(--pane-min-width),var(--pane-width),var(--pane-max-width))}}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=start]){margin-top:var(--spacing)}.prc-PageLayout-PaneHorizontalDivider-4exOb:where([data-position=end]){margin-bottom:var(--spacing)}.prc-PageLayout-FooterWrapper-WZwgZ{margin-top:var(--spacing);order:var(--region-order-footer);width:100%}.prc-PageLayout-FooterHorizontalDivider-sNLmj{margin-bottom:var(--spacing)}.prc-PageLayout-FooterContent-UFWGW{padding:var(--spacing)}.prc-PageLayout-DraggableHandle-zPw82{background-color:transparent;cursor:col-resize;inset:0 -2px;position:absolute;transition-delay:.1s}.prc-PageLayout-DraggableHandle-zPw82:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle))}.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true],.prc-PageLayout-DraggableHandle-zPw82[data-dragging=true]:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis))}
|
|
2
|
-
/*# sourceMappingURL=PageLayout-a276fa3b.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/PageLayout/PageLayout.module.css"],"names":[],"mappings":"AAEA,qCACE,iBACF,CAIA,uCACE,wBAAiB,CAAjB,gBACF,CAEA,qCAEE,uBAAwB,CACxB,2BAA4B,CAC5B,wBAAyB,CACzB,yBAA0B,CAC1B,uBAAwB,CAGxB,gBAAiB,CACjB,4CAAwC,CACxC,yCA0CF,CAxCE,qCAbF,qCAcI,2CAuCJ,CAtCE,CAfF,qCAkBE,uBAAwB,CACxB,wBAAyB,CACzB,uBAAwB,CACxB,2BAgCF,CA9BE,oCAvBF,qCAwBI,wBAAyB,CACzB,yBAA0B,CAC1B,wBA2BJ,CA1BE,CAEA,qCA7BF,qCA8BI,wBAAyB,CACzB,yBAA0B,CAC1B,wBAqBJ,CApBE,CAEA,qCAnCF,qCAoCI,2BAiBJ,CAhBE,CArCF,qCAwCE,WAAY,CACZ,eAAgB,CAChB,kBAAmB,CACnB,mBAAoB,CACpB,iBAAkB,CAClB,cAAe,CACf,kBAAmB,CACnB,kBAAmB,CACnB,qBAAsB,CACtB,mBAAoB,CAGpB,sBACF,CAEA,wCACE,YAAa,CAGb,cAAe,CADf,gBAAiB,CADjB,iBAmBF,CAfE,mEACE,eACF,CAEA,kEACE,gBACF,CAEA,iEACE,cACF,CAEA,mEACE,gBACF,CAGF,wCACE,YAAa,CACb,aAAc,CACd,cAAe,CACf,cACF,CAEA,wCAIE,2CAA8C,CAF9C,4CA6BF,CAzBE,mEACE,YACF,CAEA,mEAIE,uEAA4C,CAH5C,aAAc,CACd,UAGF,CAEA,qEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,+BAMF,CAEA,oCA3BF,wCA6BI,uBAAyB,CADzB,wBAGJ,CADE,CAGF,sCAEE,WAAY,CADZ,iBAuBF,CApBE,iEACE,YACF,CAEA,iEAIE,uEAA4C,CAH5C,aAAc,CACd,SAGF,CAEA,mEAGE,+DAAsC,CACtC,yJAG4C,CAN5C,aAAc,CACd,8BAMF,CAGF,6BAGE,4BAA6B,CAF7B,UAGF,CAEA,oCAEE,sBACF,CAEA,8CAEE,yBACF,CAEA,qCACE,YAAa,CAUb,YAAa,CANb,qBAAsB,CAOtB,WAAY,CACZ,aAAc,CATd,aAAc,CAEd,iCAYF,CAHE,kEACE,YACF,CAGF,8BAOE,WAAY,CADZ,gBAAiB,CADjB,iBAAkB,CADlB,sBAAuB,CAHvB,UAuBF,CAfE,yDACE,eACF,CAEA,wDACE,gBACF,CAEA,uDACE,cACF,CAEA,yDACE,gBACF,CAGF,kCACE,YAAa,CAGb,aAAc,CADd,cAAe,CADf,UA8CF,CA1CE,+DACE,YACF,CAEA,6DAGE,qBAAsB,CADtB,6BAA8B,CAE9B,kCACF,CAEA,+DAGE,6BAA8B,CAD9B,gCAAiC,CAEjC,oCACF,CAEA,oCAxBF,kCA2BI,yBAA2B,CAD3B,sBAAwB,CADxB,UAuBJ,CAnBI,uDAIE,gBAAiB,CAHjB,eAAgB,CAEhB,wBAEF,CAEA,6DAGE,0BAA2B,CAD3B,iCAEF,CAEA,+DAGE,kBAAmB,CADnB,kCAEF,CACF,CAIA,uEAEE,0BACF,CAEA,qEAEE,2BACF,CAGF,2BAGE,sBAAuB,CAFvB,4BAeF,CAXE,oCALF,2BAMI,aAUJ,CATE,CAEA,mDACE,UAKF,CAHE,oCAHF,mDAII,0EAEJ,CADE,CAKF,yEAEE,yBACF,CAEA,uEAEE,4BACF,CAGF,oCAKE,yBAA0B,CAH1B,gCAAiC,CADjC,UAKF,CAEA,8CAEE,4BACF,CAEA,oCAEE,sBACF,CAEA,sCAIE,4BAA6B,CAD7B,iBAAkB,CADlB,YAAa,CADb,iBAAkB,CAIlB,oBACF,CAEA,4CACE,yEACF,CAMA,0HACE,4EACF","file":"PageLayout-a276fa3b.css","sourcesContent":["/* Maintain resize cursor while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] {\n cursor: col-resize;\n}\n\n/* Disable text selection while dragging */\n/* stylelint-disable-next-line selector-no-qualifying-type */\nbody[data-page-layout-dragging='true'] * {\n user-select: none;\n}\n\n.PageLayoutRoot {\n /* Region Order */\n --region-order-header: 0;\n --region-order-pane-start: 1;\n --region-order-content: 2;\n --region-order-pane-end: 3;\n --region-order-footer: 4;\n\n /* Spacing Values */\n --spacing-none: 0;\n --spacing-condensed: var(--base-size-16);\n --spacing-normal: var(--base-size-16);\n\n @media screen and (min-width: 1012px) {\n --spacing-normal: var(--base-size-24);\n }\n\n /* Pane Width Values */\n --pane-width-small: 100%;\n --pane-width-medium: 100%;\n --pane-width-large: 100%;\n --pane-max-width-diff: 511px;\n\n @media screen and (min-width: 768px) {\n --pane-width-small: 240px;\n --pane-width-medium: 256px;\n --pane-width-large: 256px;\n }\n\n @media screen and (min-width: 1012px) {\n --pane-width-small: 256px;\n --pane-width-medium: 296px;\n --pane-width-large: 320px;\n }\n\n @media screen and (min-width: 1280px) {\n --pane-max-width-diff: 959px;\n }\n\n /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */\n --spacing: 0;\n --spacing-row: 0;\n --spacing-column: 0;\n --spacing-divider: 0;\n --offset-header: 0;\n --pane-width: 0;\n --pane-min-width: 0;\n --pane-max-width: 0;\n --pane-width-custom: 0;\n --pane-width-size: 0;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.PageLayoutWrapper {\n display: flex;\n margin-right: auto;\n margin-left: auto;\n flex-wrap: wrap;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PageLayoutContent {\n display: flex;\n flex: 1 1 100%;\n flex-wrap: wrap;\n max-width: 100%;\n}\n\n.HorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: calc(-1 * var(--spacing-divider));\n /* stylelint-disable-next-line primer/spacing */\n margin-left: calc(-1 * var(--spacing-divider));\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n height: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n height: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset 0 -1px 0 0 var(--borderColor-default),\n inset 0 1px 0 0 var(--borderColor-default);\n }\n\n @media screen and (min-width: 768px) {\n margin-right: 0 !important;\n margin-left: 0 !important;\n }\n}\n\n.VerticalDivider {\n position: relative;\n height: 100%;\n\n &:where([data-variant='none']) {\n display: none;\n }\n\n &:where([data-variant='line']) {\n display: block;\n width: 1px;\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--borderColor-default);\n }\n\n &:where([data-variant='filled']) {\n display: block;\n width: var(--base-size-8);\n background-color: var(--bgColor-inset);\n box-shadow:\n /* stylelint-disable-next-line primer/box-shadow */\n inset -1px 0 0 0 var(--borderColor-default),\n inset 1px 0 0 0 var(--borderColor-default);\n }\n}\n\n.Header {\n width: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.HeaderContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.HeaderHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.ContentWrapper {\n display: flex;\n\n /* Hack to prevent overflowing content from pushing the pane region to the next line */\n min-width: 1px;\n flex-direction: column;\n order: var(--region-order-content);\n\n /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.\n Without this, the content region could wrap onto a different line\n than the pane region on wide viewports if its contents are too wide. */\n flex-basis: 0;\n flex-grow: 1;\n flex-shrink: 1;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n}\n\n.Content {\n width: 100%;\n\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n margin-right: auto;\n margin-left: auto;\n flex-grow: 1;\n\n &:where([data-width='medium']) {\n max-width: 768px;\n }\n\n &:where([data-width='large']) {\n max-width: 1012px;\n }\n\n &:where([data-width='full']) {\n max-width: 100%;\n }\n\n &:where([data-width='xlarge']) {\n max-width: 1280px;\n }\n}\n\n.PaneWrapper {\n display: flex;\n width: 100%;\n margin-right: 0;\n margin-left: 0;\n\n &:where([data-is-hidden='true']) {\n display: none;\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing-row);\n flex-direction: column;\n order: var(--region-order-pane-end);\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing-row);\n flex-direction: column-reverse;\n order: var(--region-order-pane-start);\n }\n\n @media screen and (min-width: 768px) {\n width: auto;\n margin-top: 0 !important;\n margin-bottom: 0 !important;\n\n &:where([data-sticky]) {\n position: sticky;\n /* stylelint-disable-next-line primer/spacing */\n top: var(--offset-header);\n max-height: 100vh;\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing-column);\n flex-direction: row-reverse;\n }\n\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing-column);\n flex-direction: row;\n }\n }\n}\n\n.PaneVerticalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-right: var(--spacing);\n }\n}\n\n.Pane {\n width: var(--pane-width-size);\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n\n @media screen and (min-width: 768px) {\n overflow: auto;\n }\n\n &:where([data-resizable]) {\n width: 100%;\n\n @media screen and (min-width: 768px) {\n width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));\n }\n }\n}\n\n.PaneHorizontalDivider {\n &:where([data-position='start']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n }\n\n &:where([data-position='end']) {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n }\n}\n\n.FooterWrapper {\n width: 100%;\n order: var(--region-order-footer);\n\n /* stylelint-disable-next-line primer/spacing */\n margin-top: var(--spacing);\n}\n\n.FooterHorizontalDivider {\n /* stylelint-disable-next-line primer/spacing */\n margin-bottom: var(--spacing);\n}\n\n.FooterContent {\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--spacing);\n}\n\n.DraggableHandle {\n position: absolute;\n inset: 0 -2px;\n cursor: col-resize;\n background-color: transparent;\n transition-delay: 0.1s;\n}\n\n.DraggableHandle:hover {\n background-color: var(--bgColor-neutral-muted);\n}\n\n.DraggableHandle[data-dragging='true'] {\n background-color: var(--bgColor-accent-emphasis);\n}\n\n.DraggableHandle[data-dragging='true']:hover {\n background-color: var(--bgColor-accent-emphasis);\n}\n"]}
|