@primer/react 37.29.0-rc.af59a9de1 → 38.0.0-rc.195178541

package/lib-esm/{SkeletonText → experimental/Skeleton}/SkeletonText.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { type HTMLProps } from 'react';
-interface SkeletonTextProps extends Omit<HTMLProps<HTMLElement>, 'size'> {
+type SkeletonTextProps = {
     /** Size of the text that the skeleton is replacing. */
     size?: 'display' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'subtitle';
     /** Number of lines of skeleton text to render. */
@@ -9,8 +9,7 @@ interface SkeletonTextProps extends Omit<HTMLProps<HTMLElement>, 'size'> {
     maxWidth?: React.CSSProperties['maxWidth'];
     /** Class name for custom styling */
     className?: string;
-}
-declare function SkeletonText({ lines, maxWidth, size, className, style, ...rest }: SkeletonTextProps): React.JSX.Element;
-export { SkeletonText };
-export type { SkeletonTextProps };
+} & Omit<HTMLProps<HTMLDivElement>, 'size'>;
+export declare const SkeletonText: React.FC<SkeletonTextProps>;
+export {};
 //# sourceMappingURL=SkeletonText.d.ts.map

package/lib-esm/experimental/Skeleton/SkeletonText.js

@@ -0,0 +1,143 @@
+import { c } from 'react-compiler-runtime';
+import classes from './SkeletonText.module.css.js';
+import { clsx } from 'clsx';
+import '@styled-system/css';
+import merge from 'deepmerge';
+import { SkeletonBox } from '../../Skeleton/SkeletonBox.js';
+import { jsx } from 'react/jsx-runtime';
+
+const SkeletonText = t0 => {
+  const $ = c(32);
+  let className;
+  let maxWidth;
+  let rest;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      lines: t1,
+      maxWidth,
+      size: t2,
+      className,
+      style,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = maxWidth;
+    $[3] = rest;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    className = $[1];
+    maxWidth = $[2];
+    rest = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  const lines = t1 === undefined ? 1 : t1;
+  const size = t2 === undefined ? "bodyMedium" : t2;
+  if (lines < 2) {
+    let t3;
+    if ($[7] !== className) {
+      t3 = clsx(className, classes.SkeletonText);
+      $[7] = className;
+      $[8] = t3;
+    } else {
+      t3 = $[8];
+    }
+    const t4 = style;
+    let t5;
+    if ($[9] !== maxWidth || $[10] !== t4) {
+      t5 = merge(t4, {
+        maxWidth
+      });
+      $[9] = maxWidth;
+      $[10] = t4;
+      $[11] = t5;
+    } else {
+      t5 = $[11];
+    }
+    let t6;
+    if ($[12] !== rest || $[13] !== size || $[14] !== t3 || $[15] !== t5) {
+      t6 = /*#__PURE__*/jsx(SkeletonBox, {
+        "data-component": "SkeletonText",
+        "data-text-skeleton-size": size,
+        width: "100%",
+        className: t3,
+        style: t5,
+        ...rest
+      });
+      $[12] = rest;
+      $[13] = size;
+      $[14] = t3;
+      $[15] = t5;
+      $[16] = t6;
+    } else {
+      t6 = $[16];
+    }
+    return t6;
+  } else {
+    const t3 = style;
+    let t4;
+    if ($[17] !== maxWidth || $[18] !== t3) {
+      t4 = merge(t3, {
+        maxWidth
+      });
+      $[17] = maxWidth;
+      $[18] = t3;
+      $[19] = t4;
+    } else {
+      t4 = $[19];
+    }
+    let t5;
+    if ($[20] !== className || $[21] !== lines || $[22] !== rest || $[23] !== size) {
+      let t6;
+      if ($[25] !== className || $[26] !== rest || $[27] !== size) {
+        t6 = (_, index) => /*#__PURE__*/jsx(SkeletonBox, {
+          "data-component": "SkeletonText",
+          "data-in-multiline": "true",
+          "data-text-skeleton-size": size,
+          className: clsx(className, classes.SkeletonText),
+          ...rest
+        }, index);
+        $[25] = className;
+        $[26] = rest;
+        $[27] = size;
+        $[28] = t6;
+      } else {
+        t6 = $[28];
+      }
+      t5 = Array.from({
+        length: lines
+      }, t6);
+      $[20] = className;
+      $[21] = lines;
+      $[22] = rest;
+      $[23] = size;
+      $[24] = t5;
+    } else {
+      t5 = $[24];
+    }
+    let t6;
+    if ($[29] !== t4 || $[30] !== t5) {
+      t6 = /*#__PURE__*/jsx("div", {
+        "data-component": "multilineContainer",
+        className: classes.SkeletonTextWrapper,
+        style: t4,
+        children: t5
+      });
+      $[29] = t4;
+      $[30] = t5;
+      $[31] = t6;
+    } else {
+      t6 = $[31];
+    }
+    return t6;
+  }
+};
+
+export { SkeletonText };

package/lib-esm/experimental/Skeleton/SkeletonText.module.css.js

@@ -0,0 +1,5 @@
+import './SkeletonText-5cf908c1.css';
+
+var classes = {"SkeletonText":"prc-Skeleton-SkeletonText-o0dUS","SkeletonTextWrapper":"prc-Skeleton-SkeletonTextWrapper-QRoBW"};
+
+export { classes as default };

package/lib-esm/experimental/Skeleton/index.d.ts

@@ -0,0 +1,4 @@
+export { SkeletonBox } from '../../Skeleton/SkeletonBox';
+export { SkeletonText } from './SkeletonText';
+export { SkeletonAvatar } from './SkeletonAvatar';
+//# sourceMappingURL=index.d.ts.map

package/lib-esm/experimental/UnderlinePanels/UnderlinePanels.js

@@ -4,13 +4,14 @@ import { TabContainerElement } from '@github/tab-container-element';
 import { createComponent } from '../../utils/create-component.js';
 import { UnderlineWrapper, UnderlineItemList, UnderlineItem } from '../../internal/components/UnderlineTabbedInterface.js';
 import { invariant } from '../../utils/invariant.js';
+import { defaultSxProp } from '../../utils/defaultSxProp.js';
 import { useResizeObserver } from '../../hooks/useResizeObserver.js';
 import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect.js';
 import classes from './UnderlinePanels.module.css.js';
 import { clsx } from 'clsx';
-import { BoxWithFallback } from '../../internal/components/BoxWithFallback.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from '../../hooks/useId.js';
+import Box from '../../Box/Box.js';
 
 const TabContainerComponent = createComponent(TabContainerElement, 'tab-container');
 const UnderlinePanels = ({
@@ -18,6 +19,7 @@ const UnderlinePanels = ({
   'aria-labelledby': ariaLabelledBy,
   children,
   loadingCounters,
+  sx: sxProp = defaultSxProp,
   className,
   ...props
 }) => {
@@ -92,6 +94,7 @@ const UnderlinePanels = ({
       ref: wrapperRef,
       slot: "tablist-wrapper",
       "data-icons-visible": iconsVisible,
+      sx: sxProp,
       className: clsx(className, classes.StyledUnderlineWrapper),
       ...props,
       children: /*#__PURE__*/jsx(UnderlineItemList, {
@@ -106,13 +109,15 @@ const UnderlinePanels = ({
 };
 UnderlinePanels.displayName = "UnderlinePanels";
 const Tab = t0 => {
-  const $ = c(14);
+  const $ = c(16);
   let ariaSelected;
   let onSelect;
   let props;
+  let t1;
   if ($[0] !== t0) {
     ({
       "aria-selected": ariaSelected,
+      sx: t1,
       onSelect,
       ...props
     } = t0);
@@ -120,67 +125,72 @@ const Tab = t0 => {
     $[1] = ariaSelected;
     $[2] = onSelect;
     $[3] = props;
+    $[4] = t1;
   } else {
     ariaSelected = $[1];
     onSelect = $[2];
     props = $[3];
+    t1 = $[4];
   }
-  let t1;
-  if ($[4] !== onSelect) {
-    t1 = event => {
+  const sxProp = t1 === undefined ? defaultSxProp : t1;
+  let t2;
+  if ($[5] !== onSelect) {
+    t2 = event => {
       if (!event.defaultPrevented && typeof onSelect === "function") {
         onSelect(event);
       }
     };
-    $[4] = onSelect;
-    $[5] = t1;
+    $[5] = onSelect;
+    $[6] = t2;
   } else {
-    t1 = $[5];
+    t2 = $[6];
   }
-  const clickHandler = t1;
-  let t2;
-  if ($[6] !== onSelect) {
-    t2 = event_0 => {
+  const clickHandler = t2;
+  let t3;
+  if ($[7] !== onSelect) {
+    t3 = event_0 => {
       if ((event_0.key === " " || event_0.key === "Enter") && !event_0.defaultPrevented && typeof onSelect === "function") {
         onSelect(event_0);
       }
     };
-    $[6] = onSelect;
-    $[7] = t2;
+    $[7] = onSelect;
+    $[8] = t3;
   } else {
-    t2 = $[7];
+    t3 = $[8];
   }
-  const keyDownHandler = t2;
-  const t3 = ariaSelected ? 0 : -1;
-  let t4;
-  if ($[8] !== ariaSelected || $[9] !== clickHandler || $[10] !== keyDownHandler || $[11] !== props || $[12] !== t3) {
-    t4 = /*#__PURE__*/jsx(UnderlineItem, {
+  const keyDownHandler = t3;
+  const t4 = ariaSelected ? 0 : -1;
+  let t5;
+  if ($[9] !== ariaSelected || $[10] !== clickHandler || $[11] !== keyDownHandler || $[12] !== props || $[13] !== sxProp || $[14] !== t4) {
+    t5 = /*#__PURE__*/jsx(UnderlineItem, {
       as: "button",
       role: "tab",
-      tabIndex: t3,
+      tabIndex: t4,
       "aria-selected": ariaSelected,
+      sx: sxProp,
       type: "button",
       onClick: clickHandler,
       onKeyDown: keyDownHandler,
       ...props
     });
-    $[8] = ariaSelected;
-    $[9] = clickHandler;
-    $[10] = keyDownHandler;
-    $[11] = props;
-    $[12] = t3;
-    $[13] = t4;
+    $[9] = ariaSelected;
+    $[10] = clickHandler;
+    $[11] = keyDownHandler;
+    $[12] = props;
+    $[13] = sxProp;
+    $[14] = t4;
+    $[15] = t5;
   } else {
-    t4 = $[13];
+    t5 = $[15];
   }
-  return t4;
+  return t5;
 };
 Tab.displayName = 'UnderlinePanels.Tab';
 const Panel = props => {
   const $ = c(2);
   let t0;
   if ($[0] !== props) {
-    t0 = /*#__PURE__*/jsx(BoxWithFallback, {
+    t0 = /*#__PURE__*/jsx(Box, {
       as: "div",
       role: "tabpanel",
       ...props

package/lib-esm/experimental/index.d.ts

@@ -33,12 +33,7 @@ export { Announce, AriaStatus, AriaAlert } from '../live-region';
 export type { AnnounceProps, AriaStatusProps, AriaAlertProps } from '../live-region';
 export { UnderlinePanels } from './UnderlinePanels';
 export type { UnderlinePanelsProps, UnderlinePanelsTabProps, UnderlinePanelsPanelProps } from './UnderlinePanels';
-export { SkeletonBox } from '../Skeleton';
-export type { SkeletonBoxProps } from '../Skeleton';
-export { SkeletonText } from '../SkeletonText';
-export type { SkeletonTextProps } from '../SkeletonText';
-export { SkeletonAvatar } from '../SkeletonAvatar';
-export type { SkeletonAvatarProps } from '../SkeletonAvatar';
+export { SkeletonBox, SkeletonText, SkeletonAvatar } from './Skeleton';
 export { FeatureFlags, DefaultFeatureFlags, useFeatureFlag } from '../FeatureFlags';
 export type { FeatureFlagsProps } from '../FeatureFlags';
 export { FilteredActionList } from '../FilteredActionList';

package/lib-esm/experimental/index.js

@@ -17,8 +17,8 @@ export { AriaStatus } from '../live-region/AriaStatus.js';
 export { AriaAlert } from '../live-region/AriaAlert.js';
 export { default as UnderlinePanels } from './UnderlinePanels/UnderlinePanels.js';
 export { SkeletonBox } from '../Skeleton/SkeletonBox.js';
-export { SkeletonText } from '../SkeletonText/SkeletonText.js';
-export { SkeletonAvatar } from '../SkeletonAvatar/SkeletonAvatar.js';
+export { SkeletonText } from './Skeleton/SkeletonText.js';
+export { SkeletonAvatar } from './Skeleton/SkeletonAvatar.js';
 export { FeatureFlags } from '../FeatureFlags/FeatureFlags.js';
 export { DefaultFeatureFlags } from '../FeatureFlags/DefaultFeatureFlags.js';
 export { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';

package/lib-esm/internal/components/ButtonReset.d.ts

@@ -1,5 +1,6 @@
+import type { SxProp } from '../../sx';
 /**
  * Provides an unstyled button that can be styled as-needed for components
  */
-export declare const Button: ({ children, className, ...rest }: React.ComponentPropsWithoutRef<"button">) => import("react").JSX.Element;
+export declare const Button: import("styled-components").StyledComponent<"button", any, SxProp, never>;
 //# sourceMappingURL=ButtonReset.d.ts.map

package/lib-esm/internal/components/ButtonReset.js

@@ -1,52 +1,12 @@
-import { c } from 'react-compiler-runtime';
-import classes from './ButtonReset.module.css.js';
-import { clsx } from 'clsx';
-import { jsx } from 'react/jsx-runtime';
+import styled from 'styled-components';
+import sx from '../../sx.js';
 
-const Button = t0 => {
-  const $ = c(10);
-  let children;
-  let className;
-  let rest;
-  if ($[0] !== t0) {
-    ({
-      children,
-      className,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = rest;
-  } else {
-    children = $[1];
-    className = $[2];
-    rest = $[3];
-  }
-  let t1;
-  if ($[4] !== className) {
-    t1 = clsx(className, classes.ButtonReset);
-    $[4] = className;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
-  }
-  let t2;
-  if ($[6] !== children || $[7] !== rest || $[8] !== t1) {
-    t2 = /*#__PURE__*/jsx("button", {
-      className: t1,
-      type: "button",
-      ...rest,
-      children: children
-    });
-    $[6] = children;
-    $[7] = rest;
-    $[8] = t1;
-    $[9] = t2;
-  } else {
-    t2 = $[9];
-  }
-  return t2;
-};
+/**
+ * Provides an unstyled button that can be styled as-needed for components
+ */
+const Button = styled.button.withConfig({
+  displayName: "ButtonReset__Button",
+  componentId: "sc-1yqlmwf-0"
+})(["padding:0;border:0;margin:0;display:inline-flex;padding:0;border:0;appearance:none;background:none;cursor:pointer;text-align:start;font:inherit;color:inherit;align-items:center;&::-moz-focus-inner{border:0;}", ""], sx);
 
 export { Button };