@primer/react 38.18.0-rc.f372aa7ad → 38.19.0-rc.c09ee891a
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 +8 -0
- package/dist/AnchoredOverlay/AnchoredOverlay-647c7065.css +2 -0
- package/dist/AnchoredOverlay/AnchoredOverlay-647c7065.css.map +1 -0
- package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map +1 -1
- package/dist/AnchoredOverlay/AnchoredOverlay.js +50 -10
- package/dist/AnchoredOverlay/AnchoredOverlay.module.css.js +2 -2
- package/dist/Overlay/Overlay.d.ts +1 -0
- package/dist/Overlay/Overlay.d.ts.map +1 -1
- package/dist/Overlay/Overlay.js +85 -81
- package/dist/StateLabel/{StateLabel-056eec66.css → StateLabel-cd51ae39.css} +2 -2
- package/dist/StateLabel/StateLabel-cd51ae39.css.map +1 -0
- package/dist/StateLabel/StateLabel.d.ts +1 -0
- package/dist/StateLabel/StateLabel.d.ts.map +1 -1
- package/dist/StateLabel/StateLabel.js +4 -2
- package/dist/StateLabel/StateLabel.module.css.js +1 -1
- package/generated/components.json +5 -1
- package/package.json +8 -7
- package/dist/AnchoredOverlay/AnchoredOverlay-0f6f45b5.css +0 -2
- package/dist/AnchoredOverlay/AnchoredOverlay-0f6f45b5.css.map +0 -1
- package/dist/StateLabel/StateLabel-056eec66.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @primer/react
|
|
2
2
|
|
|
3
|
+
## 38.19.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#7686](https://github.com/primer/react/pull/7686) [`6cd13c0`](https://github.com/primer/react/commit/6cd13c03a0293732af6d9499f1f925bf7d95d82b) Thanks [@JelloBagel](https://github.com/JelloBagel)! - StateLabel: Add new type: `archived`
|
|
8
|
+
|
|
9
|
+
- [#7677](https://github.com/primer/react/pull/7677) [`c1a81b1`](https://github.com/primer/react/commit/c1a81b178742ba547b85a3df3ed3c27bcff6b7c5) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AnchoredOverlay: Add Popover API to AnchoredOverlay (behind `primer_react_css_anchor_positioning` feature flag)
|
|
10
|
+
|
|
3
11
|
## 38.18.0
|
|
4
12
|
|
|
5
13
|
### Minor Changes
|
|
@@ -0,0 +1,2 @@
|
|
|
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-height:none;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-top]{bottom:anchor(top);left:anchor(left);margin-bottom:var(--base-size-4,.25rem)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-left]{margin-right:var(--base-size-4,.25rem);right:anchor(left);top:anchor(top)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-right]{left:anchor(right);margin-left:var(--base-size-4,.25rem);top:anchor(top)}
|
|
2
|
+
/*# sourceMappingURL=AnchoredOverlay-647c7065.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
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,WAmCF,CAhCE,oDAIE,QAAS,CAHT,UAAW,CACX,QAAS,CAGT,eAAgB,CAChB,cAAe,CAHf,SAIF,CAEA,qEAGE,iBAAkB,CADlB,oDAEF,CAEA,kEAEE,kBAAmB,CACnB,iBAAkB,CAFlB,uCAGF,CAEA,mEAGE,sCAAgC,CAFhC,kBAAmB,CACnB,eAEF,CAEA,oEACE,kBAAmB,CAEnB,qCAA+B,CAD/B,eAEF","file":"AnchoredOverlay-647c7065.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-height: none;\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\n &[data-side='outside-top'] {\n margin-bottom: var(--base-size-4);\n bottom: anchor(top);\n left: anchor(left);\n }\n\n &[data-side='outside-left'] {\n right: anchor(left);\n top: anchor(top);\n margin-right: var(--base-size-4);\n }\n\n &[data-side='outside-right'] {\n left: anchor(right);\n top: anchor(top);\n margin-left: var(--base-size-4);\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAiC,KAAK,GAAG,EAAC,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"AnchoredOverlay.d.ts","sourceRoot":"","sources":["../../src/AnchoredOverlay/AnchoredOverlay.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { useCallback, useRef, useEffect } from 'react';
|
|
2
|
+
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
|
|
2
3
|
import { useFocusTrap } from '../hooks/useFocusTrap.js';
|
|
3
4
|
import { useFocusZone } from '../hooks/useFocusZone.js';
|
|
4
5
|
import { useId } from '../hooks/useId.js';
|
|
@@ -77,12 +78,17 @@ const AnchoredOverlay = ({
|
|
|
77
78
|
if (event_0.defaultPrevented || event_0.button !== 0) {
|
|
78
79
|
return;
|
|
79
80
|
}
|
|
81
|
+
// Prevent the browser's native popovertarget toggle so React
|
|
82
|
+
// stays the single source of truth for popover visibility.
|
|
83
|
+
if (cssAnchorPositioning) {
|
|
84
|
+
event_0.preventDefault();
|
|
85
|
+
}
|
|
80
86
|
if (!open) {
|
|
81
87
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-click');
|
|
82
88
|
} else {
|
|
83
89
|
onClose === null || onClose === void 0 ? void 0 : onClose('anchor-click');
|
|
84
90
|
}
|
|
85
|
-
}, [open, onOpen, onClose]);
|
|
91
|
+
}, [open, onOpen, onClose, cssAnchorPositioning]);
|
|
86
92
|
const positionChange = position => {
|
|
87
93
|
if (onPositionChange && position) {
|
|
88
94
|
onPositionChange({
|
|
@@ -124,14 +130,48 @@ const AnchoredOverlay = ({
|
|
|
124
130
|
disabled: !open || !position_0,
|
|
125
131
|
...focusTrapSettings
|
|
126
132
|
});
|
|
133
|
+
const popoverId = useId();
|
|
134
|
+
const id = popoverId.replaceAll(':', '_'); // popoverId can contain colons which are invalid in CSS custom property names, so we replace them with underscores
|
|
135
|
+
|
|
136
|
+
useEffect(() => {
|
|
137
|
+
if (!cssAnchorPositioning || !anchorRef.current) return;
|
|
138
|
+
const anchor = anchorRef.current;
|
|
139
|
+
const overlay = overlayRef.current;
|
|
140
|
+
anchor.style.setProperty('anchor-name', `--anchored-overlay-anchor-${id}`);
|
|
141
|
+
return () => {
|
|
142
|
+
anchor.style.removeProperty('anchor-name');
|
|
143
|
+
if (overlay) {
|
|
144
|
+
overlay.style.removeProperty('position-anchor');
|
|
145
|
+
}
|
|
146
|
+
};
|
|
147
|
+
}, [cssAnchorPositioning, anchorRef, overlayRef, id]);
|
|
148
|
+
|
|
149
|
+
// Track the overlay element so we can re-run the effect when it changes.
|
|
150
|
+
// The overlay unmounts when closed, so each open creates a new DOM node -
|
|
151
|
+
// that needs showPopover() called.
|
|
152
|
+
const overlayElement = overlayRef.current;
|
|
153
|
+
useIsomorphicLayoutEffect(() => {
|
|
154
|
+
// Read ref inside effect to get the value after child refs are attached
|
|
155
|
+
const currentOverlay = overlayRef.current;
|
|
156
|
+
if (!cssAnchorPositioning || !open || !currentOverlay) return;
|
|
157
|
+
currentOverlay.style.setProperty('position-anchor', `--anchored-overlay-anchor-${id}`);
|
|
158
|
+
try {
|
|
159
|
+
if (!currentOverlay.matches(':popover-open')) {
|
|
160
|
+
currentOverlay.showPopover();
|
|
161
|
+
}
|
|
162
|
+
} catch {
|
|
163
|
+
// Ignore if popover is already showing or not supported
|
|
164
|
+
}
|
|
165
|
+
}, [cssAnchorPositioning, open, overlayElement, id, overlayRef]);
|
|
127
166
|
const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton;
|
|
128
167
|
const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby'];
|
|
129
168
|
const XButtonAriaLabel = closeButtonProps['aria-label'];
|
|
130
169
|
const {
|
|
131
170
|
className: overlayClassName,
|
|
171
|
+
_PrivateDisablePortal,
|
|
132
172
|
...restOverlayProps
|
|
133
173
|
} = overlayProps || {};
|
|
134
|
-
|
|
174
|
+
return /*#__PURE__*/jsxs(Fragment, {
|
|
135
175
|
children: [renderAnchor && renderAnchor({
|
|
136
176
|
ref: anchorRef,
|
|
137
177
|
id: anchorId,
|
|
@@ -141,7 +181,7 @@ const AnchoredOverlay = ({
|
|
|
141
181
|
onClick: onAnchorClick,
|
|
142
182
|
onKeyDown: onAnchorKeyDown,
|
|
143
183
|
...(cssAnchorPositioning ? {
|
|
144
|
-
|
|
184
|
+
popoverTarget: popoverId
|
|
145
185
|
} : {})
|
|
146
186
|
}), open ? /*#__PURE__*/jsxs(Overlay, {
|
|
147
187
|
returnFocusRef: anchorRef,
|
|
@@ -159,7 +199,14 @@ const AnchoredOverlay = ({
|
|
|
159
199
|
className: clsx(className, overlayClassName, cssAnchorPositioning ? classes.AnchoredOverlay : undefined),
|
|
160
200
|
preventOverflow: preventOverflow,
|
|
161
201
|
"data-component": "AnchoredOverlay",
|
|
202
|
+
_PrivateDisablePortal: _PrivateDisablePortal,
|
|
203
|
+
...(cssAnchorPositioning ? {
|
|
204
|
+
popover: 'manual'
|
|
205
|
+
} : {}),
|
|
162
206
|
...restOverlayProps,
|
|
207
|
+
...(cssAnchorPositioning ? {
|
|
208
|
+
id: popoverId
|
|
209
|
+
} : {}),
|
|
163
210
|
ref: node => {
|
|
164
211
|
if (overlayProps !== null && overlayProps !== void 0 && overlayProps.ref) {
|
|
165
212
|
assignRef(overlayProps.ref, node);
|
|
@@ -190,13 +237,6 @@ const AnchoredOverlay = ({
|
|
|
190
237
|
}) : null, children]
|
|
191
238
|
}) : null]
|
|
192
239
|
});
|
|
193
|
-
if (cssAnchorPositioning) {
|
|
194
|
-
return /*#__PURE__*/jsx("div", {
|
|
195
|
-
className: classes.Wrapper,
|
|
196
|
-
children: innerContent
|
|
197
|
-
});
|
|
198
|
-
}
|
|
199
|
-
return innerContent;
|
|
200
240
|
};
|
|
201
241
|
function assignRef(ref, value) {
|
|
202
242
|
if (typeof ref === 'function') {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './AnchoredOverlay-
|
|
1
|
+
import './AnchoredOverlay-647c7065.css';
|
|
2
2
|
|
|
3
|
-
var classes = {"ResponsiveCloseButtonContainer":"prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium","ResponsiveCloseButton":"prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx","
|
|
3
|
+
var classes = {"ResponsiveCloseButtonContainer":"prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium","ResponsiveCloseButton":"prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx","AnchoredOverlay":"prc-AnchoredOverlay-AnchoredOverlay-fYg9Z"};
|
|
4
4
|
|
|
5
5
|
export { classes as default };
|
|
@@ -61,6 +61,7 @@ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>;
|
|
|
61
61
|
export declare const BaseOverlay: PolymorphicForwardRefComponent<"div", OwnOverlayProps>;
|
|
62
62
|
type ContainerProps = {
|
|
63
63
|
anchorSide?: AnchorSide;
|
|
64
|
+
_PrivateDisablePortal?: boolean;
|
|
64
65
|
ignoreClickRefs?: React.RefObject<HTMLElement | null>[];
|
|
65
66
|
initialFocusRef?: React.RefObject<HTMLElement | null>;
|
|
66
67
|
onClickOutside: (e: TouchOrMouseEvent) => void;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"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"}
|
package/dist/Overlay/Overlay.js
CHANGED
|
@@ -116,7 +116,8 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
|
|
|
116
116
|
|
|
117
117
|
*/
|
|
118
118
|
const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
119
|
-
const $ = c(
|
|
119
|
+
const $ = c(49);
|
|
120
|
+
let _PrivateDisablePortal;
|
|
120
121
|
let anchorSide;
|
|
121
122
|
let ignoreClickRefs;
|
|
122
123
|
let initialFocusRef;
|
|
@@ -137,6 +138,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
137
138
|
if ($[0] !== t0) {
|
|
138
139
|
({
|
|
139
140
|
anchorSide,
|
|
141
|
+
_PrivateDisablePortal,
|
|
140
142
|
height: t1,
|
|
141
143
|
ignoreClickRefs,
|
|
142
144
|
initialFocusRef,
|
|
@@ -155,53 +157,55 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
155
157
|
...props
|
|
156
158
|
} = t0);
|
|
157
159
|
$[0] = t0;
|
|
158
|
-
$[1] =
|
|
159
|
-
$[2] =
|
|
160
|
-
$[3] =
|
|
161
|
-
$[4] =
|
|
162
|
-
$[5] =
|
|
163
|
-
$[6] =
|
|
164
|
-
$[7] =
|
|
165
|
-
$[8] =
|
|
166
|
-
$[9] =
|
|
167
|
-
$[10] =
|
|
168
|
-
$[11] =
|
|
169
|
-
$[12] =
|
|
170
|
-
$[13] =
|
|
171
|
-
$[14] =
|
|
172
|
-
$[15] =
|
|
173
|
-
$[16] =
|
|
174
|
-
$[17] =
|
|
160
|
+
$[1] = _PrivateDisablePortal;
|
|
161
|
+
$[2] = anchorSide;
|
|
162
|
+
$[3] = ignoreClickRefs;
|
|
163
|
+
$[4] = initialFocusRef;
|
|
164
|
+
$[5] = left;
|
|
165
|
+
$[6] = onClickOutside;
|
|
166
|
+
$[7] = onEscape;
|
|
167
|
+
$[8] = portalContainerName;
|
|
168
|
+
$[9] = preventFocusOnOpen;
|
|
169
|
+
$[10] = props;
|
|
170
|
+
$[11] = responsiveVariant;
|
|
171
|
+
$[12] = returnFocusRef;
|
|
172
|
+
$[13] = right;
|
|
173
|
+
$[14] = t1;
|
|
174
|
+
$[15] = t2;
|
|
175
|
+
$[16] = t3;
|
|
176
|
+
$[17] = t4;
|
|
177
|
+
$[18] = t5;
|
|
175
178
|
} else {
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
179
|
+
_PrivateDisablePortal = $[1];
|
|
180
|
+
anchorSide = $[2];
|
|
181
|
+
ignoreClickRefs = $[3];
|
|
182
|
+
initialFocusRef = $[4];
|
|
183
|
+
left = $[5];
|
|
184
|
+
onClickOutside = $[6];
|
|
185
|
+
onEscape = $[7];
|
|
186
|
+
portalContainerName = $[8];
|
|
187
|
+
preventFocusOnOpen = $[9];
|
|
188
|
+
props = $[10];
|
|
189
|
+
responsiveVariant = $[11];
|
|
190
|
+
returnFocusRef = $[12];
|
|
191
|
+
right = $[13];
|
|
192
|
+
t1 = $[14];
|
|
193
|
+
t2 = $[15];
|
|
194
|
+
t3 = $[16];
|
|
195
|
+
t4 = $[17];
|
|
196
|
+
t5 = $[18];
|
|
193
197
|
}
|
|
194
198
|
const height = t1 === undefined ? "auto" : t1;
|
|
195
199
|
const preventOverflow = t2 === undefined ? true : t2;
|
|
196
200
|
const role = t3 === undefined ? "none" : t3;
|
|
197
201
|
const visibility = t4 === undefined ? "visible" : t4;
|
|
198
202
|
const width = t5 === undefined ? "auto" : t5;
|
|
199
|
-
const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
|
|
200
203
|
const featureFlagMaxHeightClampToViewport = useFeatureFlag("primer_react_overlay_max_height_clamp_to_viewport");
|
|
201
204
|
const overlayRef = useRef(null);
|
|
202
205
|
useRefObjectAsForwardedRef(forwardedRef, overlayRef);
|
|
206
|
+
const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
|
|
203
207
|
let t6;
|
|
204
|
-
if ($[
|
|
208
|
+
if ($[19] !== ignoreClickRefs || $[20] !== initialFocusRef || $[21] !== onClickOutside || $[22] !== onEscape || $[23] !== preventFocusOnOpen || $[24] !== returnFocusRef) {
|
|
205
209
|
t6 = {
|
|
206
210
|
overlayRef,
|
|
207
211
|
returnFocusRef,
|
|
@@ -211,20 +215,20 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
211
215
|
initialFocusRef,
|
|
212
216
|
preventFocusOnOpen
|
|
213
217
|
};
|
|
214
|
-
$[
|
|
215
|
-
$[
|
|
216
|
-
$[
|
|
217
|
-
$[
|
|
218
|
-
$[
|
|
219
|
-
$[
|
|
220
|
-
$[
|
|
218
|
+
$[19] = ignoreClickRefs;
|
|
219
|
+
$[20] = initialFocusRef;
|
|
220
|
+
$[21] = onClickOutside;
|
|
221
|
+
$[22] = onEscape;
|
|
222
|
+
$[23] = preventFocusOnOpen;
|
|
223
|
+
$[24] = returnFocusRef;
|
|
224
|
+
$[25] = t6;
|
|
221
225
|
} else {
|
|
222
|
-
t6 = $[
|
|
226
|
+
t6 = $[25];
|
|
223
227
|
}
|
|
224
228
|
useOverlay(t6);
|
|
225
229
|
let t7;
|
|
226
230
|
let t8;
|
|
227
|
-
if ($[
|
|
231
|
+
if ($[26] !== height) {
|
|
228
232
|
t7 = () => {
|
|
229
233
|
var _overlayRef$current;
|
|
230
234
|
if (height === "initial" && (_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.clientHeight) {
|
|
@@ -232,17 +236,17 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
232
236
|
}
|
|
233
237
|
};
|
|
234
238
|
t8 = [height];
|
|
235
|
-
$[
|
|
236
|
-
$[
|
|
237
|
-
$[
|
|
239
|
+
$[26] = height;
|
|
240
|
+
$[27] = t7;
|
|
241
|
+
$[28] = t8;
|
|
238
242
|
} else {
|
|
239
|
-
t7 = $[
|
|
240
|
-
t8 = $[
|
|
243
|
+
t7 = $[27];
|
|
244
|
+
t8 = $[28];
|
|
241
245
|
}
|
|
242
246
|
useEffect(t7, t8);
|
|
243
247
|
let t10;
|
|
244
248
|
let t9;
|
|
245
|
-
if ($[
|
|
249
|
+
if ($[29] !== anchorSide || $[30] !== visibility) {
|
|
246
250
|
t9 = () => {
|
|
247
251
|
var _overlayRef$current2;
|
|
248
252
|
const {
|
|
@@ -260,29 +264,29 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
260
264
|
});
|
|
261
265
|
};
|
|
262
266
|
t10 = [anchorSide, 8, "cubic-bezier(0.33, 1, 0.68, 1)", visibility];
|
|
263
|
-
$[
|
|
264
|
-
$[
|
|
265
|
-
$[
|
|
266
|
-
$[
|
|
267
|
+
$[29] = anchorSide;
|
|
268
|
+
$[30] = visibility;
|
|
269
|
+
$[31] = t10;
|
|
270
|
+
$[32] = t9;
|
|
267
271
|
} else {
|
|
268
|
-
t10 = $[
|
|
269
|
-
t9 = $[
|
|
272
|
+
t10 = $[31];
|
|
273
|
+
t9 = $[32];
|
|
270
274
|
}
|
|
271
275
|
useIsomorphicLayoutEffect(t9, t10);
|
|
272
276
|
const leftPosition = left === undefined && right === undefined ? 0 : left;
|
|
273
277
|
const t11 = !preventOverflow ? true : undefined;
|
|
274
278
|
let t12;
|
|
275
|
-
if ($[
|
|
279
|
+
if ($[33] !== featureFlagMaxHeightClampToViewport) {
|
|
276
280
|
t12 = featureFlagMaxHeightClampToViewport ? {
|
|
277
281
|
"data-max-height-clamp-to-viewport": ""
|
|
278
282
|
} : {};
|
|
279
|
-
$[
|
|
280
|
-
$[
|
|
283
|
+
$[33] = featureFlagMaxHeightClampToViewport;
|
|
284
|
+
$[34] = t12;
|
|
281
285
|
} else {
|
|
282
|
-
t12 = $[
|
|
286
|
+
t12 = $[34];
|
|
283
287
|
}
|
|
284
288
|
let t13;
|
|
285
|
-
if ($[
|
|
289
|
+
if ($[35] !== height || $[36] !== leftPosition || $[37] !== props || $[38] !== responsiveVariant || $[39] !== right || $[40] !== role || $[41] !== t11 || $[42] !== t12 || $[43] !== visibility || $[44] !== width) {
|
|
286
290
|
t13 = /*#__PURE__*/jsx(BaseOverlay, {
|
|
287
291
|
role: role,
|
|
288
292
|
width: width,
|
|
@@ -296,35 +300,35 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
296
300
|
...t12,
|
|
297
301
|
...props
|
|
298
302
|
});
|
|
299
|
-
$[
|
|
300
|
-
$[
|
|
301
|
-
$[
|
|
302
|
-
$[
|
|
303
|
-
$[
|
|
304
|
-
$[
|
|
305
|
-
$[
|
|
306
|
-
$[
|
|
307
|
-
$[
|
|
308
|
-
$[
|
|
309
|
-
$[
|
|
303
|
+
$[35] = height;
|
|
304
|
+
$[36] = leftPosition;
|
|
305
|
+
$[37] = props;
|
|
306
|
+
$[38] = responsiveVariant;
|
|
307
|
+
$[39] = right;
|
|
308
|
+
$[40] = role;
|
|
309
|
+
$[41] = t11;
|
|
310
|
+
$[42] = t12;
|
|
311
|
+
$[43] = visibility;
|
|
312
|
+
$[44] = width;
|
|
313
|
+
$[45] = t13;
|
|
310
314
|
} else {
|
|
311
|
-
t13 = $[
|
|
315
|
+
t13 = $[45];
|
|
312
316
|
}
|
|
313
317
|
const overlayContent = t13;
|
|
314
|
-
if (cssAnchorPositioning) {
|
|
318
|
+
if (_PrivateDisablePortal && cssAnchorPositioning) {
|
|
315
319
|
return overlayContent;
|
|
316
320
|
}
|
|
317
321
|
let t14;
|
|
318
|
-
if ($[
|
|
322
|
+
if ($[46] !== overlayContent || $[47] !== portalContainerName) {
|
|
319
323
|
t14 = /*#__PURE__*/jsx(Portal, {
|
|
320
324
|
containerName: portalContainerName,
|
|
321
325
|
children: overlayContent
|
|
322
326
|
});
|
|
323
|
-
$[
|
|
324
|
-
$[
|
|
325
|
-
$[
|
|
327
|
+
$[46] = overlayContent;
|
|
328
|
+
$[47] = portalContainerName;
|
|
329
|
+
$[48] = t14;
|
|
326
330
|
} else {
|
|
327
|
-
t14 = $[
|
|
331
|
+
t14 = $[48];
|
|
328
332
|
}
|
|
329
333
|
return t14;
|
|
330
334
|
});
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.prc-StateLabel-StateLabel-Iawzp{align-items:center;border-radius:var(--borderRadius-full,624.9375rem);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));display:inline-flex;font-weight:var(--base-text-weight-semibold,600);line-height:16px;text-align:center}.prc-StateLabel-StateLabel-Iawzp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);padding:var(--base-size-4,.25rem) var(--base-size-8,.5rem)}.prc-StateLabel-StateLabel-Iawzp:where([data-size=medium]){font-size:var(--text-body-size-medium,.875rem);padding:var(--base-size-8,.5rem) var(--base-size-12,.75rem)}.prc-StateLabel-StateLabel-Iawzp:where([data-status=issueClosed]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=issueClosedNotPlanned]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=pullClosed]){background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-closed-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=pullMerged]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=pullQueued]){background-color:var(--bgColor-attention-emphasis,var(--color-attention-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-attention-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=issueOpened]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=pullOpened]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=draft]){background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis,var(--color-fg-subtle)));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis,transparent));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=issueDraft]){background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis,var(--color-fg-subtle)));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis,transparent));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=unavailable]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=open]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=closed]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=alertOpened]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=alertFixed]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=alertDismissed]){background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis,var(--color-fg-subtle)));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis,transparent));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=alertClosed]){background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-closed-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-Icon-YICrR{margin-right:var(--base-size-4,.25rem)}.prc-StateLabel-Icon-YICrR:where([data-size-small]){width:1em}
|
|
2
|
-
/*# sourceMappingURL=StateLabel-
|
|
1
|
+
.prc-StateLabel-StateLabel-Iawzp{align-items:center;border-radius:var(--borderRadius-full,624.9375rem);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));display:inline-flex;font-weight:var(--base-text-weight-semibold,600);line-height:16px;text-align:center}.prc-StateLabel-StateLabel-Iawzp:where([data-size=small]){font-size:var(--text-body-size-small,.75rem);padding:var(--base-size-4,.25rem) var(--base-size-8,.5rem)}.prc-StateLabel-StateLabel-Iawzp:where([data-size=medium]){font-size:var(--text-body-size-medium,.875rem);padding:var(--base-size-8,.5rem) var(--base-size-12,.75rem)}.prc-StateLabel-StateLabel-Iawzp:where([data-status=issueClosed]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=issueClosedNotPlanned]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=pullClosed]){background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-closed-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=pullMerged]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=pullQueued]){background-color:var(--bgColor-attention-emphasis,var(--color-attention-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-attention-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=issueOpened]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=pullOpened]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=draft]){background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis,var(--color-fg-subtle)));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis,transparent));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=issueDraft]){background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis,var(--color-fg-subtle)));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis,transparent));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=unavailable]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=open]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=closed]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=alertOpened]){background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-open-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=alertFixed]){background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-done-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=alertDismissed]){background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis,var(--color-fg-subtle)));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis,transparent));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=alertClosed]){background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-closed-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-StateLabel-Iawzp:where([data-status=archived]){background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));box-shadow:var(--boxShadow-thin,inset 0 0 0 1px) var(--borderColor-neutral-emphasis,transparent);color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.prc-StateLabel-Icon-YICrR{margin-right:var(--base-size-4,.25rem)}.prc-StateLabel-Icon-YICrR:where([data-size-small]){width:1em}
|
|
2
|
+
/*# sourceMappingURL=StateLabel-cd51ae39.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/StateLabel/StateLabel.module.css.js"],"names":[],"mappings":"AAAA,iCAEE,kBAAmB,CAMnB,kDAAuC,CAFvC,2DAAgC,CALhC,mBAAoB,CAEpB,gDAA6C,CAE7C,gBAAiB,CAEjB,iBAEF,CAGA,0DAEE,4CAAsC,CADtC,0DAEF,CAEA,2DAEE,8CAAuC,CADvC,2DAEF,CAGA,kEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,4EACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,iEACE,4EAAgD,CAEhD,+FAAkG,CADlG,2DAEF,CAEA,iEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,iEACE,kFAAmD,CAEnD,kGAAqG,CADrG,2DAEF,CAEA,kEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,iEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,4DACE,qGAAgF,CAEhF,kIACqF,CAFrF,2DAGF,CAEA,iEACE,qGAAgF,CAEhF,kIACqF,CAFrF,2DAGF,CAEA,kEACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,2DACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,6DACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,kEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,iEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,qEACE,qGAAgF,CAEhF,kIACqF,CAFrF,2DAGF,CAEA,kEACE,4EAAgD,CAEhD,+FAAkG,CADlG,2DAEF,CAEA,+DACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,2BACE,sCACF,CAEA,oDACE,SACF","file":"StateLabel-cd51ae39.css","sourcesContent":[".StateLabel {\n display: inline-flex;\n align-items: center;\n font-weight: var(--base-text-weight-semibold);\n /* stylelint-disable-next-line primer/typography */\n line-height: 16px;\n color: var(--fgColor-onEmphasis);\n text-align: center;\n border-radius: var(--borderRadius-full);\n}\n\n/* Size variants */\n.StateLabel:where([data-size='small']) {\n padding: var(--base-size-4) var(--base-size-8);\n font-size: var(--text-body-size-small);\n}\n\n.StateLabel:where([data-size='medium']) {\n padding: var(--base-size-8) var(--base-size-12);\n font-size: var(--text-body-size-medium);\n}\n\n/* Status color variants */\n.StateLabel:where([data-status='issueClosed']) {\n background-color: var(--bgColor-done-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='issueClosedNotPlanned']) {\n background-color: var(--bgColor-neutral-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullClosed']) {\n background-color: var(--bgColor-closed-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullMerged']) {\n background-color: var(--bgColor-done-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullQueued']) {\n background-color: var(--bgColor-attention-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='issueOpened']) {\n background-color: var(--bgColor-open-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullOpened']) {\n background-color: var(--bgColor-open-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='draft']) {\n background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px)\n var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent));\n}\n\n.StateLabel:where([data-status='issueDraft']) {\n background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px)\n var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent));\n}\n\n.StateLabel:where([data-status='unavailable']) {\n background-color: var(--bgColor-neutral-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='open']) {\n background-color: var(--bgColor-open-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='closed']) {\n background-color: var(--bgColor-done-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='alertOpened']) {\n background-color: var(--bgColor-open-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='alertFixed']) {\n background-color: var(--bgColor-done-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='alertDismissed']) {\n background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px)\n var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent));\n}\n\n.StateLabel:where([data-status='alertClosed']) {\n background-color: var(--bgColor-closed-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='archived']) {\n background-color: var(--bgColor-neutral-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.Icon {\n margin-right: var(--base-size-4);\n}\n\n.Icon:where([data-size-small]) {\n width: 1em;\n}\n"]}
|
|
@@ -16,6 +16,7 @@ declare const octiconMap: {
|
|
|
16
16
|
alertClosed: import("@primer/octicons-react").Icon;
|
|
17
17
|
open: null;
|
|
18
18
|
closed: null;
|
|
19
|
+
archived: import("@primer/octicons-react").Icon;
|
|
19
20
|
};
|
|
20
21
|
export type StateLabelProps = React.HTMLAttributes<HTMLSpanElement> & {
|
|
21
22
|
size?: 'small' | 'medium';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StateLabel.d.ts","sourceRoot":"","sources":["../../src/StateLabel/StateLabel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"StateLabel.d.ts","sourceRoot":"","sources":["../../src/StateLabel/StateLabel.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,UAAU;;;;;;;;;;;;;;;;;;CAkBf,CAAA;AAyBD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG;IACpE,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACzB,2EAA2E;IAC3E,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC5B,MAAM,EAAE,MAAM,OAAO,UAAU,CAAA;CAChC,CAAA;AAED,QAAA,MAAM,UAAU;WANP,OAAO,GAAG,QAAQ;IACzB,2EAA2E;cACjE,QAAQ,GAAG,OAAO;YACpB,MAAM,OAAO,UAAU;yCA+BhC,CAAA;AAID,eAAe,UAAU,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { c } from 'react-compiler-runtime';
|
|
2
|
-
import { ShieldXIcon, ShieldSlashIcon, ShieldCheckIcon, ShieldIcon, AlertIcon, GitMergeQueueIcon, IssueDraftIcon, GitPullRequestDraftIcon, GitMergeIcon, GitPullRequestClosedIcon, SkipIcon, IssueClosedIcon, GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react';
|
|
2
|
+
import { ArchiveIcon, ShieldXIcon, ShieldSlashIcon, ShieldCheckIcon, ShieldIcon, AlertIcon, GitMergeQueueIcon, IssueDraftIcon, GitPullRequestDraftIcon, GitMergeIcon, GitPullRequestClosedIcon, SkipIcon, IssueClosedIcon, GitPullRequestIcon, IssueOpenedIcon } from '@primer/octicons-react';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import { clsx } from 'clsx';
|
|
5
5
|
import classes from './StateLabel.module.css.js';
|
|
@@ -22,7 +22,8 @@ const octiconMap = {
|
|
|
22
22
|
alertDismissed: ShieldSlashIcon,
|
|
23
23
|
alertClosed: ShieldXIcon,
|
|
24
24
|
open: null,
|
|
25
|
-
closed: null
|
|
25
|
+
closed: null,
|
|
26
|
+
archived: ArchiveIcon
|
|
26
27
|
};
|
|
27
28
|
const labelMap = {
|
|
28
29
|
issueOpened: 'Issue',
|
|
@@ -39,6 +40,7 @@ const labelMap = {
|
|
|
39
40
|
alertFixed: 'Alert',
|
|
40
41
|
alertDismissed: 'Alert',
|
|
41
42
|
alertClosed: 'Alert',
|
|
43
|
+
archived: 'Archived',
|
|
42
44
|
open: '',
|
|
43
45
|
closed: ''
|
|
44
46
|
};
|
|
@@ -7147,6 +7147,10 @@
|
|
|
7147
7147
|
{
|
|
7148
7148
|
"id": "components-statelabel-features--closed",
|
|
7149
7149
|
"code": "() => <StateLabel status=\"closed\">Closed</StateLabel>"
|
|
7150
|
+
},
|
|
7151
|
+
{
|
|
7152
|
+
"id": "components-statelabel-features--archived",
|
|
7153
|
+
"code": "() => <StateLabel status=\"archived\">Archived</StateLabel>"
|
|
7150
7154
|
}
|
|
7151
7155
|
],
|
|
7152
7156
|
"importPath": "@primer/react",
|
|
@@ -7158,7 +7162,7 @@
|
|
|
7158
7162
|
},
|
|
7159
7163
|
{
|
|
7160
7164
|
"name": "status",
|
|
7161
|
-
"type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'pullQueued' | 'unavailable' | 'alertOpened' | 'alertFixed' | 'alertDismissed' | 'alertClosed' | 'open' | 'closed'",
|
|
7165
|
+
"type": "'issueOpened' | 'issueClosed' | 'issueClosedNotPlanned' | 'pullOpened' | 'pullClosed' | 'pullMerged' | 'draft' | 'issueDraft' | 'pullQueued' | 'unavailable' | 'alertOpened' | 'alertFixed' | 'alertDismissed' | 'alertClosed' | 'open' | 'closed' | 'archived'",
|
|
7162
7166
|
"required": true
|
|
7163
7167
|
}
|
|
7164
7168
|
],
|
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.19.0-rc.c09ee891a",
|
|
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",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"build": "./script/build",
|
|
40
40
|
"clean": "rimraf dist generated",
|
|
41
41
|
"start": "concurrently npm:start:*",
|
|
42
|
-
"start:storybook": "STORYBOOK=true storybook dev -p 6006",
|
|
42
|
+
"start:storybook": "STORYBOOK=true storybook dev -p 6006 --no-open",
|
|
43
43
|
"build:storybook": "storybook build",
|
|
44
44
|
"build:docs": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs",
|
|
45
45
|
"build:docs:preview": "NODE_OPTIONS=--openssl-legacy-provider script/build-docs preview",
|
|
@@ -115,11 +115,12 @@
|
|
|
115
115
|
"@rollup/plugin-node-resolve": "16.0.3",
|
|
116
116
|
"@rollup/plugin-typescript": "12.3.0",
|
|
117
117
|
"@rollup/plugin-virtual": "3.0.2",
|
|
118
|
-
"@storybook/addon-a11y": "^10.
|
|
119
|
-
"@storybook/addon-docs": "^10.
|
|
120
|
-
"@storybook/addon-links": "^10.
|
|
118
|
+
"@storybook/addon-a11y": "^10.3.3",
|
|
119
|
+
"@storybook/addon-docs": "^10.3.3",
|
|
120
|
+
"@storybook/addon-links": "^10.3.3",
|
|
121
|
+
"@storybook/addon-mcp": "^0.4.2",
|
|
121
122
|
"@storybook/icons": "^2.0.1",
|
|
122
|
-
"@storybook/react-vite": "^10.
|
|
123
|
+
"@storybook/react-vite": "^10.3.3",
|
|
123
124
|
"@testing-library/dom": "^10.4.0",
|
|
124
125
|
"@testing-library/jest-dom": "^6.4.5",
|
|
125
126
|
"@testing-library/react": "^16.3.0",
|
|
@@ -173,7 +174,7 @@
|
|
|
173
174
|
"rimraf": "5.0.5",
|
|
174
175
|
"rollup": "4.59.0",
|
|
175
176
|
"rollup-plugin-import-css": "^0.0.0",
|
|
176
|
-
"storybook": "^10.
|
|
177
|
+
"storybook": "^10.3.3",
|
|
177
178
|
"terser": "5.36.0",
|
|
178
179
|
"ts-toolbelt": "9.6.0",
|
|
179
180
|
"tsx": "4.20.3",
|
|
@@ -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-Wrapper-w6jU3{anchor-scope:--anchored-overlay-anchor}.prc-AnchoredOverlay-Anchor-DWRfK{anchor-name:--anchored-overlay-anchor}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z{position-anchor:--anchored-overlay-anchor;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;position-visibility:anchors-visible;position:fixed;z-index:100}.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-top]{bottom:anchor(top);left:anchor(left);margin-bottom:var(--base-size-4,.25rem)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-left]{margin-right:var(--base-size-4,.25rem);right:anchor(left);top:anchor(top)}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[data-side=outside-right]{left:anchor(right);margin-left:var(--base-size-4,.25rem);top:anchor(top)}
|
|
2
|
-
/*# sourceMappingURL=AnchoredOverlay-0f6f45b5.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,mCACE,sCACF,CAEA,kCAEE,qCACF,CAEA,2CAEE,yCAA0C,CAC1C,oEAGwB,CACxB,mCAAoC,CAEpC,cAAe,CADf,WA0BF,CAvBE,qEAGE,iBAAkB,CADlB,oDAEF,CAEA,kEAEE,kBAAmB,CACnB,iBAAkB,CAFlB,uCAGF,CAEA,mEAGE,sCAAgC,CAFhC,kBAAmB,CACnB,eAEF,CAEA,oEACE,kBAAmB,CAEnB,qCAA+B,CAD/B,eAEF","file":"AnchoredOverlay-0f6f45b5.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.Wrapper {\n anchor-scope: --anchored-overlay-anchor;\n}\n\n.Anchor {\n /* Anchor name, this is currently tied to `renderAnchor` */\n anchor-name: --anchored-overlay-anchor;\n}\n\n.AnchoredOverlay {\n /* Anchor position, this is currently tied to `<Overlay>` */\n position-anchor: --anchored-overlay-anchor;\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;\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\n &[data-side='outside-top'] {\n margin-bottom: var(--base-size-4);\n bottom: anchor(top);\n left: anchor(left);\n }\n\n &[data-side='outside-left'] {\n right: anchor(left);\n top: anchor(top);\n margin-right: var(--base-size-4);\n }\n\n &[data-side='outside-right'] {\n left: anchor(right);\n top: anchor(top);\n margin-left: var(--base-size-4);\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/StateLabel/StateLabel.module.css.js"],"names":[],"mappings":"AAAA,iCAEE,kBAAmB,CAMnB,kDAAuC,CAFvC,2DAAgC,CALhC,mBAAoB,CAEpB,gDAA6C,CAE7C,gBAAiB,CAEjB,iBAEF,CAGA,0DAEE,4CAAsC,CADtC,0DAEF,CAEA,2DAEE,8CAAuC,CADvC,2DAEF,CAGA,kEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,4EACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,iEACE,4EAAgD,CAEhD,+FAAkG,CADlG,2DAEF,CAEA,iEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,iEACE,kFAAmD,CAEnD,kGAAqG,CADrG,2DAEF,CAEA,kEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,iEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,4DACE,qGAAgF,CAEhF,kIACqF,CAFrF,2DAGF,CAEA,iEACE,qGAAgF,CAEhF,kIACqF,CAFrF,2DAGF,CAEA,kEACE,uEAAiD,CAEjD,gGAAmG,CADnG,2DAEF,CAEA,2DACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,6DACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,kEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,iEACE,wEAA8C,CAE9C,6FAAgG,CADhG,2DAEF,CAEA,qEACE,qGAAgF,CAEhF,kIACqF,CAFrF,2DAGF,CAEA,kEACE,4EAAgD,CAEhD,+FAAkG,CADlG,2DAEF,CAEA,2BACE,sCACF,CAEA,oDACE,SACF","file":"StateLabel-056eec66.css","sourcesContent":[".StateLabel {\n display: inline-flex;\n align-items: center;\n font-weight: var(--base-text-weight-semibold);\n /* stylelint-disable-next-line primer/typography */\n line-height: 16px;\n color: var(--fgColor-onEmphasis);\n text-align: center;\n border-radius: var(--borderRadius-full);\n}\n\n/* Size variants */\n.StateLabel:where([data-size='small']) {\n padding: var(--base-size-4) var(--base-size-8);\n font-size: var(--text-body-size-small);\n}\n\n.StateLabel:where([data-size='medium']) {\n padding: var(--base-size-8) var(--base-size-12);\n font-size: var(--text-body-size-medium);\n}\n\n/* Status color variants */\n.StateLabel:where([data-status='issueClosed']) {\n background-color: var(--bgColor-done-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='issueClosedNotPlanned']) {\n background-color: var(--bgColor-neutral-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullClosed']) {\n background-color: var(--bgColor-closed-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullMerged']) {\n background-color: var(--bgColor-done-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullQueued']) {\n background-color: var(--bgColor-attention-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-attention-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='issueOpened']) {\n background-color: var(--bgColor-open-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='pullOpened']) {\n background-color: var(--bgColor-open-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='draft']) {\n background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px)\n var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent));\n}\n\n.StateLabel:where([data-status='issueDraft']) {\n background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px)\n var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent));\n}\n\n.StateLabel:where([data-status='unavailable']) {\n background-color: var(--bgColor-neutral-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-neutral-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='open']) {\n background-color: var(--bgColor-open-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='closed']) {\n background-color: var(--bgColor-done-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='alertOpened']) {\n background-color: var(--bgColor-open-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-open-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='alertFixed']) {\n background-color: var(--bgColor-done-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-done-emphasis, transparent);\n}\n\n.StateLabel:where([data-status='alertDismissed']) {\n background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px)\n var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis, transparent));\n}\n\n.StateLabel:where([data-status='alertClosed']) {\n background-color: var(--bgColor-closed-emphasis);\n color: var(--fgColor-onEmphasis);\n box-shadow: var(--boxShadow-thin, inset 0 0 0 1px) var(--borderColor-closed-emphasis, transparent);\n}\n\n.Icon {\n margin-right: var(--base-size-4);\n}\n\n.Icon:where([data-size-small]) {\n width: 1em;\n}\n"]}
|