@primer/react 38.17.0-rc.f15de9155 → 38.17.0
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 +9 -0
- package/dist/ActionBar/ActionBar.d.ts +1 -1
- package/dist/ActionBar/index.d.ts +1 -1
- package/dist/ActionMenu/{ActionMenu-53493541.css → ActionMenu-58362ca7.css} +2 -2
- package/dist/ActionMenu/ActionMenu-58362ca7.css.map +1 -0
- package/dist/ActionMenu/ActionMenu.d.ts.map +1 -1
- package/dist/ActionMenu/ActionMenu.js +4 -0
- package/dist/ActionMenu/ActionMenu.module.css.js +1 -1
- package/dist/Button/types.d.ts +1 -1
- package/dist/Button/types.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map +1 -1
- package/dist/FeatureFlags/DefaultFeatureFlags.js +2 -1
- package/dist/Overlay/{Overlay-2e0ce8db.css → Overlay-f81a131d.css} +2 -2
- package/dist/Overlay/Overlay-f81a131d.css.map +1 -0
- package/dist/Overlay/Overlay.d.ts.map +1 -1
- package/dist/Overlay/Overlay.js +35 -22
- package/dist/Overlay/Overlay.module.css.js +1 -1
- package/dist/TooltipV2/{Tooltip-fcb90d9c.css → Tooltip-dd983e5b.css} +2 -2
- package/dist/TooltipV2/Tooltip-dd983e5b.css.map +1 -0
- package/dist/TooltipV2/Tooltip.d.ts +1 -1
- package/dist/TooltipV2/Tooltip.d.ts.map +1 -1
- package/dist/TooltipV2/Tooltip.js +17 -11
- package/dist/TooltipV2/Tooltip.module.css.js +2 -2
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts.map +1 -1
- package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js +17 -8
- package/generated/components.json +4 -4
- package/package.json +1 -1
- package/dist/ActionMenu/ActionMenu-53493541.css.map +0 -1
- package/dist/Overlay/Overlay-2e0ce8db.css.map +0 -1
- package/dist/TooltipV2/Tooltip-fcb90d9c.css.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -7,9 +7,18 @@
|
|
|
7
7
|
- [#7658](https://github.com/primer/react/pull/7658) [`259fdff`](https://github.com/primer/react/commit/259fdff67550e328b851129a78e87413ddb07229) Thanks [@hussam-i-am](https://github.com/hussam-i-am)! - fix(polymorphic): Improve prop passthrough for ActionList.LinkItem and Breadcrumbs.Item
|
|
8
8
|
|
|
9
9
|
- [#7672](https://github.com/primer/react/pull/7672) [`77735f9`](https://github.com/primer/react/commit/77735f975c71b267130899fc1fd7b47bcb5f062d) Thanks [@iansan5653](https://github.com/iansan5653)! - - New: Exposes new `useMergedRefs` hook that can merge two refs into a single combined ref
|
|
10
|
+
|
|
10
11
|
- Deprecates `useRefObjectAsForwardedRef`; see doc comment for migration instructions
|
|
11
12
|
- Deprecates `useProvidedRefOrCreate`; see doc comment for migration instructions
|
|
12
13
|
|
|
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
|
+
|
|
16
|
+
### Patch Changes
|
|
17
|
+
|
|
18
|
+
- [#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
|
|
19
|
+
|
|
20
|
+
- [#7682](https://github.com/primer/react/pull/7682) [`8aed331`](https://github.com/primer/react/commit/8aed331f9dcb8c51d86bf531f7e331a6ccd23d9a) Thanks [@llastflowers](https://github.com/llastflowers)! - Update CheckboxOrRadioGroup.tsx to add `required` announcement
|
|
21
|
+
|
|
13
22
|
## 38.16.0
|
|
14
23
|
|
|
15
24
|
### Minor Changes
|
|
@@ -118,7 +118,7 @@ export declare const ActionBarMenu: React.ForwardRefExoticComponent<{
|
|
|
118
118
|
description?: string;
|
|
119
119
|
tooltipDirection?: import("../TooltipV2").TooltipDirection;
|
|
120
120
|
keyshortcuts?: string;
|
|
121
|
-
keybindingHint?: string;
|
|
121
|
+
keybindingHint?: string | string[];
|
|
122
122
|
} & Omit<import("..").ButtonBaseProps, "aria-label" | "aria-labelledby"> & React.RefAttributes<unknown>>;
|
|
123
123
|
export declare const VerticalDivider: () => React.JSX.Element | null;
|
|
124
124
|
export {};
|
|
@@ -20,7 +20,7 @@ declare const ActionBar: import("react").FC<import("react").PropsWithChildren<im
|
|
|
20
20
|
description?: string;
|
|
21
21
|
tooltipDirection?: import("../TooltipV2").TooltipDirection;
|
|
22
22
|
keyshortcuts?: string;
|
|
23
|
-
keybindingHint?: string;
|
|
23
|
+
keybindingHint?: string | string[];
|
|
24
24
|
} & Omit<import("..").ButtonBaseProps, "aria-label" | "aria-labelledby"> & import("react").RefAttributes<unknown>>;
|
|
25
25
|
};
|
|
26
26
|
export default ActionBar;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.prc-ActionMenu-ActionMenuContainer-Om1Qz{max-height:100vh}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-variant=fullscreen]){padding-top:var(--base-size-36,2.25rem)}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-overflow-auto]){overflow:auto}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-overflow-hidden]){overflow:hidden}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-overflow-scroll]){overflow:scroll}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-overflow-visible]){overflow:visible}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-xsmall]){max-height:192px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-small]){max-height:256px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-medium]){max-height:320px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-large]){max-height:432px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-xlarge]){max-height:600px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}
|
|
2
|
-
/*# sourceMappingURL=ActionMenu-
|
|
1
|
+
.prc-ActionMenu-ActionMenuContainer-Om1Qz{max-height:100vh}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-variant=fullscreen]){padding-top:var(--base-size-36,2.25rem)}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-overflow-auto]){overflow:auto}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-overflow-hidden]){overflow:hidden}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-overflow-scroll]){overflow:scroll}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-overflow-visible]){overflow:visible}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-xsmall]){max-height:192px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-small]){max-height:256px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-medium]){max-height:320px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-large]){max-height:432px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-xlarge]){max-height:600px}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-clamp-to-viewport][data-max-height-xsmall]){max-height:min(192px,100dvh)}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-clamp-to-viewport][data-max-height-small]){max-height:min(256px,100dvh)}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-clamp-to-viewport][data-max-height-medium]){max-height:min(320px,100dvh)}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-clamp-to-viewport][data-max-height-large]){max-height:min(432px,100dvh)}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-clamp-to-viewport][data-max-height-xlarge]){max-height:min(600px,100dvh)}.prc-ActionMenu-ActionMenuContainer-Om1Qz:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}
|
|
2
|
+
/*# sourceMappingURL=ActionMenu-58362ca7.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/ActionMenu/ActionMenu.module.css.js"],"names":[],"mappings":"AAAA,0CAEE,gBAoEF,CAlEE,2EACE,uCACF,CAGA,sEACE,aACF,CAEA,wEACE,eACF,CAEA,wEACE,eACF,CAEA,yEACE,gBACF,CAGA,0EACE,gBACF,CAEA,yEACE,gBACF,CAEA,0EACE,gBACF,CAEA,yEACE,gBACF,CAEA,0EACE,gBACF,CAGA,6GACE,4BACF,CAEA,4GACE,4BACF,CAEA,6GACE,4BACF,CAEA,4GACE,4BACF,CAEA,6GACE,4BACF,CAEA,+EACE,2BAAuB,CAAvB,sBACF","file":"ActionMenu-58362ca7.css","sourcesContent":[".ActionMenuContainer {\n /* add default max height */\n max-height: 100vh;\n\n &:where([data-variant='fullscreen']) {\n padding-top: var(--base-size-36);\n }\n\n /* Overflow variants */\n &:where([data-overflow-auto]) {\n overflow: auto;\n }\n\n &:where([data-overflow-hidden]) {\n overflow: hidden;\n }\n\n &:where([data-overflow-scroll]) {\n overflow: scroll;\n }\n\n &:where([data-overflow-visible]) {\n overflow: visible;\n }\n\n /* Max-height size tokens (mirror Overlay sizes) */\n &:where([data-max-height-xsmall]) {\n max-height: 192px;\n }\n\n &:where([data-max-height-small]) {\n max-height: 256px;\n }\n\n &:where([data-max-height-medium]) {\n max-height: 320px;\n }\n\n &:where([data-max-height-large]) {\n max-height: 432px;\n }\n\n &:where([data-max-height-xlarge]) {\n max-height: 600px;\n }\n\n /* Max-height size tokens clamped to viewport (enabled via feature flag) */\n &:where([data-max-height-clamp-to-viewport][data-max-height-xsmall]) {\n max-height: min(192px, 100dvh);\n }\n\n &:where([data-max-height-clamp-to-viewport][data-max-height-small]) {\n max-height: min(256px, 100dvh);\n }\n\n &:where([data-max-height-clamp-to-viewport][data-max-height-medium]) {\n max-height: min(320px, 100dvh);\n }\n\n &:where([data-max-height-clamp-to-viewport][data-max-height-large]) {\n max-height: min(432px, 100dvh);\n }\n\n &:where([data-max-height-clamp-to-viewport][data-max-height-xlarge]) {\n max-height: min(600px, 100dvh);\n }\n\n &:where([data-max-height-fit-content]) {\n max-height: fit-content;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAGlF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAI5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAIrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAI1E,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,KAClG,IAAI,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAC9D,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IAEH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAE7D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAA;AA8I3C,MAAM,MAAM,qBAAqB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AA2DxH,6CAA6C;AAC7C,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAA;AAe/C,KAAK,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,GAC3C,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,mBAAmB,CAAC,GAAG;IAC/E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;CACpE,CAAA;
|
|
1
|
+
{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAGlF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAI5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAIrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAI1E,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,KAClG,IAAI,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAC9D,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IAEH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAA;IAE7D;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAA;AA8I3C,MAAM,MAAM,qBAAqB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AA2DxH,6CAA6C;AAC7C,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAA;AAe/C,KAAK,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,GAC3C,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,mBAAmB,CAAC,GAAG;IAC/E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;CACpE,CAAA;AAmHH,eAAO,MAAM,UAAU;;;kBAhMP,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC;aAC5B,MAAM;;;;CA+L4E,CAAA"}
|
|
@@ -265,6 +265,7 @@ const Overlay = ({
|
|
|
265
265
|
}
|
|
266
266
|
}, [anchorRef]);
|
|
267
267
|
const featureFlagDisplayInViewportInsideDialog = useFeatureFlag('primer_react_action_menu_display_in_viewport_inside_dialog');
|
|
268
|
+
const featureFlagMaxHeightClampToViewport = useFeatureFlag('primer_react_overlay_max_height_clamp_to_viewport');
|
|
268
269
|
const isInsideDialog = useContext(DialogContext) !== undefined;
|
|
269
270
|
return /*#__PURE__*/jsx(AnchoredOverlay, {
|
|
270
271
|
anchorRef: anchorRef,
|
|
@@ -288,6 +289,9 @@ const Overlay = ({
|
|
|
288
289
|
ref: containerRef,
|
|
289
290
|
className: styles.ActionMenuContainer,
|
|
290
291
|
"data-variant": responsiveVariant,
|
|
292
|
+
...(featureFlagMaxHeightClampToViewport ? {
|
|
293
|
+
'data-max-height-clamp-to-viewport': ''
|
|
294
|
+
} : {}),
|
|
291
295
|
...(overlayProps.overflow ? {
|
|
292
296
|
[`data-overflow-${overlayProps.overflow}`]: ''
|
|
293
297
|
} : {}),
|
package/dist/Button/types.d.ts
CHANGED
|
@@ -75,7 +75,7 @@ export type IconButtonProps = ButtonA11yProps & {
|
|
|
75
75
|
tooltipDirection?: TooltipDirection;
|
|
76
76
|
/** @deprecated Use `keybindingHint` instead. */
|
|
77
77
|
keyshortcuts?: string;
|
|
78
|
-
keybindingHint?: string;
|
|
78
|
+
keybindingHint?: string | string[];
|
|
79
79
|
} & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>;
|
|
80
80
|
export type LinkButtonProps = {
|
|
81
81
|
download?: string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Button/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,cAAc,CAAA;AAClD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAErD,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,WAAW,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEjF,MAAM,MAAM,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;AAE/C,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,QAAQ,CAAA;AAE7C,KAAK,eAAe,GAChB;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,iBAAiB,CAAC,EAAE,SAAS,CAAA;CAAC,GACrD;IAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAAC,iBAAiB,EAAE,MAAM,CAAA;CAAC,CAAA;AAEzD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAA;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,CAAA;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAA;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAK5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,CAAA;AAEjD,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,CAAA;IAE3B;;OAEG;IAEH,IAAI,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IAE9F;;OAEG;IAEH,aAAa,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IAElE;;OAEG;IAEH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,GAAG,IAAI,CAAA;IAEnE;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,IAAI,CAAA;IAEzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAE1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;CACxB,GAAG,eAAe,CAAA;AAEnB,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG;IAC9C,IAAI,EAAE,KAAK,CAAC,WAAW,CAAA;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,gBAAgB,CAAC,EAAE,gBAAgB,CAAA;IACnC,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,cAAc,CAAC,EAAE,MAAM,CAAA;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Button/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,
|
|
1
|
+
{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAU9B,CAAA"}
|
|
@@ -8,7 +8,8 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
|
|
|
8
8
|
primer_react_select_panel_order_selected_at_top: false,
|
|
9
9
|
primer_react_select_panel_remove_active_descendant: false,
|
|
10
10
|
primer_react_spinner_synchronize_animations: false,
|
|
11
|
-
primer_react_action_menu_display_in_viewport_inside_dialog: false
|
|
11
|
+
primer_react_action_menu_display_in_viewport_inside_dialog: false,
|
|
12
|
+
primer_react_overlay_max_height_clamp_to_viewport: false
|
|
12
13
|
});
|
|
13
14
|
|
|
14
15
|
export { DefaultFeatureFlags };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@keyframes prc-Overlay-overlay-appear-JpFey{0%{opacity:0}to{opacity:1}}.prc-Overlay-Overlay-jfs-T{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));height:auto;max-height:100vh;max-width:calc(100vw - 2rem);min-width:192px;overflow:auto;position:absolute;width:auto}.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal]),.prc-Overlay-Overlay-jfs-T[data-anchor-position=false]{bottom:var(--bottom,auto);right:var(--right,auto)}@media screen and (max-width:calc(48rem - 0.02px)){[data-responsive=fullscreen]:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:0;top:0}}:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:var(--left,auto);top:var(--top,auto)}.prc-Overlay-Overlay-jfs-T:focus{outline:none}@media (forced-colors:active){.prc-Overlay-Overlay-jfs-T{outline:1px solid transparent}}.prc-Overlay-Overlay-jfs-T:where([data-reflow-container=true]){max-width:calc(100vw - 2rem)}.prc-Overlay-Overlay-jfs-T:where([data-overflow-auto]){overflow:auto}.prc-Overlay-Overlay-jfs-T:where([data-overflow-hidden]){overflow:hidden}.prc-Overlay-Overlay-jfs-T:where([data-overflow-scroll]){overflow:scroll}.prc-Overlay-Overlay-jfs-T:where([data-overflow-visible]){overflow:visible}.prc-Overlay-Overlay-jfs-T:where([data-height-xsmall]){height:192px}.prc-Overlay-Overlay-jfs-T:where([data-height-small]){height:256px}.prc-Overlay-Overlay-jfs-T:where([data-height-medium]){height:320px}.prc-Overlay-Overlay-jfs-T:where([data-height-large]){height:432px}.prc-Overlay-Overlay-jfs-T:where([data-height-xlarge]){height:600px}.prc-Overlay-Overlay-jfs-T:where([data-height-auto]),.prc-Overlay-Overlay-jfs-T:where([data-height-initial]){height:auto}.prc-Overlay-Overlay-jfs-T:where([data-height-fit-content]){height:-moz-fit-content;height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xsmall]){max-height:192px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-small]){max-height:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-medium]){max-height:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-large]){max-height:432px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xlarge]){max-height:600px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-width-small]){width:256px}.prc-Overlay-Overlay-jfs-T:where([data-width-medium]){width:320px}.prc-Overlay-Overlay-jfs-T:where([data-width-large]){width:480px}.prc-Overlay-Overlay-jfs-T:where([data-width-xlarge]){width:640px}.prc-Overlay-Overlay-jfs-T:where([data-width-xxlarge]){width:960px}.prc-Overlay-Overlay-jfs-T:where([data-width-auto]){width:auto}.prc-Overlay-Overlay-jfs-T:where([data-max-width-small]){max-width:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-medium]){max-width:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-large]){max-width:480px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xlarge]){max-width:640px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xxlarge]){max-width:960px}.prc-Overlay-Overlay-jfs-T:where([data-visibility-visible]){visibility:visible}.prc-Overlay-Overlay-jfs-T:where([data-visibility-hidden]){visibility:hidden}@media screen and (max-width:calc(48rem - 0.02px)){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]){border-radius:unset;height:100vh;left:0;margin:0;max-height:none;max-width:none;padding-bottom:env(safe-area-inset-bottom);position:fixed;top:0;width:100vw}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]){height:100dvh}}}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-variant=fullscreen]){height:100dvh}}@media (prefers-reduced-motion:no-preference){.prc-Overlay-Overlay-jfs-T{animation:prc-Overlay-overlay-appear-JpFey .2s cubic-bezier(.33,1,.68,1)}}
|
|
2
|
-
/*# sourceMappingURL=Overlay-
|
|
1
|
+
@keyframes prc-Overlay-overlay-appear-JpFey{0%{opacity:0}to{opacity:1}}.prc-Overlay-Overlay-jfs-T{background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border-radius:var(--borderRadius-large,.75rem);box-shadow:var(--shadow-floating-small,var(--color-overlay-shadow));height:auto;max-height:100vh;max-width:calc(100vw - 2rem);min-width:192px;overflow:auto;position:absolute;width:auto}.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal]),.prc-Overlay-Overlay-jfs-T[data-anchor-position=false]{bottom:var(--bottom,auto);right:var(--right,auto)}@media screen and (max-width:calc(48rem - 0.02px)){[data-responsive=fullscreen]:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:0;top:0}}:is(.prc-Overlay-Overlay-jfs-T[data-anchor-position=false],.prc-Overlay-Overlay-jfs-T:not([data-anchor-position]):not([data-variant=modal])):not([data-variant]){left:var(--left,auto);top:var(--top,auto)}.prc-Overlay-Overlay-jfs-T:focus{outline:none}@media (forced-colors:active){.prc-Overlay-Overlay-jfs-T{outline:1px solid transparent}}.prc-Overlay-Overlay-jfs-T:where([data-reflow-container=true]){max-width:calc(100vw - 2rem)}.prc-Overlay-Overlay-jfs-T:where([data-overflow-auto]){overflow:auto}.prc-Overlay-Overlay-jfs-T:where([data-overflow-hidden]){overflow:hidden}.prc-Overlay-Overlay-jfs-T:where([data-overflow-scroll]){overflow:scroll}.prc-Overlay-Overlay-jfs-T:where([data-overflow-visible]){overflow:visible}.prc-Overlay-Overlay-jfs-T:where([data-height-xsmall]){height:192px}.prc-Overlay-Overlay-jfs-T:where([data-height-small]){height:256px}.prc-Overlay-Overlay-jfs-T:where([data-height-medium]){height:320px}.prc-Overlay-Overlay-jfs-T:where([data-height-large]){height:432px}.prc-Overlay-Overlay-jfs-T:where([data-height-xlarge]){height:600px}.prc-Overlay-Overlay-jfs-T:where([data-height-auto]),.prc-Overlay-Overlay-jfs-T:where([data-height-initial]){height:auto}.prc-Overlay-Overlay-jfs-T:where([data-height-fit-content]){height:-moz-fit-content;height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xsmall]){max-height:192px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-small]){max-height:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-medium]){max-height:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-large]){max-height:432px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-xlarge]){max-height:600px}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-xsmall]){max-height:min(192px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-small]){max-height:min(256px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-medium]){max-height:min(320px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-large]){max-height:min(432px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-clamp-to-viewport][data-max-height-xlarge]){max-height:min(600px,100dvh)}.prc-Overlay-Overlay-jfs-T:where([data-max-height-fit-content]){max-height:-moz-fit-content;max-height:fit-content}.prc-Overlay-Overlay-jfs-T:where([data-width-small]){width:256px}.prc-Overlay-Overlay-jfs-T:where([data-width-medium]){width:320px}.prc-Overlay-Overlay-jfs-T:where([data-width-large]){width:480px}.prc-Overlay-Overlay-jfs-T:where([data-width-xlarge]){width:640px}.prc-Overlay-Overlay-jfs-T:where([data-width-xxlarge]){width:960px}.prc-Overlay-Overlay-jfs-T:where([data-width-auto]){width:auto}.prc-Overlay-Overlay-jfs-T:where([data-max-width-small]){max-width:256px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-medium]){max-width:320px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-large]){max-width:480px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xlarge]){max-width:640px}.prc-Overlay-Overlay-jfs-T:where([data-max-width-xxlarge]){max-width:960px}.prc-Overlay-Overlay-jfs-T:where([data-visibility-visible]){visibility:visible}.prc-Overlay-Overlay-jfs-T:where([data-visibility-hidden]){visibility:hidden}@media screen and (max-width:calc(48rem - 0.02px)){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]){border-radius:unset;height:100vh;left:0;margin:0;max-height:none;max-width:none;padding-bottom:env(safe-area-inset-bottom);position:fixed;top:0;width:100vw}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-responsive=fullscreen]){height:100dvh}}}@supports (height:100dvh){.prc-Overlay-Overlay-jfs-T:where([data-variant=fullscreen]){height:100dvh}}@media (prefers-reduced-motion:no-preference){.prc-Overlay-Overlay-jfs-T{animation:prc-Overlay-overlay-appear-JpFey .2s cubic-bezier(.33,1,.68,1)}}
|
|
2
|
+
/*# sourceMappingURL=Overlay-f81a131d.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/Overlay/Overlay.module.css.js"],"names":[],"mappings":"AAAA,4CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,2BAQE,mEAAwC,CACxC,8CAAwC,CACxC,mEAAwC,CALxC,WAAY,CACZ,gBAAiB,CAJjB,4BAA6B,CAE7B,eAAgB,CAGhB,aAAc,CANd,iBAAkB,CAElB,UAyNF,CAhNE,wIAKE,yBAA2B,CAF3B,uBAkBF,CAZI,mDADF,6LAGI,MAAO,CADP,KAGJ,CADE,CAGF,iKAIE,qBAAuB,CAFvB,mBAGF,CAGF,iCACE,YACF,CAEA,8BAvCF,2BAyCI,6BAmLJ,CAlLE,CAEA,+DACE,4BACF,CAEA,uDACE,aACF,CAEA,yDACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,gBACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,6GAEE,WACF,CAEA,4DACE,uBAAmB,CAAnB,kBACF,CAEA,2DACE,gBACF,CAEA,0DACE,gBACF,CAEA,2DACE,gBACF,CAEA,0DACE,gBACF,CAEA,2DACE,gBACF,CAGA,8FACE,4BACF,CAEA,6FACE,4BACF,CAEA,8FACE,4BACF,CAEA,6FACE,4BACF,CAEA,8FACE,4BACF,CAEA,gEACE,2BAAuB,CAAvB,sBACF,CAEA,qDACE,WACF,CAEA,sDACE,WACF,CAEA,qDAEE,WACF,CAEA,sDAEE,WACF,CAEA,uDAEE,WACF,CAEA,oDACE,UACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,2DACE,eACF,CAEA,4DACE,kBACF,CAEA,2DACE,iBACF,CAGE,mDADF,+DAUI,mBAAoB,CAHpB,YAAa,CAHb,MAAO,CAKP,QAAS,CADT,eAAgB,CAFhB,cAAe,CAMf,0CAA2C,CAV3C,cAAe,CACf,KAAM,CAEN,WAcJ,CALI,0BAdJ,+DAgBM,aAGN,CAFI,CACF,CAGF,0BAEE,4DACE,aACF,CACF,CAGF,8CACE,2BACE,wEACF,CACF","file":"Overlay-f81a131d.css","sourcesContent":["@keyframes overlay-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.Overlay {\n position: absolute;\n max-width: calc(100vw - 2rem);\n width: auto;\n min-width: 192px;\n height: auto;\n max-height: 100vh;\n overflow: auto;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n\n &[data-anchor-position='false'],\n &:not([data-anchor-position]):not([data-variant='modal']) {\n /* stylelint-disable-next-line primer/spacing */\n right: var(--right, auto);\n /* stylelint-disable-next-line primer/spacing */\n bottom: var(--bottom, auto);\n\n /* stylelint-disable-next-line selector-max-specificity */\n &[data-responsive='fullscreen']:not([data-variant]) {\n @media screen and (--viewportRange-narrow) {\n top: 0;\n left: 0;\n }\n }\n\n &:not([data-variant]) {\n /* stylelint-disable-next-line primer/spacing */\n top: var(--top, auto);\n /* stylelint-disable-next-line primer/spacing */\n left: var(--left, auto);\n }\n }\n\n &:focus {\n outline: none;\n }\n\n @media (forced-colors: active) {\n /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */\n outline: solid 1px transparent;\n }\n\n &:where([data-reflow-container='true']) {\n max-width: calc(100vw - 2rem);\n }\n\n &:where([data-overflow-auto]) {\n overflow: auto;\n }\n\n &:where([data-overflow-hidden]) {\n overflow: hidden;\n }\n\n &:where([data-overflow-scroll]) {\n overflow: scroll;\n }\n\n &:where([data-overflow-visible]) {\n overflow: visible;\n }\n\n &:where([data-height-xsmall]) {\n height: 192px;\n }\n\n &:where([data-height-small]) {\n height: 256px;\n }\n\n &:where([data-height-medium]) {\n height: 320px;\n }\n\n &:where([data-height-large]) {\n height: 432px;\n }\n\n &:where([data-height-xlarge]) {\n height: 600px;\n }\n\n &:where([data-height-auto]),\n &:where([data-height-initial]) {\n height: auto;\n }\n\n &:where([data-height-fit-content]) {\n height: fit-content;\n }\n\n &:where([data-max-height-xsmall]) {\n max-height: 192px;\n }\n\n &:where([data-max-height-small]) {\n max-height: 256px;\n }\n\n &:where([data-max-height-medium]) {\n max-height: 320px;\n }\n\n &:where([data-max-height-large]) {\n max-height: 432px;\n }\n\n &:where([data-max-height-xlarge]) {\n max-height: 600px;\n }\n\n /* Max-height size tokens clamped to viewport (enabled via feature flag) */\n &:where([data-max-height-clamp-to-viewport][data-max-height-xsmall]) {\n max-height: min(192px, 100dvh);\n }\n\n &:where([data-max-height-clamp-to-viewport][data-max-height-small]) {\n max-height: min(256px, 100dvh);\n }\n\n &:where([data-max-height-clamp-to-viewport][data-max-height-medium]) {\n max-height: min(320px, 100dvh);\n }\n\n &:where([data-max-height-clamp-to-viewport][data-max-height-large]) {\n max-height: min(432px, 100dvh);\n }\n\n &:where([data-max-height-clamp-to-viewport][data-max-height-xlarge]) {\n max-height: min(600px, 100dvh);\n }\n\n &:where([data-max-height-fit-content]) {\n max-height: fit-content;\n }\n\n &:where([data-width-small]) {\n width: 256px;\n }\n\n &:where([data-width-medium]) {\n width: 320px;\n }\n\n &:where([data-width-large]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-width-xlarge]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 640px;\n }\n\n &:where([data-width-xxlarge]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 960px;\n }\n\n &:where([data-width-auto]) {\n width: auto;\n }\n\n &:where([data-max-width-small]) {\n max-width: 256px;\n }\n\n &:where([data-max-width-medium]) {\n max-width: 320px;\n }\n\n &:where([data-max-width-large]) {\n max-width: 480px;\n }\n\n &:where([data-max-width-xlarge]) {\n max-width: 640px;\n }\n\n &:where([data-max-width-xxlarge]) {\n max-width: 960px;\n }\n\n &:where([data-visibility-visible]) {\n visibility: visible;\n }\n\n &:where([data-visibility-hidden]) {\n visibility: hidden;\n }\n\n &:where([data-responsive='fullscreen']) {\n @media screen and (--viewportRange-narrow) {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n max-width: none;\n height: 100vh;\n max-height: none;\n margin: 0;\n border-radius: unset;\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: env(safe-area-inset-bottom);\n\n @supports (height: 100dvh) {\n /* fix for mobile safari (100vh clips the screen with the toolbar) */\n height: 100dvh;\n }\n }\n }\n\n @supports (height: 100dvh) {\n /* fix for mobile safari (100vh clips the screen with the toolbar) */\n &:where([data-variant='fullscreen']) {\n height: 100dvh;\n }\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .Overlay {\n animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n }\n}\n"]}
|
|
@@ -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,7 @@ const BaseOverlay = /*#__PURE__*/React.forwardRef(({
|
|
|
116
116
|
|
|
117
117
|
*/
|
|
118
118
|
const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
119
|
-
const $ = c(
|
|
119
|
+
const $ = c(48);
|
|
120
120
|
let anchorSide;
|
|
121
121
|
let ignoreClickRefs;
|
|
122
122
|
let initialFocusRef;
|
|
@@ -197,6 +197,7 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
197
197
|
const visibility = t4 === undefined ? "visible" : t4;
|
|
198
198
|
const width = t5 === undefined ? "auto" : t5;
|
|
199
199
|
const cssAnchorPositioning = useFeatureFlag("primer_react_css_anchor_positioning");
|
|
200
|
+
const featureFlagMaxHeightClampToViewport = useFeatureFlag("primer_react_overlay_max_height_clamp_to_viewport");
|
|
200
201
|
const overlayRef = useRef(null);
|
|
201
202
|
useRefObjectAsForwardedRef(forwardedRef, overlayRef);
|
|
202
203
|
let t6;
|
|
@@ -271,8 +272,18 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
271
272
|
const leftPosition = left === undefined && right === undefined ? 0 : left;
|
|
272
273
|
const t11 = !preventOverflow ? true : undefined;
|
|
273
274
|
let t12;
|
|
274
|
-
if ($[32] !==
|
|
275
|
-
t12 =
|
|
275
|
+
if ($[32] !== featureFlagMaxHeightClampToViewport) {
|
|
276
|
+
t12 = featureFlagMaxHeightClampToViewport ? {
|
|
277
|
+
"data-max-height-clamp-to-viewport": ""
|
|
278
|
+
} : {};
|
|
279
|
+
$[32] = featureFlagMaxHeightClampToViewport;
|
|
280
|
+
$[33] = t12;
|
|
281
|
+
} else {
|
|
282
|
+
t12 = $[33];
|
|
283
|
+
}
|
|
284
|
+
let t13;
|
|
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, {
|
|
276
287
|
role: role,
|
|
277
288
|
width: width,
|
|
278
289
|
"data-reflow-container": t11,
|
|
@@ -282,38 +293,40 @@ const Overlay = /*#__PURE__*/React.forwardRef((t0, forwardedRef) => {
|
|
|
282
293
|
height: height,
|
|
283
294
|
visibility: visibility,
|
|
284
295
|
"data-responsive": responsiveVariant,
|
|
296
|
+
...t12,
|
|
285
297
|
...props
|
|
286
298
|
});
|
|
287
|
-
$[
|
|
288
|
-
$[
|
|
289
|
-
$[
|
|
290
|
-
$[
|
|
291
|
-
$[
|
|
292
|
-
$[
|
|
293
|
-
$[
|
|
294
|
-
$[39] = visibility;
|
|
295
|
-
$[40] = width;
|
|
299
|
+
$[34] = height;
|
|
300
|
+
$[35] = leftPosition;
|
|
301
|
+
$[36] = props;
|
|
302
|
+
$[37] = responsiveVariant;
|
|
303
|
+
$[38] = right;
|
|
304
|
+
$[39] = role;
|
|
305
|
+
$[40] = t11;
|
|
296
306
|
$[41] = t12;
|
|
307
|
+
$[42] = visibility;
|
|
308
|
+
$[43] = width;
|
|
309
|
+
$[44] = t13;
|
|
297
310
|
} else {
|
|
298
|
-
|
|
311
|
+
t13 = $[44];
|
|
299
312
|
}
|
|
300
|
-
const overlayContent =
|
|
313
|
+
const overlayContent = t13;
|
|
301
314
|
if (cssAnchorPositioning) {
|
|
302
315
|
return overlayContent;
|
|
303
316
|
}
|
|
304
|
-
let
|
|
305
|
-
if ($[
|
|
306
|
-
|
|
317
|
+
let t14;
|
|
318
|
+
if ($[45] !== overlayContent || $[46] !== portalContainerName) {
|
|
319
|
+
t14 = /*#__PURE__*/jsx(Portal, {
|
|
307
320
|
containerName: portalContainerName,
|
|
308
321
|
children: overlayContent
|
|
309
322
|
});
|
|
310
|
-
$[
|
|
311
|
-
$[
|
|
312
|
-
$[
|
|
323
|
+
$[45] = overlayContent;
|
|
324
|
+
$[46] = portalContainerName;
|
|
325
|
+
$[47] = t14;
|
|
313
326
|
} else {
|
|
314
|
-
|
|
327
|
+
t14 = $[47];
|
|
315
328
|
}
|
|
316
|
-
return
|
|
329
|
+
return t14;
|
|
317
330
|
});
|
|
318
331
|
|
|
319
332
|
export { BaseOverlay, Overlay as default, heightMap };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@keyframes prc-TooltipV2-tooltip-appear-xyBco{0%{opacity:0}to{opacity:1}}.prc-TooltipV2-Tooltip-tLeuB{display:none}.prc-TooltipV2-Tooltip-tLeuB[popover]{margin:auto;max-width:250px;overflow:visible;padding:var(--overlay-paddingBlock-condensed,.25rem) var(--overlay-padding-condensed,.5rem);position:absolute;width:max-content;clip:auto;background:var(--tooltip-bgColor,#25292e);border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--tooltip-fgColor,#fff);font:var(--text-body-shorthand-small,400 .75rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");overflow-wrap:break-word;text-align:center;white-space:normal;-webkit-font-smoothing:subpixel-antialiased;inset:auto;text-wrap:balance}.prc-TooltipV2-Tooltip-tLeuB[popover]:popover-open{display:block}.prc-TooltipV2-Tooltip-tLeuB[popover].\\:popover-open{display:block}@media (forced-colors:active){.prc-TooltipV2-Tooltip-tLeuB{outline:1px solid transparent}}.prc-TooltipV2-Tooltip-tLeuB:after{content:"";display:block;height:var(--overlay-offset,.25rem);left:0;position:absolute;right:0}.prc-TooltipV2-Tooltip-tLeuB[data-direction=n]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=ne]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=nw]:after{top:100%}.prc-TooltipV2-Tooltip-tLeuB[data-direction=s]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=se]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=sw]:after{bottom:100%}.prc-TooltipV2-Tooltip-tLeuB[data-direction=w]:after{left:100%}.prc-TooltipV2-Tooltip-tLeuB[data-direction=e]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=w]:after{bottom:0;content:"";display:block;height:100%;position:absolute;width:8px}.prc-TooltipV2-Tooltip-tLeuB[data-direction=e]:after{margin-left:-8px;right:100%}@media screen and (prefers-reduced-motion:no-preference){.prc-TooltipV2-Tooltip-tLeuB:popover-open,.prc-TooltipV2-Tooltip-tLeuB:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-xyBco;animation-timing-function:ease-in}.prc-TooltipV2-Tooltip-tLeuB.\\:popover-open,.prc-TooltipV2-Tooltip-tLeuB.\\:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-xyBco;animation-timing-function:ease-in}}.prc-TooltipV2-KeybindingHintContainer-Ymj-3.prc-TooltipV2-HasTextBefore-fdOXj{margin-left:var(--base-size-6,.375rem)}
|
|
2
|
-
/*# sourceMappingURL=Tooltip-
|
|
1
|
+
@keyframes prc-TooltipV2-tooltip-appear-xyBco{0%{opacity:0}to{opacity:1}}.prc-TooltipV2-Tooltip-tLeuB{display:none}.prc-TooltipV2-Tooltip-tLeuB[popover]{margin:auto;max-width:250px;overflow:visible;padding:var(--overlay-paddingBlock-condensed,.25rem) var(--overlay-padding-condensed,.5rem);position:absolute;width:max-content;clip:auto;background:var(--tooltip-bgColor,#25292e);border:0;border-radius:var(--borderRadius-medium,.375rem);color:var(--tooltip-fgColor,#fff);font:var(--text-body-shorthand-small,400 .75rem/1.625 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji");overflow-wrap:break-word;text-align:center;white-space:normal;-webkit-font-smoothing:subpixel-antialiased;inset:auto;text-wrap:balance}.prc-TooltipV2-Tooltip-tLeuB[popover]:popover-open{display:block}.prc-TooltipV2-Tooltip-tLeuB[popover].\\:popover-open{display:block}@media (forced-colors:active){.prc-TooltipV2-Tooltip-tLeuB{outline:1px solid transparent}}.prc-TooltipV2-Tooltip-tLeuB:after{content:"";display:block;height:var(--overlay-offset,.25rem);left:0;position:absolute;right:0}.prc-TooltipV2-Tooltip-tLeuB[data-direction=n]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=ne]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=nw]:after{top:100%}.prc-TooltipV2-Tooltip-tLeuB[data-direction=s]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=se]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=sw]:after{bottom:100%}.prc-TooltipV2-Tooltip-tLeuB[data-direction=w]:after{left:100%}.prc-TooltipV2-Tooltip-tLeuB[data-direction=e]:after,.prc-TooltipV2-Tooltip-tLeuB[data-direction=w]:after{bottom:0;content:"";display:block;height:100%;position:absolute;width:8px}.prc-TooltipV2-Tooltip-tLeuB[data-direction=e]:after{margin-left:-8px;right:100%}@media screen and (prefers-reduced-motion:no-preference){.prc-TooltipV2-Tooltip-tLeuB:popover-open,.prc-TooltipV2-Tooltip-tLeuB:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-xyBco;animation-timing-function:ease-in}.prc-TooltipV2-Tooltip-tLeuB.\\:popover-open,.prc-TooltipV2-Tooltip-tLeuB.\\:popover-open:before{animation-delay:0s;animation-duration:.1s;animation-fill-mode:forwards;animation-name:prc-TooltipV2-tooltip-appear-xyBco;animation-timing-function:ease-in}}.prc-TooltipV2-KeybindingHintContainer-Ymj-3.prc-TooltipV2-HasTextBefore-fdOXj{margin-left:var(--base-size-6,.375rem)}.prc-TooltipV2-KeybindingHintContainer-Ymj-3.prc-TooltipV2-HasTextBefore-fdOXj.prc-TooltipV2-HasMultipleHints-9VYeg{margin-left:var(--base-size-8,.5rem)}
|
|
2
|
+
/*# sourceMappingURL=Tooltip-dd983e5b.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/TooltipV2/Tooltip.module.css.js"],"names":[],"mappings":"AACA,8CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,6BAEE,YA8GF,CA5GE,sCAME,WAAY,CAHZ,eAAgB,CAMhB,gBAAiB,CAJjB,2FAA+E,CAJ/E,iBAAkB,CAClB,iBAAkB,CASlB,SAAU,CAMV,yCAAkC,CAClC,QAAS,CACT,gDAAyC,CANzC,iCAA6B,CAD7B,8KAAsC,CAGtC,wBAAyB,CADzB,iBAAkB,CAElB,kBAAmB,CAInB,2CAA4C,CAC5C,UAAW,CACX,iBACF,CAGA,mDACE,aACF,CAIA,sDACE,aACF,CAEA,8BAxCF,6BAyCI,6BAuEJ,CAtEE,CAGA,mCAME,UAAW,CAFX,aAAc,CACd,mCAA6B,CAF7B,MAAO,CAFP,iBAAkB,CAClB,OAKF,CAGA,iKAGE,QACF,CAEA,iKAGE,WACF,CAEA,qDAGE,SAKF,CAGA,0GATE,QAAS,CAKT,UAAW,CAHX,aAAc,CAEd,WAAY,CALZ,iBAAkB,CAIlB,SAgBF,CAVA,qDAQE,gBAAiB,CANjB,UAQF,CAGA,yDAEE,2FAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CAGA,iGAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CACF,CAGF,+EACE,sCACF,CAEA,oHACE,oCACF","file":"Tooltip-dd983e5b.css","sourcesContent":["/* Animation definition */\n@keyframes tooltip-appear {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.Tooltip {\n /* Overriding the default popover styles */\n display: none;\n\n &[popover] {\n position: absolute;\n width: max-content;\n max-width: 250px;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);\n margin: auto;\n\n /* for scrollbar */\n overflow: visible;\n /* stylelint-disable-next-line property-no-deprecated */\n clip: auto;\n font: var(--text-body-shorthand-small);\n color: var(--tooltip-fgColor);\n text-align: center;\n overflow-wrap: break-word;\n white-space: normal;\n background: var(--tooltip-bgColor);\n border: 0;\n border-radius: var(--borderRadius-medium);\n -webkit-font-smoothing: subpixel-antialiased;\n inset: auto;\n text-wrap: balance;\n }\n\n /* class name in chrome is :popover-open */\n &[popover]:popover-open {\n display: block;\n }\n\n /* class name in firefox and safari is \\:popover-open */\n /* stylelint-disable-next-line selector-class-pattern */\n &[popover]:global(.\\\\:popover-open) {\n display: block;\n }\n\n @media (forced-colors: active) {\n outline: 1px solid transparent;\n }\n\n /* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */\n &::after {\n position: absolute;\n right: 0;\n left: 0;\n display: block;\n height: var(--overlay-offset);\n content: '';\n }\n\n /* South, East, Southeast, Southwest after */\n &[data-direction='n']::after,\n &[data-direction='ne']::after,\n &[data-direction='nw']::after {\n top: 100%;\n }\n\n &[data-direction='s']::after,\n &[data-direction='se']::after,\n &[data-direction='sw']::after {\n bottom: 100%;\n }\n\n &[data-direction='w']::after {\n position: absolute;\n bottom: 0;\n left: 100%;\n display: block;\n width: 8px;\n height: 100%;\n content: '';\n }\n\n /* East before and after */\n &[data-direction='e']::after {\n position: absolute;\n right: 100%;\n bottom: 0;\n display: block;\n width: 8px;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -8px;\n content: '';\n }\n\n /* Only show animations if users don't have a preference for reduced motion */\n @media screen and (prefers-reduced-motion: no-preference) {\n /* Animation styles */\n &:popover-open,\n &:popover-open::before {\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n }\n\n /* Animation styles */\n &:global(.\\\\:popover-open) /* stylelint-disable-line selector-class-pattern */,\n &:global(.\\\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n }\n }\n}\n\n.KeybindingHintContainer.HasTextBefore {\n margin-left: var(--base-size-6);\n}\n\n.KeybindingHintContainer.HasTextBefore.HasMultipleHints {\n margin-left: var(--base-size-8);\n}\n"]}
|
|
@@ -6,7 +6,7 @@ export type TooltipProps = React.PropsWithChildren<{
|
|
|
6
6
|
direction?: TooltipDirection;
|
|
7
7
|
text: string;
|
|
8
8
|
type?: 'label' | 'description';
|
|
9
|
-
keybindingHint?: KeybindingHintProps['keys']
|
|
9
|
+
keybindingHint?: KeybindingHintProps['keys'] | Array<KeybindingHintProps['keys']>;
|
|
10
10
|
/**
|
|
11
11
|
* Delay in milliseconds before showing the tooltip
|
|
12
12
|
* @default short (50ms)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/TooltipV2/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,KAAK,yBAAyB,EAAC,MAAM,OAAO,CAAA;AAS3G,OAAO,EAAoD,KAAK,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAG7G,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,cAAc,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/TooltipV2/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiD,KAAK,yBAAyB,EAAC,MAAM,OAAO,CAAA;AAS3G,OAAO,EAAoD,KAAK,mBAAmB,EAAC,MAAM,mBAAmB,CAAA;AAG7G,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,gBAAgB,CAAA;AAE9C,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAA;AAChF,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACjD,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,OAAO,GAAG,aAAa,CAAA;IAC9B,cAAc,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC,GAAG,KAAK,CAAC,mBAAmB,CAAC,MAAM,CAAC,CAAC,CAAA;IACjF;;;;;OAKG;IACH,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IACnC;;;;;;;;OAQG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;CACjC,CAAC,GACA,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiEnC,eAAO,MAAM,cAAc;gBAAoC,MAAM;EAAM,CAAA;AAI3E,eAAO,MAAM,OAAO,EAAE,yBAAyB,CAC7C,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CACvE,GACC,UAiSD,CAAA"}
|
|
@@ -76,6 +76,7 @@ const isInteractive = element => {
|
|
|
76
76
|
return interactiveElements.some(selector => element.matches(selector)) || element.hasAttribute('role') && element.getAttribute('role') === 'button';
|
|
77
77
|
};
|
|
78
78
|
const TooltipContext = /*#__PURE__*/React.createContext({});
|
|
79
|
+
const emptyKeybindingHints = [];
|
|
79
80
|
const Tooltip = /*#__PURE__*/React.forwardRef(({
|
|
80
81
|
direction = 's',
|
|
81
82
|
text,
|
|
@@ -83,7 +84,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
|
|
|
83
84
|
children,
|
|
84
85
|
id,
|
|
85
86
|
className,
|
|
86
|
-
keybindingHint,
|
|
87
|
+
keybindingHint = emptyKeybindingHints,
|
|
87
88
|
delay = 'short',
|
|
88
89
|
_privateDisableTooltip = false,
|
|
89
90
|
...rest
|
|
@@ -196,6 +197,9 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
|
|
|
196
197
|
}, [isPopoverOpen]);
|
|
197
198
|
const isMacOS = useIsMacOS();
|
|
198
199
|
const hasAriaLabel = 'aria-label' in rest;
|
|
200
|
+
|
|
201
|
+
// Normalize keybindingHint to an array for uniform rendering
|
|
202
|
+
const keybindingHints = Array.isArray(keybindingHint) ? keybindingHint : [keybindingHint];
|
|
199
203
|
return /*#__PURE__*/jsx(TooltipContext.Provider, {
|
|
200
204
|
value: value,
|
|
201
205
|
children: /*#__PURE__*/jsxs(Fragment, {
|
|
@@ -283,22 +287,24 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
|
|
|
283
287
|
onMouseLeave: closeTooltip
|
|
284
288
|
// If there is an aria-label prop, always assign the ID to the parent so the accessible label can be overridden
|
|
285
289
|
,
|
|
286
|
-
id: hasAriaLabel ||
|
|
287
|
-
children:
|
|
290
|
+
id: hasAriaLabel || keybindingHints.length === 0 ? tooltipId : undefined,
|
|
291
|
+
children: keybindingHints.length > 0 ? /*#__PURE__*/jsxs(Fragment, {
|
|
288
292
|
children: [/*#__PURE__*/jsxs("span", {
|
|
289
293
|
id: hasAriaLabel ? undefined : tooltipId,
|
|
290
294
|
children: [text, /*#__PURE__*/jsxs(VisuallyHidden, {
|
|
291
|
-
children: ["(", getAccessibleKeybindingHintString(
|
|
295
|
+
children: ["(", keybindingHints.map(hint => getAccessibleKeybindingHintString(hint, isMacOS)).join(' or '), ")"]
|
|
292
296
|
})]
|
|
293
297
|
}), /*#__PURE__*/jsx("span", {
|
|
294
|
-
className: clsx(classes.KeybindingHintContainer, text && classes.HasTextBefore),
|
|
298
|
+
className: clsx(classes.KeybindingHintContainer, text && classes.HasTextBefore, keybindingHints.length > 1 && classes.HasMultipleHints),
|
|
295
299
|
"aria-hidden": true,
|
|
296
|
-
children: /*#__PURE__*/
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
300
|
+
children: keybindingHints.map((hint, i) => /*#__PURE__*/jsxs(React.Fragment, {
|
|
301
|
+
children: [i > 0 && ' or ', /*#__PURE__*/jsx(KeybindingHint, {
|
|
302
|
+
keys: hint,
|
|
303
|
+
format: "condensed",
|
|
304
|
+
variant: "onEmphasis",
|
|
305
|
+
size: "small"
|
|
306
|
+
})]
|
|
307
|
+
}, `${i}-${hint}`))
|
|
302
308
|
})]
|
|
303
309
|
}) : text
|
|
304
310
|
})]
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import './Tooltip-
|
|
1
|
+
import './Tooltip-dd983e5b.css';
|
|
2
2
|
|
|
3
|
-
var classes = {"Tooltip":"prc-TooltipV2-Tooltip-tLeuB","tooltip-appear":"prc-TooltipV2-tooltip-appear-xyBco","KeybindingHintContainer":"prc-TooltipV2-KeybindingHintContainer-Ymj-3","HasTextBefore":"prc-TooltipV2-HasTextBefore-fdOXj"};
|
|
3
|
+
var classes = {"Tooltip":"prc-TooltipV2-Tooltip-tLeuB","tooltip-appear":"prc-TooltipV2-tooltip-appear-xyBco","KeybindingHintContainer":"prc-TooltipV2-KeybindingHintContainer-Ymj-3","HasTextBefore":"prc-TooltipV2-HasTextBefore-fdOXj","HasMultipleHints":"prc-TooltipV2-HasMultipleHints-9VYeg"};
|
|
4
4
|
|
|
5
5
|
export { classes as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxOrRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,MAAM,MAAM,yBAAyB,GAAG;IACtC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;
|
|
1
|
+
{"version":3,"file":"CheckboxOrRadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAazB,MAAM,MAAM,yBAAyB,GAAG;IACtC,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,CAAC,iBAAiB,CAAC,CAAC,EAAE,MAAM,CAAA;IAC5B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAyHD,YAAY,EAAC,8BAA8B,EAAC,MAAM,6BAA6B,CAAA;;;;;;;;;;AAC/E,wBAIE"}
|
|
@@ -10,7 +10,7 @@ import { useSlots } from '../../../hooks/useSlots.js';
|
|
|
10
10
|
import classes from './CheckboxOrRadioGroup.module.css.js';
|
|
11
11
|
import { clsx } from 'clsx';
|
|
12
12
|
import { isSlot } from '../../../utils/is-slot.js';
|
|
13
|
-
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
13
|
+
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
14
14
|
|
|
15
15
|
const CheckboxOrRadioGroup = ({
|
|
16
16
|
'aria-labelledby': ariaLabelledby,
|
|
@@ -31,6 +31,7 @@ const CheckboxOrRadioGroup = ({
|
|
|
31
31
|
const id = useId(idProp);
|
|
32
32
|
const validationMessageId = validationChild ? `${id}-validationMessage` : undefined;
|
|
33
33
|
const captionId = captionChild ? `${id}-caption` : undefined;
|
|
34
|
+
const requiredMessageId = required ? `${id}-requiredMessage` : undefined;
|
|
34
35
|
if (!labelChild && !ariaLabelledby) {
|
|
35
36
|
// eslint-disable-next-line no-console
|
|
36
37
|
console.warn('A choice group must be labelled using a `CheckboxOrRadioGroup.Label` child, or by passing `aria-labelledby` to the CheckboxOrRadioGroup component.');
|
|
@@ -61,19 +62,27 @@ const CheckboxOrRadioGroup = ({
|
|
|
61
62
|
jsxs("legend", {
|
|
62
63
|
className: classes.GroupLegend,
|
|
63
64
|
"data-legend-visible": isLegendVisible ? '' : undefined,
|
|
64
|
-
children: [slots.label,
|
|
65
|
+
children: [slots.label, required && /*#__PURE__*/jsx(VisuallyHidden, {
|
|
66
|
+
children: ", required"
|
|
67
|
+
}), slots.caption, /*#__PURE__*/React.isValidElement(slots.validation) && slots.validation.props.children && /*#__PURE__*/jsx(VisuallyHidden, {
|
|
65
68
|
children: slots.validation.props.children
|
|
66
69
|
})]
|
|
67
|
-
}) :
|
|
70
|
+
}) :
|
|
71
|
+
/*#__PURE__*/
|
|
68
72
|
/*
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
+
If CheckboxOrRadioGroup.Label wasn't passed as a child, we don't render a <legend>
|
|
74
|
+
but we still want to render a caption
|
|
75
|
+
*/
|
|
76
|
+
jsxs(Fragment, {
|
|
77
|
+
children: [slots.caption, required && requiredMessageId && /*#__PURE__*/jsx(VisuallyHidden, {
|
|
78
|
+
id: requiredMessageId,
|
|
79
|
+
children: "Required"
|
|
80
|
+
})]
|
|
81
|
+
}), /*#__PURE__*/jsx("div", {
|
|
73
82
|
className: classes.Body,
|
|
74
83
|
...(!labelChild ? {
|
|
75
84
|
['aria-labelledby']: ariaLabelledby,
|
|
76
|
-
['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
|
|
85
|
+
['aria-describedby']: [validationMessageId, captionId, requiredMessageId].filter(Boolean).join(' '),
|
|
77
86
|
as: 'div',
|
|
78
87
|
role: 'group'
|
|
79
88
|
} : {}),
|
|
@@ -2043,8 +2043,8 @@
|
|
|
2043
2043
|
},
|
|
2044
2044
|
{
|
|
2045
2045
|
"name": "keybindingHint",
|
|
2046
|
-
"type": "string",
|
|
2047
|
-
"description": "Optional keybinding hint to show in the tooltip for this button. See the `KeybindingHint` component documentation for the correct format
|
|
2046
|
+
"type": "string | string[]",
|
|
2047
|
+
"description": "Optional keybinding hint to show in the tooltip for this button. Pass a string for a single shortcut or an array of strings to show multiple shortcuts joined with \"or\". See the `KeybindingHint` component documentation for the correct format. Has no effect if tooltip is overridden or disabled. Does **not** bind any keybindings for this button - this is only for visual hints."
|
|
2048
2048
|
},
|
|
2049
2049
|
{
|
|
2050
2050
|
"name": "tooltipDirection",
|
|
@@ -8298,8 +8298,8 @@
|
|
|
8298
8298
|
},
|
|
8299
8299
|
{
|
|
8300
8300
|
"name": "keybindingHint",
|
|
8301
|
-
"type": "string",
|
|
8302
|
-
"description": "Optional keybinding hint to indicate the availability of a keyboard shortcut. Supported syntax is described in the docs for the `KeybindingHint` component."
|
|
8301
|
+
"type": "string | string[]",
|
|
8302
|
+
"description": "Optional keybinding hint to indicate the availability of a keyboard shortcut. Pass a string for a single shortcut or an array of strings to show multiple shortcuts joined with \"or\". Supported syntax is described in the docs for the `KeybindingHint` component."
|
|
8303
8303
|
},
|
|
8304
8304
|
{
|
|
8305
8305
|
"name": "delay",
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/ActionMenu/ActionMenu.module.css.js"],"names":[],"mappings":"AAAA,0CAEE,gBA+CF,CA7CE,2EACE,uCACF,CAGA,sEACE,aACF,CAEA,wEACE,eACF,CAEA,wEACE,eACF,CAEA,yEACE,gBACF,CAGA,0EACE,gBACF,CAEA,yEACE,gBACF,CAEA,0EACE,gBACF,CAEA,yEACE,gBACF,CAEA,0EACE,gBACF,CAEA,+EACE,2BAAuB,CAAvB,sBACF","file":"ActionMenu-53493541.css","sourcesContent":[".ActionMenuContainer {\n /* add default max height */\n max-height: 100vh;\n\n &:where([data-variant='fullscreen']) {\n padding-top: var(--base-size-36);\n }\n\n /* Overflow variants */\n &:where([data-overflow-auto]) {\n overflow: auto;\n }\n\n &:where([data-overflow-hidden]) {\n overflow: hidden;\n }\n\n &:where([data-overflow-scroll]) {\n overflow: scroll;\n }\n\n &:where([data-overflow-visible]) {\n overflow: visible;\n }\n\n /* Max-height size tokens (mirror Overlay sizes) */\n &:where([data-max-height-xsmall]) {\n max-height: 192px;\n }\n\n &:where([data-max-height-small]) {\n max-height: 256px;\n }\n\n &:where([data-max-height-medium]) {\n max-height: 320px;\n }\n\n &:where([data-max-height-large]) {\n max-height: 432px;\n }\n\n &:where([data-max-height-xlarge]) {\n max-height: 600px;\n }\n\n &:where([data-max-height-fit-content]) {\n max-height: fit-content;\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Overlay/Overlay.module.css.js"],"names":[],"mappings":"AAAA,4CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,2BAQE,mEAAwC,CACxC,8CAAwC,CACxC,mEAAwC,CALxC,WAAY,CACZ,gBAAiB,CAJjB,4BAA6B,CAE7B,eAAgB,CAGhB,aAAc,CANd,iBAAkB,CAElB,UAoMF,CA3LE,wIAKE,yBAA2B,CAF3B,uBAkBF,CAZI,mDADF,6LAGI,MAAO,CADP,KAGJ,CADE,CAGF,iKAIE,qBAAuB,CAFvB,mBAGF,CAGF,iCACE,YACF,CAEA,8BAvCF,2BAyCI,6BA8JJ,CA7JE,CAEA,+DACE,4BACF,CAEA,uDACE,aACF,CAEA,yDACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,gBACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,sDACE,YACF,CAEA,uDACE,YACF,CAEA,6GAEE,WACF,CAEA,4DACE,uBAAmB,CAAnB,kBACF,CAEA,2DACE,gBACF,CAEA,0DACE,gBACF,CAEA,2DACE,gBACF,CAEA,0DACE,gBACF,CAEA,2DACE,gBACF,CAEA,gEACE,2BAAuB,CAAvB,sBACF,CAEA,qDACE,WACF,CAEA,sDACE,WACF,CAEA,qDAEE,WACF,CAEA,sDAEE,WACF,CAEA,uDAEE,WACF,CAEA,oDACE,UACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,yDACE,eACF,CAEA,0DACE,eACF,CAEA,2DACE,eACF,CAEA,4DACE,kBACF,CAEA,2DACE,iBACF,CAGE,mDADF,+DAUI,mBAAoB,CAHpB,YAAa,CAHb,MAAO,CAKP,QAAS,CADT,eAAgB,CAFhB,cAAe,CAMf,0CAA2C,CAV3C,cAAe,CACf,KAAM,CAEN,WAcJ,CALI,0BAdJ,+DAgBM,aAGN,CAFI,CACF,CAGF,0BAEE,4DACE,aACF,CACF,CAGF,8CACE,2BACE,wEACF,CACF","file":"Overlay-2e0ce8db.css","sourcesContent":["@keyframes overlay-appear {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n}\n\n.Overlay {\n position: absolute;\n max-width: calc(100vw - 2rem);\n width: auto;\n min-width: 192px;\n height: auto;\n max-height: 100vh;\n overflow: auto;\n background-color: var(--overlay-bgColor);\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n\n &[data-anchor-position='false'],\n &:not([data-anchor-position]):not([data-variant='modal']) {\n /* stylelint-disable-next-line primer/spacing */\n right: var(--right, auto);\n /* stylelint-disable-next-line primer/spacing */\n bottom: var(--bottom, auto);\n\n /* stylelint-disable-next-line selector-max-specificity */\n &[data-responsive='fullscreen']:not([data-variant]) {\n @media screen and (--viewportRange-narrow) {\n top: 0;\n left: 0;\n }\n }\n\n &:not([data-variant]) {\n /* stylelint-disable-next-line primer/spacing */\n top: var(--top, auto);\n /* stylelint-disable-next-line primer/spacing */\n left: var(--left, auto);\n }\n }\n\n &:focus {\n outline: none;\n }\n\n @media (forced-colors: active) {\n /* Support for Windows high contrast https://sarahmhigley.com/writing/whcm-quick-tips */\n outline: solid 1px transparent;\n }\n\n &:where([data-reflow-container='true']) {\n max-width: calc(100vw - 2rem);\n }\n\n &:where([data-overflow-auto]) {\n overflow: auto;\n }\n\n &:where([data-overflow-hidden]) {\n overflow: hidden;\n }\n\n &:where([data-overflow-scroll]) {\n overflow: scroll;\n }\n\n &:where([data-overflow-visible]) {\n overflow: visible;\n }\n\n &:where([data-height-xsmall]) {\n height: 192px;\n }\n\n &:where([data-height-small]) {\n height: 256px;\n }\n\n &:where([data-height-medium]) {\n height: 320px;\n }\n\n &:where([data-height-large]) {\n height: 432px;\n }\n\n &:where([data-height-xlarge]) {\n height: 600px;\n }\n\n &:where([data-height-auto]),\n &:where([data-height-initial]) {\n height: auto;\n }\n\n &:where([data-height-fit-content]) {\n height: fit-content;\n }\n\n &:where([data-max-height-xsmall]) {\n max-height: 192px;\n }\n\n &:where([data-max-height-small]) {\n max-height: 256px;\n }\n\n &:where([data-max-height-medium]) {\n max-height: 320px;\n }\n\n &:where([data-max-height-large]) {\n max-height: 432px;\n }\n\n &:where([data-max-height-xlarge]) {\n max-height: 600px;\n }\n\n &:where([data-max-height-fit-content]) {\n max-height: fit-content;\n }\n\n &:where([data-width-small]) {\n width: 256px;\n }\n\n &:where([data-width-medium]) {\n width: 320px;\n }\n\n &:where([data-width-large]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 480px;\n }\n\n &:where([data-width-xlarge]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 640px;\n }\n\n &:where([data-width-xxlarge]) {\n /* stylelint-disable-next-line primer/responsive-widths */\n width: 960px;\n }\n\n &:where([data-width-auto]) {\n width: auto;\n }\n\n &:where([data-max-width-small]) {\n max-width: 256px;\n }\n\n &:where([data-max-width-medium]) {\n max-width: 320px;\n }\n\n &:where([data-max-width-large]) {\n max-width: 480px;\n }\n\n &:where([data-max-width-xlarge]) {\n max-width: 640px;\n }\n\n &:where([data-max-width-xxlarge]) {\n max-width: 960px;\n }\n\n &:where([data-visibility-visible]) {\n visibility: visible;\n }\n\n &:where([data-visibility-hidden]) {\n visibility: hidden;\n }\n\n &:where([data-responsive='fullscreen']) {\n @media screen and (--viewportRange-narrow) {\n position: fixed;\n top: 0;\n left: 0;\n width: 100vw;\n max-width: none;\n height: 100vh;\n max-height: none;\n margin: 0;\n border-radius: unset;\n /* stylelint-disable-next-line primer/spacing */\n padding-bottom: env(safe-area-inset-bottom);\n\n @supports (height: 100dvh) {\n /* fix for mobile safari (100vh clips the screen with the toolbar) */\n height: 100dvh;\n }\n }\n }\n\n @supports (height: 100dvh) {\n /* fix for mobile safari (100vh clips the screen with the toolbar) */\n &:where([data-variant='fullscreen']) {\n height: 100dvh;\n }\n }\n}\n\n@media (prefers-reduced-motion: no-preference) {\n .Overlay {\n animation: overlay-appear 200ms cubic-bezier(0.33, 1, 0.68, 1);\n }\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/TooltipV2/Tooltip.module.css.js"],"names":[],"mappings":"AACA,8CACE,GACE,SACF,CAEA,GACE,SACF,CACF,CAEA,6BAEE,YA8GF,CA5GE,sCAME,WAAY,CAHZ,eAAgB,CAMhB,gBAAiB,CAJjB,2FAA+E,CAJ/E,iBAAkB,CAClB,iBAAkB,CASlB,SAAU,CAMV,yCAAkC,CAClC,QAAS,CACT,gDAAyC,CANzC,iCAA6B,CAD7B,8KAAsC,CAGtC,wBAAyB,CADzB,iBAAkB,CAElB,kBAAmB,CAInB,2CAA4C,CAC5C,UAAW,CACX,iBACF,CAGA,mDACE,aACF,CAIA,sDACE,aACF,CAEA,8BAxCF,6BAyCI,6BAuEJ,CAtEE,CAGA,mCAME,UAAW,CAFX,aAAc,CACd,mCAA6B,CAF7B,MAAO,CAFP,iBAAkB,CAClB,OAKF,CAGA,iKAGE,QACF,CAEA,iKAGE,WACF,CAEA,qDAGE,SAKF,CAGA,0GATE,QAAS,CAKT,UAAW,CAHX,aAAc,CAEd,WAAY,CALZ,iBAAkB,CAIlB,SAgBF,CAVA,qDAQE,gBAAiB,CANjB,UAQF,CAGA,yDAEE,2FAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CAGA,iGAME,kBAAmB,CAHnB,sBAAwB,CACxB,4BAA6B,CAF7B,iDAA8B,CAG9B,iCAEF,CACF,CAGF,+EACE,sCACF","file":"Tooltip-fcb90d9c.css","sourcesContent":["/* Animation definition */\n@keyframes tooltip-appear {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n.Tooltip {\n /* Overriding the default popover styles */\n display: none;\n\n &[popover] {\n position: absolute;\n width: max-content;\n max-width: 250px;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--overlay-paddingBlock-condensed) var(--overlay-padding-condensed);\n margin: auto;\n\n /* for scrollbar */\n overflow: visible;\n /* stylelint-disable-next-line property-no-deprecated */\n clip: auto;\n font: var(--text-body-shorthand-small);\n color: var(--tooltip-fgColor);\n text-align: center;\n overflow-wrap: break-word;\n white-space: normal;\n background: var(--tooltip-bgColor);\n border: 0;\n border-radius: var(--borderRadius-medium);\n -webkit-font-smoothing: subpixel-antialiased;\n inset: auto;\n text-wrap: balance;\n }\n\n /* class name in chrome is :popover-open */\n &[popover]:popover-open {\n display: block;\n }\n\n /* class name in firefox and safari is \\:popover-open */\n /* stylelint-disable-next-line selector-class-pattern */\n &[popover]:global(.\\\\:popover-open) {\n display: block;\n }\n\n @media (forced-colors: active) {\n outline: 1px solid transparent;\n }\n\n /* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */\n &::after {\n position: absolute;\n right: 0;\n left: 0;\n display: block;\n height: var(--overlay-offset);\n content: '';\n }\n\n /* South, East, Southeast, Southwest after */\n &[data-direction='n']::after,\n &[data-direction='ne']::after,\n &[data-direction='nw']::after {\n top: 100%;\n }\n\n &[data-direction='s']::after,\n &[data-direction='se']::after,\n &[data-direction='sw']::after {\n bottom: 100%;\n }\n\n &[data-direction='w']::after {\n position: absolute;\n bottom: 0;\n left: 100%;\n display: block;\n width: 8px;\n height: 100%;\n content: '';\n }\n\n /* East before and after */\n &[data-direction='e']::after {\n position: absolute;\n right: 100%;\n bottom: 0;\n display: block;\n width: 8px;\n height: 100%;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -8px;\n content: '';\n }\n\n /* Only show animations if users don't have a preference for reduced motion */\n @media screen and (prefers-reduced-motion: no-preference) {\n /* Animation styles */\n &:popover-open,\n &:popover-open::before {\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n }\n\n /* Animation styles */\n &:global(.\\\\:popover-open) /* stylelint-disable-line selector-class-pattern */,\n &:global(.\\\\:popover-open)::before /* stylelint-disable-line selector-class-pattern */ {\n animation-name: tooltip-appear;\n animation-duration: 0.1s;\n animation-fill-mode: forwards;\n animation-timing-function: ease-in;\n animation-delay: 0s;\n }\n }\n}\n\n.KeybindingHintContainer.HasTextBefore {\n margin-left: var(--base-size-6);\n}\n"]}
|