@primer/react 38.1.0-rc.0613425e9 → 38.1.0-rc.0728a53db

package/CHANGELOG.md

@@ -8,16 +8,22 @@
 
 - [#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
 
+- [#7114](https://github.com/primer/react/pull/7114) [`15a13c6`](https://github.com/primer/react/commit/15a13c64917676d47e4ce899ce1f96939cc754d6) Thanks [@liuliu-dev](https://github.com/liuliu-dev)! - ActionList: Fix trailing action button to take full height.
+
+- [#7124](https://github.com/primer/react/pull/7124) [`a746a83`](https://github.com/primer/react/commit/a746a83e68da54a7f66161b0f1d68bfbdc071ce6) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - Fixed Timeline.Break when followed by a condensed item and clip sidebar for condensed items.
+
 - [#7060](https://github.com/primer/react/pull/7060) [`3468793`](https://github.com/primer/react/commit/3468793e15269d6d9f226ee7844921e44bfc4622) Thanks [@francinelucca](https://github.com/francinelucca)! - @primer/react: chore(Dialog): allow direct children
 
 - [#7061](https://github.com/primer/react/pull/7061) [`e58e102`](https://github.com/primer/react/commit/e58e1027d7f3cdae5223c08d83f7b86918db370b) Thanks [@francinelucca](https://github.com/francinelucca)! - PageLayout: update wrapper dimensions to match PageLayout's root element
 
 - [#7097](https://github.com/primer/react/pull/7097) [`12fad7a`](https://github.com/primer/react/commit/12fad7af4d9d31898dfff5d3419987100b398d9e) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: fix UnderlineWrapper html structure
 
+- [#7128](https://github.com/primer/react/pull/7128) [`4d0f08a`](https://github.com/primer/react/commit/4d0f08a24750704374655c3dc0450012f905bca0) Thanks [@siddharthkp](https://github.com/siddharthkp)! - Link: Remove deprecated underline prop. (Not used in github-ui)
+
 ## 38.0.0
 
 ### Major Changes

package/README.md

@@ -28,20 +28,19 @@ To install `@primer/react` in your project, you will need to run the following
 command using [npm](https://www.npmjs.com/):
 
 ```bash
-npm install -S @primer/react @primer/primitives styled-components@5.x
+npm install -S @primer/react @primer/primitives
 ```
 
 If you prefer [Yarn](https://yarnpkg.com/), use the following command instead:
 
 ```bash
-yarn add @primer/react @primer/primitives styled-components@5.x
+yarn add @primer/react @primer/primitives
 ```
 
-This command will install three packages in your project:
+This command will install two packages in your project:
 
 - `@primer/react`: used to import and use all the components from Primer
 - `@primer/primitives`: used to include the design tokens from Primer
-- `styled-components`: used to style components
 
 To learn more about how to use `@primer/react`, visit our documentation site at:
 [primer.style](https://primer.style).
@@ -59,26 +58,32 @@ function App() {
 ```
 
 At the root of your application, you'll also want to include our
-`ThemeProvider` and `BaseStyles` components along with styles from the
+`BaseStyles` component along with styles from the
 `@primer/primitives` package. For example:
 
 ```tsx
 // Import each of the themes you would like to use, by default we are including
 // the light theme below
 import '@primer/primitives/dist/css/functional/themes/light.css'
-import {BaseStyles, ThemeProvider} from '@primer/react'
+import {BaseStyles} from '@primer/react'
 
 function RootLayout() {
   return (
-    <ThemeProvider>
-      <BaseStyles>
-        <App />
-      </BaseStyles>
-    </ThemeProvider>
+    <BaseStyles>
+      <App />
+    </BaseStyles>
   )
 }
 ```
 
+In addition, you will need to add the following attributes to your `html` element:
+
+```html
+<html data-light-theme="light" data-dark-theme="dark" data-color-mode="auto">
+  <!-- ... -->
+</html>
+```
+
 ## 📖 Documentation
 
 The documentation for `@primer/react` lives at [primer.style](https://primer.style). There, you'll find detailed documentation on getting started, all of the components, our theme, our principles, and more.

package/dist/ActionBar/ActionBar.js

@@ -1,5 +1,5 @@
 import { c } from 'react-compiler-runtime';
-import React, { forwardRef, useRef, useState, useCallback, useId } from 'react';
+import React, { forwardRef, useRef, useState, useId } from 'react';
 import { KebabHorizontalIcon } from '@primer/octicons-react';
 import { ActionList } from '../ActionList/index.js';
 import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect.js';
@@ -10,7 +10,7 @@ import { IconButton } from '../Button/IconButton.js';
 import { useFocusZone } from '../hooks/useFocusZone.js';
 import styles from './ActionBar.module.css.js';
 import { clsx } from 'clsx';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
 import { FocusKeys } from '@primer/behaviors';
 import { ActionMenu } from '../ActionMenu/ActionMenu.js';
@@ -86,176 +86,330 @@ const getMenuItems = (navWidth, moreMenuWidth, childRegistry, hasActiveMenu, gap
   }
 };
 const ActionBar = props => {
+  const $ = c(43);
   const {
-    size = 'medium',
+    size: t0,
     children,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    flush = false,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    flush: t1,
     className,
-    gap = 'condensed'
+    gap: t2
   } = props;
-
-  // We derive the numeric gap from computed style so layout math stays in sync with CSS
+  const size = t0 === undefined ? "medium" : t0;
+  const flush = t1 === undefined ? false : t1;
+  const gap = t2 === undefined ? "condensed" : t2;
   const listRef = useRef(null);
   const [computedGap, setComputedGap] = useState(ACTIONBAR_ITEM_GAP);
-  const [childRegistry, setChildRegistry] = useState(() => new Map());
-  const registerChild = useCallback((id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps)), []);
-  const unregisterChild = useCallback(id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null)), []);
-  const [menuItemIds, setMenuItemIds] = useState(() => new Set());
+  const [childRegistry, setChildRegistry] = useState(_temp);
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = (id, childProps) => setChildRegistry(prev => new Map(prev).set(id, childProps));
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  const registerChild = t3;
+  let t4;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = id_0 => setChildRegistry(prev_0 => new Map(prev_0).set(id_0, null));
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const unregisterChild = t4;
+  const [menuItemIds, setMenuItemIds] = useState(_temp2);
   const navRef = useRef(null);
-  // measure gap after first render & whenever gap scale changes
-  useIsomorphicLayoutEffect(() => {
-    if (!listRef.current) return;
-    const g = window.getComputedStyle(listRef.current).gap;
-    const parsed = parseFloat(g);
-    if (!Number.isNaN(parsed)) setComputedGap(parsed);
-  }, [gap]);
+  let t5;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = () => {
+      if (!listRef.current) {
+        return;
+      }
+      const g = window.getComputedStyle(listRef.current).gap;
+      const parsed = parseFloat(g);
+      if (!Number.isNaN(parsed)) {
+        setComputedGap(parsed);
+      }
+    };
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  let t6;
+  if ($[3] !== gap) {
+    t6 = [gap];
+    $[3] = gap;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  useIsomorphicLayoutEffect(t5, t6);
   const moreMenuRef = useRef(null);
   const moreMenuBtnRef = useRef(null);
   const containerRef = React.useRef(null);
-  useResizeObserver(resizeObserverEntries => {
-    var _moreMenuRef$current$, _moreMenuRef$current;
-    const navWidth = resizeObserverEntries[0].contentRect.width;
-    const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
-    const hasActiveMenu = menuItemIds.size > 0;
-    if (navWidth > 0) {
-      const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap);
-      if (newMenuItemIds) setMenuItemIds(newMenuItemIds);
-    }
-  }, navRef);
-  const isVisibleChild = useCallback(id_1 => {
-    return !menuItemIds.has(id_1);
-  }, [menuItemIds]);
+  let t7;
+  if ($[5] !== childRegistry || $[6] !== computedGap || $[7] !== menuItemIds.size) {
+    t7 = resizeObserverEntries => {
+      var _moreMenuRef$current$, _moreMenuRef$current;
+      const navWidth = resizeObserverEntries[0].contentRect.width;
+      const moreMenuWidth = (_moreMenuRef$current$ = (_moreMenuRef$current = moreMenuRef.current) === null || _moreMenuRef$current === void 0 ? void 0 : _moreMenuRef$current.getBoundingClientRect().width) !== null && _moreMenuRef$current$ !== void 0 ? _moreMenuRef$current$ : 0;
+      const hasActiveMenu = menuItemIds.size > 0;
+      if (navWidth > 0) {
+        const newMenuItemIds = getMenuItems(navWidth, moreMenuWidth, childRegistry, hasActiveMenu, computedGap);
+        if (newMenuItemIds) {
+          setMenuItemIds(newMenuItemIds);
+        }
+      }
+    };
+    $[5] = childRegistry;
+    $[6] = computedGap;
+    $[7] = menuItemIds.size;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  useResizeObserver(t7, navRef);
+  let t8;
+  if ($[9] !== menuItemIds) {
+    t8 = id_1 => !menuItemIds.has(id_1);
+    $[9] = menuItemIds;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  const isVisibleChild = t8;
   const [isWidgetOpen, setIsWidgetOpen] = useState(false);
-  const closeOverlay = React.useCallback(() => {
-    setIsWidgetOpen(false);
-  }, [setIsWidgetOpen]);
-  const focusOnMoreMenuBtn = React.useCallback(() => {
-    var _moreMenuBtnRef$curre;
-    (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
-  }, []);
-  useOnEscapePress(event => {
-    if (isWidgetOpen) {
-      event.preventDefault();
-      closeOverlay();
-      focusOnMoreMenuBtn();
-    }
-  }, [isWidgetOpen]);
-  useOnOutsideClick({
-    onClickOutside: closeOverlay,
-    containerRef,
-    ignoreClickRefs: [moreMenuBtnRef]
-  });
-  useFocusZone({
-    containerRef: listRef,
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
-    focusOutBehavior: 'wrap'
-  });
-  const groupedItems = React.useMemo(() => {
-    const groupedItemsMap = new Map();
+  let t9;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => {
+      setIsWidgetOpen(false);
+    };
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  const closeOverlay = t9;
+  let t10;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t10 = () => {
+      var _moreMenuBtnRef$curre;
+      (_moreMenuBtnRef$curre = moreMenuBtnRef.current) === null || _moreMenuBtnRef$curre === void 0 ? void 0 : _moreMenuBtnRef$curre.focus();
+    };
+    $[12] = t10;
+  } else {
+    t10 = $[12];
+  }
+  const focusOnMoreMenuBtn = t10;
+  let t11;
+  let t12;
+  if ($[13] !== isWidgetOpen) {
+    t11 = event => {
+      if (isWidgetOpen) {
+        event.preventDefault();
+        closeOverlay();
+        focusOnMoreMenuBtn();
+      }
+    };
+    t12 = [isWidgetOpen];
+    $[13] = isWidgetOpen;
+    $[14] = t11;
+    $[15] = t12;
+  } else {
+    t11 = $[14];
+    t12 = $[15];
+  }
+  useOnEscapePress(t11, t12);
+  let t13;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
+      onClickOutside: closeOverlay,
+      containerRef,
+      ignoreClickRefs: [moreMenuBtnRef]
+    };
+    $[16] = t13;
+  } else {
+    t13 = $[16];
+  }
+  useOnOutsideClick(t13);
+  let t14;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t14 = {
+      containerRef: listRef,
+      bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.HomeAndEnd,
+      focusOutBehavior: "wrap"
+    };
+    $[17] = t14;
+  } else {
+    t14 = $[17];
+  }
+  useFocusZone(t14);
+  let groupedItemsMap;
+  if ($[18] !== childRegistry) {
+    groupedItemsMap = new Map();
     for (const [key, childProps_0] of childRegistry) {
-      if ((childProps_0 === null || childProps_0 === void 0 ? void 0 : childProps_0.type) === 'action' && childProps_0.groupId) {
+      if ((childProps_0 === null || childProps_0 === void 0 ? void 0 : childProps_0.type) === "action" && childProps_0.groupId) {
         const existingGroup = groupedItemsMap.get(childProps_0.groupId) || [];
         existingGroup.push([key, childProps_0]);
         groupedItemsMap.set(childProps_0.groupId, existingGroup);
       }
     }
-    return groupedItemsMap;
-  }, [childRegistry]);
-  return /*#__PURE__*/jsx(ActionBarContext.Provider, {
-    value: {
+    $[18] = childRegistry;
+    $[19] = groupedItemsMap;
+  } else {
+    groupedItemsMap = $[19];
+  }
+  const groupedItems = groupedItemsMap;
+  let t15;
+  if ($[20] !== isVisibleChild || $[21] !== size) {
+    t15 = {
       size,
       registerChild,
       unregisterChild,
       isVisibleChild
-    },
-    children: /*#__PURE__*/jsx("div", {
+    };
+    $[20] = isVisibleChild;
+    $[21] = size;
+    $[22] = t15;
+  } else {
+    t15 = $[22];
+  }
+  let t16;
+  if ($[23] !== className) {
+    t16 = clsx(className, styles.Nav);
+    $[23] = className;
+    $[24] = t16;
+  } else {
+    t16 = $[24];
+  }
+  let t17;
+  if ($[25] !== ariaLabel || $[26] !== childRegistry || $[27] !== groupedItems || $[28] !== menuItemIds) {
+    t17 = menuItemIds.size > 0 && /*#__PURE__*/jsxs(ActionMenu, {
+      children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
+        children: /*#__PURE__*/jsx(IconButton, {
+          variant: "invisible",
+          "aria-label": `More ${ariaLabel} items`,
+          icon: KebabHorizontalIcon
+        })
+      }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
+        children: /*#__PURE__*/jsx(ActionList, {
+          children: Array.from(menuItemIds).map(id_2 => {
+            const menuItem = childRegistry.get(id_2);
+            if (!menuItem) {
+              return null;
+            }
+            if (menuItem.type === "divider") {
+              return /*#__PURE__*/jsx(ActionList.Divider, {}, id_2);
+            } else {
+              if (menuItem.type === "action") {
+                const {
+                  onClick,
+                  icon: Icon,
+                  label,
+                  disabled
+                } = menuItem;
+                return /*#__PURE__*/jsxs(ActionList.Item, {
+                  onClick: event_0 => {
+                    closeOverlay();
+                    focusOnMoreMenuBtn();
+                    typeof onClick === "function" && onClick(event_0);
+                  },
+                  disabled: disabled,
+                  children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+                    children: /*#__PURE__*/jsx(Icon, {})
+                  }), label]
+                }, label);
+              }
+            }
+            const groupedMenuItems = groupedItems.get(id_2) || [];
+            if (menuItem.type === "group") {
+              return /*#__PURE__*/jsx(React.Fragment, {
+                children: groupedMenuItems.map(t18 => {
+                  const [key_0, childProps_1] = t18;
+                  if (childProps_1.type === "action") {
+                    const {
+                      onClick: onClick_0,
+                      icon: Icon_0,
+                      label: label_0,
+                      disabled: disabled_0
+                    } = childProps_1;
+                    return /*#__PURE__*/jsxs(ActionList.Item, {
+                      onSelect: event_1 => {
+                        closeOverlay();
+                        focusOnMoreMenuBtn();
+                        typeof onClick_0 === "function" && onClick_0(event_1);
+                      },
+                      disabled: disabled_0,
+                      children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
+                        children: /*#__PURE__*/jsx(Icon_0, {})
+                      }), label_0]
+                    }, key_0);
+                  }
+                  return null;
+                })
+              }, id_2);
+            }
+          })
+        })
+      })]
+    });
+    $[25] = ariaLabel;
+    $[26] = childRegistry;
+    $[27] = groupedItems;
+    $[28] = menuItemIds;
+    $[29] = t17;
+  } else {
+    t17 = $[29];
+  }
+  let t18;
+  if ($[30] !== ariaLabel || $[31] !== ariaLabelledBy || $[32] !== children || $[33] !== gap || $[34] !== t17) {
+    t18 = /*#__PURE__*/jsxs("div", {
+      ref: listRef,
+      role: "toolbar",
+      className: styles.List,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      "data-gap": gap,
+      children: [children, t17]
+    });
+    $[30] = ariaLabel;
+    $[31] = ariaLabelledBy;
+    $[32] = children;
+    $[33] = gap;
+    $[34] = t17;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+  let t19;
+  if ($[36] !== flush || $[37] !== t16 || $[38] !== t18) {
+    t19 = /*#__PURE__*/jsx("div", {
       ref: navRef,
-      className: clsx(className, styles.Nav),
+      className: t16,
       "data-flush": flush,
-      children: /*#__PURE__*/jsxs("div", {
-        ref: listRef,
-        role: "toolbar",
-        className: styles.List,
-        "aria-label": ariaLabel,
-        "aria-labelledby": ariaLabelledBy,
-        "data-gap": gap,
-        children: [children, menuItemIds.size > 0 && /*#__PURE__*/jsxs(ActionMenu, {
-          children: [/*#__PURE__*/jsx(ActionMenu.Anchor, {
-            children: /*#__PURE__*/jsx(IconButton, {
-              variant: "invisible",
-              "aria-label": `More ${ariaLabel} items`,
-              icon: KebabHorizontalIcon
-            })
-          }), /*#__PURE__*/jsx(ActionMenu.Overlay, {
-            children: /*#__PURE__*/jsx(ActionList, {
-              children: Array.from(menuItemIds).map(id_2 => {
-                const menuItem = childRegistry.get(id_2);
-                if (!menuItem) return null;
-                if (menuItem.type === 'divider') {
-                  return /*#__PURE__*/jsx(ActionList.Divider, {}, id_2);
-                } else if (menuItem.type === 'action') {
-                  const {
-                    onClick,
-                    icon: Icon,
-                    label,
-                    disabled
-                  } = menuItem;
-                  return /*#__PURE__*/jsxs(ActionList.Item, {
-                    // eslint-disable-next-line primer-react/prefer-action-list-item-onselect
-                    onClick: event_0 => {
-                      closeOverlay();
-                      focusOnMoreMenuBtn();
-                      typeof onClick === 'function' && onClick(event_0);
-                    },
-                    disabled: disabled,
-                    children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
-                      children: /*#__PURE__*/jsx(Icon, {})
-                    }), label]
-                  }, label);
-                }
-
-                // Use the memoized map instead of filtering each time
-                const groupedMenuItems = groupedItems.get(id_2) || [];
-
-                // If we ever add additional types, this condition will be necessary
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (menuItem.type === 'group') {
-                  return /*#__PURE__*/jsx(React.Fragment, {
-                    children: groupedMenuItems.map(([key_0, childProps_1]) => {
-                      if (childProps_1.type === 'action') {
-                        const {
-                          onClick: onClick_0,
-                          icon: Icon_0,
-                          label: label_0,
-                          disabled: disabled_0
-                        } = childProps_1;
-                        return /*#__PURE__*/jsxs(ActionList.Item, {
-                          onSelect: event_1 => {
-                            closeOverlay();
-                            focusOnMoreMenuBtn();
-                            typeof onClick_0 === 'function' && onClick_0(event_1);
-                          },
-                          disabled: disabled_0,
-                          children: [/*#__PURE__*/jsx(ActionList.LeadingVisual, {
-                            children: /*#__PURE__*/jsx(Icon_0, {})
-                          }), label_0]
-                        }, key_0);
-                      }
-                      return null;
-                    })
-                  }, id_2);
-                }
-              })
-            })
-          })]
-        })]
-      })
-    })
-  });
+      children: t18
+    });
+    $[36] = flush;
+    $[37] = t16;
+    $[38] = t18;
+    $[39] = t19;
+  } else {
+    t19 = $[39];
+  }
+  let t20;
+  if ($[40] !== t15 || $[41] !== t19) {
+    t20 = /*#__PURE__*/jsx(ActionBarContext.Provider, {
+      value: t15,
+      children: t19
+    });
+    $[40] = t15;
+    $[41] = t19;
+    $[42] = t20;
+  } else {
+    t20 = $[42];
+  }
+  return t20;
 };
-ActionBar.displayName = "ActionBar";
 const ActionBarIconButton = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
   const $ = c(28);
   let disabled;
@@ -531,5 +685,11 @@ const VerticalDivider = () => {
   }
   return t2;
 };
+function _temp() {
+  return new Map();
+}
+function _temp2() {
+  return new Set();
+}
 
 export { ActionBar, ActionBarGroup, ActionBarIconButton, VerticalDivider };