@primer/react 0.0.0-20260324152507 → 0.0.0-20260324162638
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 +3 -3
- package/dist/AnchoredOverlay/AnchoredOverlay-0f6f45b5.css +2 -0
- package/dist/AnchoredOverlay/AnchoredOverlay-0f6f45b5.css.map +1 -0
- package/dist/AnchoredOverlay/AnchoredOverlay.d.ts.map +1 -1
- package/dist/AnchoredOverlay/AnchoredOverlay.js +10 -46
- package/dist/AnchoredOverlay/AnchoredOverlay.module.css.js +2 -2
- package/dist/FilteredActionList/FilteredActionList-6808e67a.css +2 -0
- package/dist/FilteredActionList/FilteredActionList-6808e67a.css.map +1 -0
- package/dist/FilteredActionList/FilteredActionList.module.css.js +1 -1
- package/dist/Overlay/Overlay.d.ts +0 -2
- package/dist/Overlay/Overlay.d.ts.map +1 -1
- package/dist/Overlay/Overlay.js +83 -100
- package/package.json +1 -1
- package/dist/AnchoredOverlay/AnchoredOverlay-647c7065.css +0 -2
- package/dist/AnchoredOverlay/AnchoredOverlay-647c7065.css.map +0 -1
- package/dist/FilteredActionList/FilteredActionList-02db90c6.css +0 -2
- package/dist/FilteredActionList/FilteredActionList-02db90c6.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @primer/react
|
|
2
2
|
|
|
3
|
-
## 0.0.0-
|
|
3
|
+
## 0.0.0-20260324162638
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -13,10 +13,10 @@
|
|
|
13
13
|
|
|
14
14
|
- [#7623](https://github.com/primer/react/pull/7623) [`42847d1`](https://github.com/primer/react/commit/42847d1bb943c2db6d2309dfd604e8d3ab55d387) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - `IconButton`: `keybindingHint` now accepts `string[]` in addition to `string`. Multiple hints are rendered joined with "or".
|
|
15
15
|
|
|
16
|
-
- [#7677](https://github.com/primer/react/pull/7677) [`2d29a81`](https://github.com/primer/react/commit/2d29a815894fdcf07130567de616f821d872f02e) Thanks [@TylerJDev](https://github.com/TylerJDev)! - AnchoredOverlay: Add Popover API to AnchoredOverlay (behind `primer_react_css_anchor_positioning` feature flag)
|
|
17
|
-
|
|
18
16
|
### Patch Changes
|
|
19
17
|
|
|
18
|
+
- [#7696](https://github.com/primer/react/pull/7696) [`40d7163`](https://github.com/primer/react/commit/40d7163ea42ee239582f0a08586320c72c07e57f) Thanks [@francinelucca](https://github.com/francinelucca)! - Fix item dividers not visible in SelectPanel and FilteredActionList when `showItemDividers` is enabled, caused by `content-visibility: auto` clipping the absolutely-positioned divider pseudo-elements.
|
|
19
|
+
|
|
20
20
|
- Fake entry to force publishing
|
|
21
21
|
|
|
22
22
|
- [#7510](https://github.com/primer/react/pull/7510) [`8fa988b`](https://github.com/primer/react/commit/8fa988ba613117874657af722ef6de768b0e0eb8) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu under feature flag
|
|
@@ -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-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 */
|
|
@@ -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,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 +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,5 +1,4 @@
|
|
|
1
1
|
import { useCallback, useRef, useEffect } from 'react';
|
|
2
|
-
import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
|
|
3
2
|
import { useFocusTrap } from '../hooks/useFocusTrap.js';
|
|
4
3
|
import { useFocusZone } from '../hooks/useFocusZone.js';
|
|
5
4
|
import { useId } from '../hooks/useId.js';
|
|
@@ -78,17 +77,12 @@ const AnchoredOverlay = ({
|
|
|
78
77
|
if (event_0.defaultPrevented || event_0.button !== 0) {
|
|
79
78
|
return;
|
|
80
79
|
}
|
|
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
|
-
}
|
|
86
80
|
if (!open) {
|
|
87
81
|
onOpen === null || onOpen === void 0 ? void 0 : onOpen('anchor-click');
|
|
88
82
|
} else {
|
|
89
83
|
onClose === null || onClose === void 0 ? void 0 : onClose('anchor-click');
|
|
90
84
|
}
|
|
91
|
-
}, [open, onOpen, onClose
|
|
85
|
+
}, [open, onOpen, onClose]);
|
|
92
86
|
const positionChange = position => {
|
|
93
87
|
if (onPositionChange && position) {
|
|
94
88
|
onPositionChange({
|
|
@@ -130,48 +124,14 @@ const AnchoredOverlay = ({
|
|
|
130
124
|
disabled: !open || !position_0,
|
|
131
125
|
...focusTrapSettings
|
|
132
126
|
});
|
|
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
|
-
// This is necessary when using a Portal, as React re-renders can replace
|
|
151
|
-
// the DOM node, causing the popover to lose its :popover-open state.
|
|
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]);
|
|
166
127
|
const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton;
|
|
167
128
|
const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby'];
|
|
168
129
|
const XButtonAriaLabel = closeButtonProps['aria-label'];
|
|
169
130
|
const {
|
|
170
131
|
className: overlayClassName,
|
|
171
|
-
disablePortal,
|
|
172
132
|
...restOverlayProps
|
|
173
133
|
} = overlayProps || {};
|
|
174
|
-
|
|
134
|
+
const innerContent = /*#__PURE__*/jsxs(Fragment, {
|
|
175
135
|
children: [renderAnchor && renderAnchor({
|
|
176
136
|
ref: anchorRef,
|
|
177
137
|
id: anchorId,
|
|
@@ -181,8 +141,7 @@ const AnchoredOverlay = ({
|
|
|
181
141
|
onClick: onAnchorClick,
|
|
182
142
|
onKeyDown: onAnchorKeyDown,
|
|
183
143
|
...(cssAnchorPositioning ? {
|
|
184
|
-
|
|
185
|
-
popoverTarget: popoverId
|
|
144
|
+
className: classes.Anchor
|
|
186
145
|
} : {})
|
|
187
146
|
}), open ? /*#__PURE__*/jsxs(Overlay, {
|
|
188
147
|
returnFocusRef: anchorRef,
|
|
@@ -200,9 +159,7 @@ const AnchoredOverlay = ({
|
|
|
200
159
|
className: clsx(className, overlayClassName, cssAnchorPositioning ? classes.AnchoredOverlay : undefined),
|
|
201
160
|
preventOverflow: preventOverflow,
|
|
202
161
|
"data-component": "AnchoredOverlay",
|
|
203
|
-
disablePortal: disablePortal,
|
|
204
162
|
...restOverlayProps,
|
|
205
|
-
id: cssAnchorPositioning ? popoverId : undefined,
|
|
206
163
|
ref: node => {
|
|
207
164
|
if (overlayProps !== null && overlayProps !== void 0 && overlayProps.ref) {
|
|
208
165
|
assignRef(overlayProps.ref, node);
|
|
@@ -233,6 +190,13 @@ const AnchoredOverlay = ({
|
|
|
233
190
|
}) : null, children]
|
|
234
191
|
}) : null]
|
|
235
192
|
});
|
|
193
|
+
if (cssAnchorPositioning) {
|
|
194
|
+
return /*#__PURE__*/jsx("div", {
|
|
195
|
+
className: classes.Wrapper,
|
|
196
|
+
children: innerContent
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
return innerContent;
|
|
236
200
|
};
|
|
237
201
|
function assignRef(ref, value) {
|
|
238
202
|
if (typeof ref === 'function') {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './AnchoredOverlay-
|
|
1
|
+
import './AnchoredOverlay-0f6f45b5.css';
|
|
2
2
|
|
|
3
|
-
var classes = {"ResponsiveCloseButtonContainer":"prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium","ResponsiveCloseButton":"prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx","AnchoredOverlay":"prc-AnchoredOverlay-AnchoredOverlay-fYg9Z"};
|
|
3
|
+
var classes = {"ResponsiveCloseButtonContainer":"prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium","ResponsiveCloseButton":"prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx","Wrapper":"prc-AnchoredOverlay-Wrapper-w6jU3","Anchor":"prc-AnchoredOverlay-Anchor-DWRfK","AnchoredOverlay":"prc-AnchoredOverlay-AnchoredOverlay-fYg9Z"};
|
|
4
4
|
|
|
5
5
|
export { classes as default };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.prc-FilteredActionList-Root-QgIk1{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Header-y6ihu{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));z-index:1}.prc-FilteredActionList-Container-647gF{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-Container-647gF .prc-FilteredActionList-ActionListItem-RSinr:not(:focus,[data-is-active-descendant],[data-active],[data-input-focused]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-FilteredActionList-Container-647gF [data-dividers=true] .prc-FilteredActionList-ActionListItem-RSinr{content-visibility:visible}.prc-FilteredActionList-ActionList-3-Bxb{flex-grow:1}.prc-FilteredActionList-ActionListItem-RSinr:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-CJvWO{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-X2ij0{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-Axs5l{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-Bi-PZ{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
|
|
2
|
+
/*# sourceMappingURL=FilteredActionList-6808e67a.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css.js","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,qCAEE,yEAA8C,CAC9C,SACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAiBF,CAXE,gKAEE,gCAAiC,CADjC,uBAEF,CAKA,0GACE,0BACF,CAGF,yCACE,WACF,CAEA,mDACE,wGAKF,CAHE,yDCjCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDuCA,CAGF,mGACE,wGAKF,CAHE,yGCzCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BD+CA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-6808e67a.css","sourcesContent":[".Root {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.Header {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n z-index: 1;\n}\n\n.Container {\n display: flex;\n height: 100%;\n overflow: auto;\n flex-grow: 1;\n\n /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {\n content-visibility: auto;\n contain-intrinsic-size: auto 32px;\n }\n\n /* When showDividers is enabled, divider ::before pseudo-elements on ActionListSubContent are\n positioned outside the item bounds (top: -7px). content-visibility: auto applies paint containment\n which clips these, so we must disable it for items in lists with dividers. */\n & [data-dividers='true'] .ActionListItem {\n content-visibility: visible;\n }\n}\n\n.ActionList {\n flex-grow: 1;\n}\n\n.ActionListItem:focus {\n background: var(--control-transparent-bgColor-selected);\n\n &::after {\n @mixin activeIndicatorLine;\n }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n background: var(--control-transparent-bgColor-selected);\n\n &::after {\n @mixin activeIndicatorLine;\n }\n}\n\n.FullScreenTextInput {\n @media screen and (--viewportRange-narrow) {\n /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n @supports (-webkit-touch-callout: none) {\n font-size: var(--text-title-size-small);\n }\n }\n}\n\n.SelectAllContainer {\n display: flex;\n align-items: center;\n padding-block: var(--base-size-4);\n padding-inline: var(--base-size-16);\n background: var(--bgColor-muted);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n /* -1px hack to offset 1px border-bottom causing uneven alignment */\n /* stylelint-disable-next-line primer/spacing */\n margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n position: absolute;\n top: var(--base-size-4);\n left: calc(-1 * var(--base-size-8));\n width: var(--base-size-4);\n height: calc(100% - var(--base-size-8));\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import './FilteredActionList-
|
|
1
|
+
import './FilteredActionList-6808e67a.css';
|
|
2
2
|
|
|
3
3
|
var classes = {"Root":"prc-FilteredActionList-Root-QgIk1","Header":"prc-FilteredActionList-Header-y6ihu","Container":"prc-FilteredActionList-Container-647gF","ActionListItem":"prc-FilteredActionList-ActionListItem-RSinr","ActionList":"prc-FilteredActionList-ActionList-3-Bxb","FullScreenTextInput":"prc-FilteredActionList-FullScreenTextInput-CJvWO","SelectAllContainer":"prc-FilteredActionList-SelectAllContainer-X2ij0","SelectAllCheckbox":"prc-FilteredActionList-SelectAllCheckbox-Axs5l","SelectAllLabel":"prc-FilteredActionList-SelectAllLabel-Bi-PZ"};
|
|
4
4
|
|
|
@@ -61,7 +61,6 @@ type OwnOverlayProps = Merge<StyledOverlayProps, BaseOverlayProps>;
|
|
|
61
61
|
export declare const BaseOverlay: PolymorphicForwardRefComponent<"div", OwnOverlayProps>;
|
|
62
62
|
type ContainerProps = {
|
|
63
63
|
anchorSide?: AnchorSide;
|
|
64
|
-
disablePortal?: boolean;
|
|
65
64
|
ignoreClickRefs?: React.RefObject<HTMLElement | null>[];
|
|
66
65
|
initialFocusRef?: React.RefObject<HTMLElement | null>;
|
|
67
66
|
onClickOutside: (e: TouchOrMouseEvent) => void;
|
|
@@ -74,7 +73,6 @@ type ContainerProps = {
|
|
|
74
73
|
type internalOverlayProps = Merge<OwnOverlayProps, ContainerProps>;
|
|
75
74
|
/**
|
|
76
75
|
* @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
|
|
77
|
-
* @param disablePortal Optional. If true, the Overlay will not be rendered in a Portal. Defaults to false. When using CSS anchor positioning, popovers render in the browser's top layer which already escapes stacking contexts, so a Portal is not strictly necessary but still useful for style isolation.
|
|
78
76
|
* @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
|
|
79
77
|
* @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
|
|
80
78
|
* @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Overlay.d.ts","sourceRoot":"","sources":["../../src/Overlay/Overlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,qBAAqB,EAAe,MAAM,OAAO,CAAA;AAC9D,OAAO,KAA0B,MAAM,OAAO,CAAA;AAE9C,OAAO,KAAK,EAAC,QAAQ,EAAE,KAAK,EAAC,MAAM,gBAAgB,CAAA;AACnD,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,UAAU,CAAA;AAI/C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAA;AACjD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,KAAK,kBAAkB,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,QAAQ,CAAA;IAC7B,MAAM,CAAC,EAAE,MAAM,OAAO,SAAS,CAAA;IAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC,CAAA;IAC5D,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC,OAAO,QAAQ,EAAE,MAAM,CAAC,CAAA;IAC9C,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,CAAA;IACnD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,SAAS;;;;;;;;;CASrB,CAAA;AAGD,QAAA,MAAM,QAAQ;;;;;;;CAOb,CAAA;AAiBD,KAAK,gBAAgB,GAAG;IACtB,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;IAChC,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAA;IAClC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAA;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAA;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,iBAAiB,CAAC,EAAE,YAAY,CAAA;CACjC,CAAA;AAED,KAAK,eAAe,GAAG,KAAK,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAA;AAElE;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,EA+CnB,8BAA8B,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;AAE3D,KAAK,cAAc,GAAG;IACpB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,
|
|
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
|
@@ -101,7 +101,6 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
|
|
|
101
101
|
});
|
|
102
102
|
/**
|
|
103
103
|
* @param anchorSide If provided, the Overlay will slide into position from the side of the anchor with a brief animation
|
|
104
|
-
* @param disablePortal Optional. If true, the Overlay will not be rendered in a Portal. Defaults to false. When using CSS anchor positioning, popovers render in the browser's top layer which already escapes stacking contexts, so a Portal is not strictly necessary but still useful for style isolation.
|
|
105
104
|
* @param height Sets the height of the `Overlay`, pick from our set list of heights, or pass `auto` to automatically set the height based on the content of the `Overlay`, or pass `initial` to set the height based on the initial content of the `Overlay` (i.e. ignoring content changes). `xsmall` corresponds to `192px`, `small` corresponds to `256px`, `medium` corresponds to `320px`, `large` corresponds to `432px`, `xlarge` corresponds to `600px`.
|
|
106
105
|
* @param ignoreClickRefs Optional. An array of ref objects to ignore clicks on in the `onOutsideClick` behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the `Overlay` to prevent the `Overlay` from being toggled twice.
|
|
107
106
|
* @param initialFocusRef Optional. Ref for the element to focus when the `Overlay` is opened. If nothing is provided, the first focusable element in the `Overlay` body is focused.
|
|
@@ -117,9 +116,8 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
|
|
|
117
116
|
|
|
118
117
|
*/
|
|
119
118
|
const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
120
|
-
const $ = c(
|
|
119
|
+
const $ = c(48);
|
|
121
120
|
let anchorSide;
|
|
122
|
-
let disablePortal;
|
|
123
121
|
let ignoreClickRefs;
|
|
124
122
|
let initialFocusRef;
|
|
125
123
|
let left;
|
|
@@ -139,7 +137,6 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
139
137
|
if ($[0] !== t0) {
|
|
140
138
|
({
|
|
141
139
|
anchorSide,
|
|
142
|
-
disablePortal,
|
|
143
140
|
height: t1,
|
|
144
141
|
ignoreClickRefs,
|
|
145
142
|
initialFocusRef,
|
|
@@ -159,42 +156,40 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
159
156
|
} = t0);
|
|
160
157
|
$[0] = t0;
|
|
161
158
|
$[1] = anchorSide;
|
|
162
|
-
$[2] =
|
|
163
|
-
$[3] =
|
|
164
|
-
$[4] =
|
|
165
|
-
$[5] =
|
|
166
|
-
$[6] =
|
|
167
|
-
$[7] =
|
|
168
|
-
$[8] =
|
|
169
|
-
$[9] =
|
|
170
|
-
$[10] =
|
|
171
|
-
$[11] =
|
|
172
|
-
$[12] =
|
|
173
|
-
$[13] =
|
|
174
|
-
$[14] =
|
|
175
|
-
$[15] =
|
|
176
|
-
$[16] =
|
|
177
|
-
$[17] =
|
|
178
|
-
$[18] = t5;
|
|
159
|
+
$[2] = ignoreClickRefs;
|
|
160
|
+
$[3] = initialFocusRef;
|
|
161
|
+
$[4] = left;
|
|
162
|
+
$[5] = onClickOutside;
|
|
163
|
+
$[6] = onEscape;
|
|
164
|
+
$[7] = portalContainerName;
|
|
165
|
+
$[8] = preventFocusOnOpen;
|
|
166
|
+
$[9] = props;
|
|
167
|
+
$[10] = responsiveVariant;
|
|
168
|
+
$[11] = returnFocusRef;
|
|
169
|
+
$[12] = right;
|
|
170
|
+
$[13] = t1;
|
|
171
|
+
$[14] = t2;
|
|
172
|
+
$[15] = t3;
|
|
173
|
+
$[16] = t4;
|
|
174
|
+
$[17] = t5;
|
|
179
175
|
} else {
|
|
180
176
|
anchorSide = $[1];
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
t5 = $[18];
|
|
177
|
+
ignoreClickRefs = $[2];
|
|
178
|
+
initialFocusRef = $[3];
|
|
179
|
+
left = $[4];
|
|
180
|
+
onClickOutside = $[5];
|
|
181
|
+
onEscape = $[6];
|
|
182
|
+
portalContainerName = $[7];
|
|
183
|
+
preventFocusOnOpen = $[8];
|
|
184
|
+
props = $[9];
|
|
185
|
+
responsiveVariant = $[10];
|
|
186
|
+
returnFocusRef = $[11];
|
|
187
|
+
right = $[12];
|
|
188
|
+
t1 = $[13];
|
|
189
|
+
t2 = $[14];
|
|
190
|
+
t3 = $[15];
|
|
191
|
+
t4 = $[16];
|
|
192
|
+
t5 = $[17];
|
|
198
193
|
}
|
|
199
194
|
const height = t1 === undefined ? "auto" : t1;
|
|
200
195
|
const preventOverflow = t2 === undefined ? true : t2;
|
|
@@ -206,7 +201,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
206
201
|
const overlayRef = useRef(null);
|
|
207
202
|
useRefObjectAsForwardedRef(forwardedRef, overlayRef);
|
|
208
203
|
let t6;
|
|
209
|
-
if ($[
|
|
204
|
+
if ($[18] !== ignoreClickRefs || $[19] !== initialFocusRef || $[20] !== onClickOutside || $[21] !== onEscape || $[22] !== preventFocusOnOpen || $[23] !== returnFocusRef) {
|
|
210
205
|
t6 = {
|
|
211
206
|
overlayRef,
|
|
212
207
|
returnFocusRef,
|
|
@@ -216,20 +211,20 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
216
211
|
initialFocusRef,
|
|
217
212
|
preventFocusOnOpen
|
|
218
213
|
};
|
|
219
|
-
$[
|
|
220
|
-
$[
|
|
221
|
-
$[
|
|
222
|
-
$[
|
|
223
|
-
$[
|
|
224
|
-
$[
|
|
225
|
-
$[
|
|
214
|
+
$[18] = ignoreClickRefs;
|
|
215
|
+
$[19] = initialFocusRef;
|
|
216
|
+
$[20] = onClickOutside;
|
|
217
|
+
$[21] = onEscape;
|
|
218
|
+
$[22] = preventFocusOnOpen;
|
|
219
|
+
$[23] = returnFocusRef;
|
|
220
|
+
$[24] = t6;
|
|
226
221
|
} else {
|
|
227
|
-
t6 = $[
|
|
222
|
+
t6 = $[24];
|
|
228
223
|
}
|
|
229
224
|
useOverlay(t6);
|
|
230
225
|
let t7;
|
|
231
226
|
let t8;
|
|
232
|
-
if ($[
|
|
227
|
+
if ($[25] !== height) {
|
|
233
228
|
t7 = () => {
|
|
234
229
|
var _overlayRef$current;
|
|
235
230
|
if (height === "initial" && (_overlayRef$current = overlayRef.current) !== null && _overlayRef$current !== void 0 && _overlayRef$current.clientHeight) {
|
|
@@ -237,17 +232,17 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
237
232
|
}
|
|
238
233
|
};
|
|
239
234
|
t8 = [height];
|
|
240
|
-
$[
|
|
241
|
-
$[
|
|
242
|
-
$[
|
|
235
|
+
$[25] = height;
|
|
236
|
+
$[26] = t7;
|
|
237
|
+
$[27] = t8;
|
|
243
238
|
} else {
|
|
244
|
-
t7 = $[
|
|
245
|
-
t8 = $[
|
|
239
|
+
t7 = $[26];
|
|
240
|
+
t8 = $[27];
|
|
246
241
|
}
|
|
247
242
|
useEffect(t7, t8);
|
|
248
243
|
let t10;
|
|
249
244
|
let t9;
|
|
250
|
-
if ($[
|
|
245
|
+
if ($[28] !== anchorSide || $[29] !== visibility) {
|
|
251
246
|
t9 = () => {
|
|
252
247
|
var _overlayRef$current2;
|
|
253
248
|
const {
|
|
@@ -265,40 +260,30 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
265
260
|
});
|
|
266
261
|
};
|
|
267
262
|
t10 = [anchorSide, 8, "cubic-bezier(0.33, 1, 0.68, 1)", visibility];
|
|
268
|
-
$[
|
|
269
|
-
$[
|
|
270
|
-
$[
|
|
271
|
-
$[
|
|
263
|
+
$[28] = anchorSide;
|
|
264
|
+
$[29] = visibility;
|
|
265
|
+
$[30] = t10;
|
|
266
|
+
$[31] = t9;
|
|
272
267
|
} else {
|
|
273
|
-
t10 = $[
|
|
274
|
-
t9 = $[
|
|
268
|
+
t10 = $[30];
|
|
269
|
+
t9 = $[31];
|
|
275
270
|
}
|
|
276
271
|
useIsomorphicLayoutEffect(t9, t10);
|
|
277
272
|
const leftPosition = left === undefined && right === undefined ? 0 : left;
|
|
278
273
|
const t11 = !preventOverflow ? true : undefined;
|
|
279
274
|
let t12;
|
|
280
|
-
if ($[
|
|
275
|
+
if ($[32] !== featureFlagMaxHeightClampToViewport) {
|
|
281
276
|
t12 = featureFlagMaxHeightClampToViewport ? {
|
|
282
277
|
"data-max-height-clamp-to-viewport": ""
|
|
283
278
|
} : {};
|
|
284
|
-
$[
|
|
285
|
-
$[
|
|
279
|
+
$[32] = featureFlagMaxHeightClampToViewport;
|
|
280
|
+
$[33] = t12;
|
|
286
281
|
} else {
|
|
287
|
-
t12 = $[
|
|
282
|
+
t12 = $[33];
|
|
288
283
|
}
|
|
289
284
|
let t13;
|
|
290
|
-
if ($[35] !==
|
|
291
|
-
t13 =
|
|
292
|
-
popover: "manual"
|
|
293
|
-
};
|
|
294
|
-
$[35] = cssAnchorPositioning;
|
|
295
|
-
$[36] = t13;
|
|
296
|
-
} else {
|
|
297
|
-
t13 = $[36];
|
|
298
|
-
}
|
|
299
|
-
let t14;
|
|
300
|
-
if ($[37] !== height || $[38] !== leftPosition || $[39] !== props || $[40] !== responsiveVariant || $[41] !== right || $[42] !== role || $[43] !== t11 || $[44] !== t12 || $[45] !== t13 || $[46] !== visibility || $[47] !== width) {
|
|
301
|
-
t14 = /*#__PURE__*/jsx(BaseOverlay, {
|
|
285
|
+
if ($[34] !== height || $[35] !== leftPosition || $[36] !== props || $[37] !== responsiveVariant || $[38] !== right || $[39] !== role || $[40] !== t11 || $[41] !== t12 || $[42] !== visibility || $[43] !== width) {
|
|
286
|
+
t13 = /*#__PURE__*/jsx(BaseOverlay, {
|
|
302
287
|
role: role,
|
|
303
288
|
width: width,
|
|
304
289
|
"data-reflow-container": t11,
|
|
@@ -309,41 +294,39 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
309
294
|
visibility: visibility,
|
|
310
295
|
"data-responsive": responsiveVariant,
|
|
311
296
|
...t12,
|
|
312
|
-
...t13,
|
|
313
297
|
...props
|
|
314
298
|
});
|
|
315
|
-
$[
|
|
316
|
-
$[
|
|
317
|
-
$[
|
|
318
|
-
$[
|
|
319
|
-
$[
|
|
320
|
-
$[
|
|
321
|
-
$[
|
|
322
|
-
$[
|
|
323
|
-
$[
|
|
324
|
-
$[
|
|
325
|
-
$[
|
|
326
|
-
$[48] = t14;
|
|
299
|
+
$[34] = height;
|
|
300
|
+
$[35] = leftPosition;
|
|
301
|
+
$[36] = props;
|
|
302
|
+
$[37] = responsiveVariant;
|
|
303
|
+
$[38] = right;
|
|
304
|
+
$[39] = role;
|
|
305
|
+
$[40] = t11;
|
|
306
|
+
$[41] = t12;
|
|
307
|
+
$[42] = visibility;
|
|
308
|
+
$[43] = width;
|
|
309
|
+
$[44] = t13;
|
|
327
310
|
} else {
|
|
328
|
-
|
|
311
|
+
t13 = $[44];
|
|
329
312
|
}
|
|
330
|
-
const overlayContent =
|
|
331
|
-
if (
|
|
313
|
+
const overlayContent = t13;
|
|
314
|
+
if (cssAnchorPositioning) {
|
|
332
315
|
return overlayContent;
|
|
333
316
|
}
|
|
334
|
-
let
|
|
335
|
-
if ($[
|
|
336
|
-
|
|
317
|
+
let t14;
|
|
318
|
+
if ($[45] !== overlayContent || $[46] !== portalContainerName) {
|
|
319
|
+
t14 = /*#__PURE__*/jsx(Portal, {
|
|
337
320
|
containerName: portalContainerName,
|
|
338
321
|
children: overlayContent
|
|
339
322
|
});
|
|
340
|
-
$[
|
|
341
|
-
$[
|
|
342
|
-
$[
|
|
323
|
+
$[45] = overlayContent;
|
|
324
|
+
$[46] = portalContainerName;
|
|
325
|
+
$[47] = t14;
|
|
343
326
|
} else {
|
|
344
|
-
|
|
327
|
+
t14 = $[47];
|
|
345
328
|
}
|
|
346
|
-
return
|
|
329
|
+
return t14;
|
|
347
330
|
});
|
|
348
331
|
|
|
349
332
|
export { BaseOverlay, Overlay as default, heightMap };
|
package/package.json
CHANGED
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
.prc-AnchoredOverlay-ResponsiveCloseButtonContainer-nuium{position:relative}.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:none;position:absolute;right:var(--base-size-8,.5rem);top:var(--base-size-8,.5rem)}@media screen and (max-width:calc(48rem - 0.02px)){.prc-AnchoredOverlay-ResponsiveCloseButton-z-2rx{display:inline-grid}}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z{position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;position-visibility:anchors-visible;position:fixed!important;z-index:100}.prc-AnchoredOverlay-AnchoredOverlay-fYg9Z[popover]{border:0;inset:auto;margin:0;max-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 */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/AnchoredOverlay/AnchoredOverlay.module.css.js"],"names":[],"mappings":"AAAA,0DACE,iBACF,CAEA,iDAIE,YAAa,CAHb,iBAAkB,CAElB,8BAAyB,CADzB,4BAOF,CAHE,mDANF,iDAOI,mBAEJ,CADE,CAGF,2CACE,oEAGwB,CACxB,mCAAoC,CAEpC,wBAA0B,CAD1B,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,2 +0,0 @@
|
|
|
1
|
-
.prc-FilteredActionList-Root-QgIk1{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Header-y6ihu{box-shadow:0 1px 0 var(--borderColor-default,var(--color-border-default));z-index:1}.prc-FilteredActionList-Container-647gF{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-Container-647gF .prc-FilteredActionList-ActionListItem-RSinr:not(:focus,[data-is-active-descendant],[data-active],[data-input-focused]){contain-intrinsic-size:auto 32px;content-visibility:auto}.prc-FilteredActionList-ActionList-3-Bxb{flex-grow:1}.prc-FilteredActionList-ActionListItem-RSinr:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-RSinr:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:calc(100% - var(--base-size-8,.5rem));left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:var(--base-size-4,.25rem);width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-CJvWO{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-X2ij0{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-Axs5l{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-Bi-PZ{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
|
|
2
|
-
/*# sourceMappingURL=FilteredActionList-02db90c6.css.map */
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css.js","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,qCAEE,yEAA8C,CAC9C,SACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAUF,CAJE,gKAEE,gCAAiC,CADjC,uBAEF,CAGF,yCACE,WACF,CAEA,mDACE,wGAKF,CAHE,yDC1BA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDgCA,CAGF,mGACE,wGAKF,CAHE,yGClCA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,4CAAuC,CAFvC,sCAAmC,CAFnC,iBAAkB,CAClB,6BAAuB,CAEvB,+BDwCA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-02db90c6.css","sourcesContent":[".Root {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.Header {\n /* stylelint-disable-next-line primer/box-shadow */\n box-shadow: 0 1px 0 var(--borderColor-default);\n z-index: 1;\n}\n\n.Container {\n display: flex;\n height: 100%;\n overflow: auto;\n flex-grow: 1;\n\n /* Allow the browser to skip rendering for off-screen items, reducing style recalc and layout costs in long lists.\n Exclude items that show the active indicator line, as content-visibility: auto applies paint containment\n which clips the absolutely-positioned ::after pseudo-element that renders outside the item bounds. */\n & .ActionListItem:not(:focus, [data-is-active-descendant], [data-active], [data-input-focused]) {\n content-visibility: auto;\n contain-intrinsic-size: auto 32px;\n }\n}\n\n.ActionList {\n flex-grow: 1;\n}\n\n.ActionListItem:focus {\n background: var(--control-transparent-bgColor-selected);\n\n &::after {\n @mixin activeIndicatorLine;\n }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n background: var(--control-transparent-bgColor-selected);\n\n &::after {\n @mixin activeIndicatorLine;\n }\n}\n\n.FullScreenTextInput {\n @media screen and (--viewportRange-narrow) {\n /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n @supports (-webkit-touch-callout: none) {\n font-size: var(--text-title-size-small);\n }\n }\n}\n\n.SelectAllContainer {\n display: flex;\n align-items: center;\n padding-block: var(--base-size-4);\n padding-inline: var(--base-size-16);\n background: var(--bgColor-muted);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n /* -1px hack to offset 1px border-bottom causing uneven alignment */\n /* stylelint-disable-next-line primer/spacing */\n margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n position: absolute;\n top: var(--base-size-4);\n left: calc(-1 * var(--base-size-8));\n width: var(--base-size-4);\n height: calc(100% - var(--base-size-8));\n content: '';\n /* stylelint-disable-next-line primer/colors */\n background: var(--borderColor-accent-emphasis);\n border-radius: var(--borderRadius-medium);\n}\n"]}
|