@primer/react 38.1.0-rc.a72ba106c → 38.1.0-rc.d71b584fb

package/CHANGELOG.md

@@ -8,7 +8,7 @@
 
 - [#7063](https://github.com/primer/react/pull/7063) [`247c66a`](https://github.com/primer/react/commit/247c66a3c297afba73c6e9e3842cc15ff8a845c1) Thanks [@francinelucca](https://github.com/francinelucca)! - Feat: popover implement click outside
 
-- [#7070](https://github.com/primer/react/pull/7070) [`f7dfa7d`](https://github.com/primer/react/commit/f7dfa7d5954961834d0ec360d6b218237e75bf96) Thanks [@hectahertz](https://github.com/hectahertz)! - Add SSR warnings to useMediaUnsafeSSR and useResponsiveValue.
+- [#7109](https://github.com/primer/react/pull/7109) [`34e7108`](https://github.com/primer/react/commit/34e71089ea7668d7b0ab4572f125d13b998e8754) Thanks [@adierkens](https://github.com/adierkens)! - Add support to ActionList for 'tablist' and 'tab' roles
 
 ### Patch Changes
 

package/dist/ActionList/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/ActionList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAEpD,CAAA;AAmSD,QAAA,MAAM,IAAI,IA3Qa,EAAE,SAAS,KAAK,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QjD,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../src/ActionList/Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAmBzB,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAEpD,CAAA;AAySD,QAAA,MAAM,IAAI,IAjRa,EAAE,SAAS,KAAK,CAAC,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoRjD,CAAA;AAEF,OAAO,EAAC,IAAI,EAAC,CAAA"}

package/dist/ActionList/Item.js

@@ -118,6 +118,8 @@ const UnwrappedItem = ({
     if (selectionVariant === 'single') inferredItemRole = 'menuitemradio';else if (selectionVariant === 'multiple') inferredItemRole = 'menuitemcheckbox';else inferredItemRole = 'menuitem';
   } else if (listRole === 'listbox') {
     if (selectionVariant !== undefined && !role) inferredItemRole = 'option';
+  } else if (listRole === 'tablist') {
+    inferredItemRole = 'tab';
   }
   const itemRole = role || inferredItemRole;
   if (slots.trailingAction) {
@@ -129,7 +131,7 @@ const UnwrappedItem = ({
   if (itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox') inferredSelectionAttribute = 'aria-checked';else if (itemRole === 'option') inferredSelectionAttribute = 'aria-selected';
   const itemSelectionAttribute = selectionAttribute || inferredSelectionAttribute;
   // Ensures ActionList.Item retains list item semantics if a valid ARIA role is applied, or if item is inactive
-  const listItemSemantics = role === 'option' || role === 'menuitem' || role === 'menuitemradio' || role === 'menuitemcheckbox';
+  const listItemSemantics = itemRole === 'option' || itemRole === 'menuitem' || itemRole === 'menuitemradio' || itemRole === 'menuitemcheckbox' || itemRole === 'tab';
   const listRoleTypes = ['listbox', 'menu', 'list'];
   const listSemantics = listRole && listRoleTypes.includes(listRole) || inactive || listItemSemantics;
   const buttonSemantics = !listSemantics && !_PrivateItemWrapper;

package/dist/hooks/{useMediaUnsafeSSR.d.ts → useMedia.d.ts}

@@ -1,21 +1,18 @@
 import React from 'react';
 /**
- * `useMediaUnsafeSSR` will use the given `mediaQueryString` with `matchMedia` to
+ * `useMedia` will use the given `mediaQueryString` with `matchMedia` to
  * determine if the document matches the media query string.
  *
- * If `MatchMedia` is used as an ancestor, `useMediaUnsafeSSR` will instead use the
+ * If `MatchMedia` is used as an ancestor, `useMedia` will instead use the
  * value of the media query string, if available
  *
- * Warning: If rendering on the server, and no `defaultState` is provided,
- * this could cause a hydration mismatch between server and client.
- *
  * @example
  * function Example() {
- *   const coarsePointer = useMediaUnsafeSSR('(pointer: coarse)');
+ *   const coarsePointer = useMedia('(pointer: coarse)');
  *   // ...
  * }
  */
-export declare function useMediaUnsafeSSR(mediaQueryString: string, defaultState?: boolean): boolean;
+export declare function useMedia(mediaQueryString: string, defaultState?: boolean): boolean;
 type MediaQueryFeatures = {
     [key: string]: boolean | undefined;
 };
@@ -25,7 +22,7 @@ type MatchMediaProps = {
 };
 /**
  * Use `MatchMedia` to emulate media conditions by passing in feature
- * queries to the `features` prop. If a component uses `useMediaUnsafeSSR` with the
+ * queries to the `features` prop. If a component uses `useMedia` with the
  * feature passed in to `MatchMedia` it will force its value to match what is
  * provided to `MatchMedia`
  *
@@ -39,4 +36,4 @@ type MatchMediaProps = {
  */
 export declare function MatchMedia({ children, features }: MatchMediaProps): React.JSX.Element;
 export {};
-//# sourceMappingURL=useMediaUnsafeSSR.d.ts.map
+//# sourceMappingURL=useMedia.d.ts.map

package/dist/hooks/useMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMedia.d.ts","sourceRoot":"","sources":["../../src/hooks/useMedia.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAI3E;;;;;;;;;;;;GAYG;AACH,wBAAgB,QAAQ,CAAC,gBAAgB,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,WAoExE;AAED,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CACnC,CAAA;AAOD,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B,CAAA;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAC,QAAQ,EAAE,QAA0B,EAAC,EAAE,eAAe,qBAGjF"}

package/dist/hooks/{useMediaUnsafeSSR.js → useMedia.js}

@@ -2,7 +2,7 @@ import { c } from 'react-compiler-runtime';
 import React, { useContext, createContext, useEffect } from 'react';
 import 'react/jsx-runtime';
 
-function useMediaUnsafeSSR(mediaQueryString, defaultState) {
+function useMedia(mediaQueryString, defaultState) {
   const $ = c(12);
   const features = useContext(MatchMediaContext);
   let t0;
@@ -83,4 +83,4 @@ function useMediaUnsafeSSR(mediaQueryString, defaultState) {
 // unavailable through devtools
 const MatchMediaContext = /*#__PURE__*/createContext({});
 
-export { useMediaUnsafeSSR };
+export { useMedia };

package/dist/hooks/useResponsiveValue.d.ts

@@ -23,8 +23,6 @@ export declare function isResponsiveValue(value: any): value is ResponsiveValue<
  * Resolves responsive values based on the current viewport width.
  * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
  *
- * Warning: This hook is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.
- *
  * @example
  * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
  * console.log(value) // 'bar'

package/dist/hooks/useResponsiveValue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsiveValue.ts"],"names":[],"mappings":"AAUA,eAAO,MAAM,cAAc;;;;CAI1B,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,QAAQ,IAAI;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAChC,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,QAAQ,EAAE,MAAM,OAAO,EAAE,MAAM,KAAK,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,GAE5G,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;AAEpC;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,eAAe,CAAC,GAAG,CAAC,CAE3E;AAED;;;;;;;;;GASG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CAgC7F"}
+{"version":3,"file":"useResponsiveValue.d.ts","sourceRoot":"","sources":["../../src/hooks/useResponsiveValue.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,cAAc;;;;CAI1B,CAAA;AAED,MAAM,MAAM,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,QAAQ,EAAE,KAAK,GAAG,QAAQ,IAAI;IAC5E,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,OAAO,CAAC,EAAE,QAAQ,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,CAAC,CAAC,IAChC,CAAC,CAAC,SAAS,eAAe,CAAC,MAAM,QAAQ,EAAE,MAAM,OAAO,EAAE,MAAM,KAAK,CAAC,GAAG,QAAQ,GAAG,OAAO,GAAG,KAAK,GAAG,KAAK,CAAC,GAE5G,OAAO,CAAC,CAAC,EAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;AAEpC;;;GAGG;AAEH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,eAAe,CAAC,GAAG,CAAC,CAE3E;AAED;;;;;;;GAOG;AAEH,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,GAAG,sBAAsB,CAAC,CAAC,CAAC,GAAG,CAAC,CA0B7F"}

package/dist/hooks/useResponsiveValue.js

@@ -1,6 +1,4 @@
-import { useMediaUnsafeSSR } from './useMediaUnsafeSSR.js';
-import { canUseDOM } from '../utils/environment.js';
-import { warning } from '../utils/warning.js';
+import { useMedia } from './useMedia.js';
 
 // This file contains utilities for working with responsive values.
 
@@ -35,17 +33,15 @@ function isResponsiveValue(value) {
  * Resolves responsive values based on the current viewport width.
  * For example, if the current viewport width is narrow (less than 768px), the value of `{regular: 'foo', narrow: 'bar'}` will resolve to `'bar'`.
  *
- * Warning: This hook is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.
- *
  * @example
  * const value = useResponsiveValue({regular: 'foo', narrow: 'bar'})
  * console.log(value) // 'bar'
  */
+// TODO: Improve SSR support
 function useResponsiveValue(value, fallback) {
-  const isNarrowViewport = useMediaUnsafeSSR(viewportRanges.narrow, false);
-  const isRegularViewport = useMediaUnsafeSSR(viewportRanges.regular, false);
-  const isWideViewport = useMediaUnsafeSSR(viewportRanges.wide, false);
-  process.env.NODE_ENV !== "production" ? warning(!canUseDOM, "`useResponsiveValue` is not fully SSR compatible as it relies on `useMediaUnsafeSSR` without a `defaultState`. Using `getResponsiveAttributes` is preferred to avoid hydration mismatches.") : void 0;
+  const isNarrowViewport = useMedia(viewportRanges.narrow, false);
+  const isRegularViewport = useMedia(viewportRanges.regular, false);
+  const isWideViewport = useMedia(viewportRanges.wide, false);
   if (isResponsiveValue(value)) {
     const responsiveValue = value;
     if (isNarrowViewport && "narrow" in responsiveValue) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.1.0-rc.a72ba106c",
+  "version": "38.1.0-rc.d71b584fb",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -164,7 +164,7 @@
     "micromark-extension-frontmatter": "2.0.0",
     "micromark-extension-mdxjs": "3.0.0",
     "postcss-preset-primer": "^0.0.0",
-    "publint": "^0.3.12",
+    "publint": "^0.3.15",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-is": "18.3.1",

package/dist/hooks/useMediaUnsafeSSR.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useMediaUnsafeSSR.d.ts","sourceRoot":"","sources":["../../src/hooks/useMediaUnsafeSSR.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAI3E;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,iBAAiB,CAAC,gBAAgB,EAAE,MAAM,EAAE,YAAY,CAAC,EAAE,OAAO,WAoEjF;AAED,KAAK,kBAAkB,GAAG;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;CACnC,CAAA;AAOD,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,kBAAkB,CAAA;CAC9B,CAAA;AAID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,UAAU,CAAC,EAAC,QAAQ,EAAE,QAA0B,EAAC,EAAE,eAAe,qBAGjF"}