@primer/react 38.17.0-rc.9fe256355 → 38.17.0-rc.c157f562f

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.
Files changed (16) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/dist/ActionBar/ActionBar.d.ts +1 -1
  3. package/dist/ActionBar/index.d.ts +1 -1
  4. package/dist/Button/types.d.ts +1 -1
  5. package/dist/Button/types.d.ts.map +1 -1
  6. package/dist/TooltipV2/{Tooltip-fcb90d9c.css → Tooltip-dd983e5b.css} +2 -2
  7. package/dist/TooltipV2/Tooltip-dd983e5b.css.map +1 -0
  8. package/dist/TooltipV2/Tooltip.d.ts +1 -1
  9. package/dist/TooltipV2/Tooltip.d.ts.map +1 -1
  10. package/dist/TooltipV2/Tooltip.js +17 -11
  11. package/dist/TooltipV2/Tooltip.module.css.js +2 -2
  12. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts.map +1 -1
  13. package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js +17 -8
  14. package/generated/components.json +4 -4
  15. package/package.json +1 -1
  16. package/dist/TooltipV2/Tooltip-fcb90d9c.css.map +0 -1
package/CHANGELOG.md CHANGED
@@ -7,13 +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
+
13
16
  ### Patch Changes
14
17
 
15
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
16
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
+
17
22
  ## 38.16.0
18
23
 
19
24
  ### Minor Changes
package/dist/ActionBar/ActionBar.d.ts CHANGED
@@ -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 {};
package/dist/ActionBar/index.d.ts CHANGED
@@ -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;
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;
package/dist/Button/types.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Button/types.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Button/types.ts"],"names":[],"mappings":"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"}
package/dist/TooltipV2/{Tooltip-fcb90d9c.css → Tooltip-dd983e5b.css} RENAMED
@@ -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-fcb90d9c.css.map */
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 */
package/dist/TooltipV2/Tooltip-dd983e5b.css.map ADDED
@@ -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"]}
package/dist/TooltipV2/Tooltip.d.ts CHANGED
@@ -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)
package/dist/TooltipV2/Tooltip.d.ts.map CHANGED
@@ -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;IAC5C;;;;;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;AAE3E,eAAO,MAAM,OAAO,EAAE,yBAAyB,CAC7C,KAAK,CAAC,eAAe,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CACvE,GACC,UAgRD,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"}
package/dist/TooltipV2/Tooltip.js CHANGED
@@ -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 || !keybindingHint ? tooltipId : undefined,
287
- children: keybindingHint ? /*#__PURE__*/jsxs(Fragment, {
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(keybindingHint, isMacOS), ")"]
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__*/jsx(KeybindingHint, {
297
- keys: keybindingHint,
298
- format: "condensed",
299
- variant: "onEmphasis",
300
- size: "small"
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
  })]
package/dist/TooltipV2/Tooltip.module.css.js CHANGED
@@ -1,5 +1,5 @@
1
- import './Tooltip-fcb90d9c.css';
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 };
package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.d.ts.map CHANGED
@@ -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;AAoHD,YAAY,EAAC,8BAA8B,EAAC,MAAM,6BAA6B,CAAA;;;;;;;;;;AAC/E,wBAIE"}
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"}
package/dist/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.js CHANGED
@@ -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, slots.caption, /*#__PURE__*/React.isValidElement(slots.validation) && slots.validation.props.children && /*#__PURE__*/jsx(VisuallyHidden, {
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
- If CheckboxOrRadioGroup.Label wasn't passed as a child, we don't render a <legend>
70
- but we still want to render a caption
71
- */
72
- slots.caption), /*#__PURE__*/jsx("div", {
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
  } : {}),
package/generated/components.json CHANGED
@@ -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 for this string. Has no effect if tooltip is overridden or disabled. Does **not** bind any keybindings for this button - this is only for visual hints."
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,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.17.0-rc.9fe256355",
4
+ "version": "38.17.0-rc.c157f562f",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/dist/TooltipV2/Tooltip-fcb90d9c.css.map DELETED
@@ -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"]}