@primer/react 38.0.0-rc.1 → 38.0.0-rc.2

package/lib-esm/DataTable/useTable.js

@@ -1,9 +1,9 @@
 import { c } from 'react-compiler-runtime';
 import { useState } from 'react';
-import { strategies, SortDirection, transition, DEFAULT_SORT_DIRECTION } from './sorting.js';
+import { strategies, SortDirection, DEFAULT_SORT_DIRECTION, transition } from './sorting.js';
 
 function useTable(t0) {
-  const $ = c(26);
+  const $ = c(20);
   const {
     columns,
     data,
@@ -41,12 +41,13 @@ function useTable(t0) {
       }
     }
   }
-  let headers;
-  let sortBy;
-  if ($[4] !== columns || $[5] !== data || $[6] !== prevData || $[7] !== sortByColumn) {
-    let t2;
-    if ($[10] !== sortByColumn) {
-      t2 = column_1 => {
+  let t2;
+  let t3;
+  let t4;
+  if ($[4] !== columns || $[5] !== data || $[6] !== getRowId || $[7] !== prevData || $[8] !== rowOrder || $[9] !== sortByColumn) {
+    let t5;
+    if ($[13] !== sortByColumn) {
+      t5 = column_1 => {
         var _column_1$id;
         const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
         if (id_0 === undefined) {
@@ -67,12 +68,12 @@ function useTable(t0) {
           }
         };
       };
-      $[10] = sortByColumn;
-      $[11] = t2;
+      $[13] = sortByColumn;
+      $[14] = t5;
     } else {
-      t2 = $[11];
+      t5 = $[14];
     }
-    headers = columns.map(t2);
+    const headers = columns.map(t5);
     if (data !== prevData) {
       setPrevData(data);
       setRowOrder(data);
@@ -80,7 +81,7 @@ function useTable(t0) {
         sortRows(sortByColumn);
       }
     }
-    sortBy = function sortBy(header) {
+    const sortBy = function sortBy(header) {
       const sortState = {
         id: header.id,
         direction: sortByColumn && sortByColumn.id === header.id ? transition(sortByColumn.direction) : DEFAULT_SORT_DIRECTION
@@ -124,86 +125,66 @@ function useTable(t0) {
         return 0;
       }));
     }
-    $[4] = columns;
-    $[5] = data;
-    $[6] = prevData;
-    $[7] = sortByColumn;
-    $[8] = headers;
-    $[9] = sortBy;
-  } else {
-    headers = $[8];
-    sortBy = $[9];
-  }
-  let t2;
-  if ($[12] !== getRowId || $[13] !== headers || $[14] !== rowOrder) {
-    let t3;
-    if ($[16] !== getRowId || $[17] !== headers) {
-      t3 = row => {
-        const rowId = getRowId(row);
-        return {
-          id: `${rowId}`,
-          getValue() {
-            return row;
-          },
-          getCells() {
-            return headers.map(header_2 => {
-              var _header_2$column$rowH;
-              return {
-                id: `${rowId}:${header_2.id}`,
-                column: header_2.column,
-                rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
-                getValue() {
-                  if (header_2.column.field !== undefined) {
-                    return get(row, header_2.column.field);
-                  }
-                  throw new Error(`Unable to get value for column header ${header_2.id}`);
+    t2 = headers;
+    t3 = rowOrder.map(row => {
+      const rowId = getRowId(row);
+      return {
+        id: `${rowId}`,
+        getValue() {
+          return row;
+        },
+        getCells() {
+          return headers.map(header_2 => {
+            var _header_2$column$rowH;
+            return {
+              id: `${rowId}:${header_2.id}`,
+              column: header_2.column,
+              rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
+              getValue() {
+                if (header_2.column.field !== undefined) {
+                  return get(row, header_2.column.field);
                 }
-              };
-            });
-          }
-        };
+                throw new Error(`Unable to get value for column header ${header_2.id}`);
+              }
+            };
+          });
+        }
       };
-      $[16] = getRowId;
-      $[17] = headers;
-      $[18] = t3;
-    } else {
-      t3 = $[18];
-    }
-    t2 = rowOrder.map(t3);
-    $[12] = getRowId;
-    $[13] = headers;
-    $[14] = rowOrder;
-    $[15] = t2;
-  } else {
-    t2 = $[15];
-  }
-  let t3;
-  if ($[19] !== sortBy) {
-    t3 = {
+    });
+    t4 = {
       sortBy
     };
-    $[19] = sortBy;
-    $[20] = t3;
+    $[4] = columns;
+    $[5] = data;
+    $[6] = getRowId;
+    $[7] = prevData;
+    $[8] = rowOrder;
+    $[9] = sortByColumn;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
   } else {
-    t3 = $[20];
+    t2 = $[10];
+    t3 = $[11];
+    t4 = $[12];
   }
-  let t4;
-  if ($[21] !== gridTemplateColumns || $[22] !== headers || $[23] !== t2 || $[24] !== t3) {
-    t4 = {
-      headers,
-      rows: t2,
-      actions: t3,
+  let t5;
+  if ($[15] !== gridTemplateColumns || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+    t5 = {
+      headers: t2,
+      rows: t3,
+      actions: t4,
       gridTemplateColumns
     };
-    $[21] = gridTemplateColumns;
-    $[22] = headers;
-    $[23] = t2;
-    $[24] = t3;
-    $[25] = t4;
+    $[15] = gridTemplateColumns;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
   } else {
-    t4 = $[25];
+    t5 = $[19];
   }
-  return t4;
+  return t5;
 }
 function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
   if (initialSortColumn !== undefined) {

package/lib-esm/Details/Details.d.ts

@@ -1,5 +1,4 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
-import type { SxProp } from '../sx';
 export type SummaryProps<As extends React.ElementType> = {
     /**
      * HTML element to render summary as.
@@ -12,9 +11,9 @@ declare namespace Summary {
     var displayName: string;
 }
 export { Summary };
-declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & SxProp & React.RefAttributes<HTMLDetailsElement>> & {
+declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>> & {
     Summary: typeof Summary;
 };
-export type DetailsProps = ComponentPropsWithoutRef<'details'> & SxProp;
+export type DetailsProps = ComponentPropsWithoutRef<'details'>;
 export default Details;
 //# sourceMappingURL=Details.d.ts.map

package/lib-esm/Details/Details.js

@@ -3,7 +3,6 @@ import React, { useState, useEffect } from 'react';
 import { clsx } from 'clsx';
 import classes from './Details.module.css.js';
 import { useMergedRefs } from '../internal/hooks/useMergedRefs.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const Root = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
@@ -84,8 +83,7 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
   }
   let t5;
   if ($[10] !== children || $[11] !== ref || $[12] !== rest || $[13] !== t3 || $[14] !== t4) {
-    t5 = /*#__PURE__*/jsxs(BoxWithFallback, {
-      as: "details",
+    t5 = /*#__PURE__*/jsxs("details", {
       className: t3,
       ...rest,
       ref: ref,

package/lib-esm/FeatureFlags/FeatureFlags.js

@@ -12,31 +12,29 @@ function FeatureFlags(t0) {
   } = t0;
   const parentFeatureFlags = useContext(FeatureFlagContext);
   let t1;
-  let t2;
   if ($[0] !== flags || $[1] !== parentFeatureFlags) {
-    t2 = FeatureFlagScope.merge(parentFeatureFlags, FeatureFlagScope.create(flags));
+    t1 = FeatureFlagScope.merge(parentFeatureFlags, FeatureFlagScope.create(flags));
     $[0] = flags;
     $[1] = parentFeatureFlags;
-    $[2] = t2;
+    $[2] = t1;
   } else {
-    t2 = $[2];
+    t1 = $[2];
   }
-  const scope = t2;
-  t1 = scope;
-  const value = t1;
-  let t3;
+  const scope = t1;
+  const value = scope;
+  let t2;
   if ($[3] !== children || $[4] !== value) {
-    t3 = /*#__PURE__*/jsx(FeatureFlagContext.Provider, {
+    t2 = /*#__PURE__*/jsx(FeatureFlagContext.Provider, {
       value: value,
       children: children
     });
     $[3] = children;
     $[4] = value;
-    $[5] = t3;
+    $[5] = t2;
   } else {
-    t3 = $[5];
+    t2 = $[5];
   }
-  return t3;
+  return t2;
 }
 
 export { FeatureFlags };

package/lib-esm/FilteredActionList/useAnnouncements.js

@@ -32,7 +32,7 @@ const getItemWithActiveDescendant = (listRef, items) => {
 //TODO remove this when we remove usingRemoveActiveDescendant
 
 const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) => {
-  const $ = c(39);
+  const $ = c(33);
   const enabled = t0 === undefined ? true : t0;
   const loading = t1 === undefined ? false : t1;
   const usingRemoveActiveDescendant = useFeatureFlag("primer_react_select_panel_remove_active_descendant");
@@ -68,7 +68,8 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
   }
   const announce$1 = t4;
   let t5;
-  if ($[5] !== announce$1 || $[6] !== inputRef.current || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRemoveActiveDescendant) {
+  let t6;
+  if ($[5] !== announce$1 || $[6] !== inputRef || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRemoveActiveDescendant) {
     t5 = function announceInitialFocus() {
       const focusHandler = () => {
         if (usingRemoveActiveDescendant) {
@@ -100,33 +101,23 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
       inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener("focus", focusHandler);
       return () => inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("focus", focusHandler);
     };
+    t6 = [listContainerRef, inputRef, items, liveRegion, announce$1, usingRemoveActiveDescendant, selectedItems];
     $[5] = announce$1;
-    $[6] = inputRef.current;
+    $[6] = inputRef;
     $[7] = items;
     $[8] = listContainerRef;
     $[9] = selectedItems;
     $[10] = usingRemoveActiveDescendant;
     $[11] = t5;
+    $[12] = t6;
   } else {
     t5 = $[11];
-  }
-  let t6;
-  if ($[12] !== announce$1 || $[13] !== inputRef || $[14] !== items || $[15] !== listContainerRef || $[16] !== selectedItems || $[17] !== usingRemoveActiveDescendant) {
-    t6 = [listContainerRef, inputRef, items, liveRegion, announce$1, usingRemoveActiveDescendant, selectedItems];
-    $[12] = announce$1;
-    $[13] = inputRef;
-    $[14] = items;
-    $[15] = listContainerRef;
-    $[16] = selectedItems;
-    $[17] = usingRemoveActiveDescendant;
-    $[18] = t6;
-  } else {
-    t6 = $[18];
+    t6 = $[12];
   }
   useEffect(t5, t6);
   const isFirstRender = useFirstRender();
   let t7;
-  if ($[19] !== announce$1 || $[20] !== isFirstRender || $[21] !== items || $[22] !== listContainerRef || $[23] !== loading || $[24] !== (message === null || message === void 0 ? void 0 : message.description) || $[25] !== (message === null || message === void 0 ? void 0 : message.title) || $[26] !== selectedItems || $[27] !== usingRemoveActiveDescendant) {
+  if ($[13] !== announce$1 || $[14] !== isFirstRender || $[15] !== items || $[16] !== listContainerRef || $[17] !== loading || $[18] !== (message === null || message === void 0 ? void 0 : message.description) || $[19] !== (message === null || message === void 0 ? void 0 : message.title) || $[20] !== selectedItems || $[21] !== usingRemoveActiveDescendant) {
     t7 = function announceListUpdates() {
       if (isFirstRender) {
         return;
@@ -163,36 +154,36 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
         });
       }
     };
-    $[19] = announce$1;
-    $[20] = isFirstRender;
-    $[21] = items;
-    $[22] = listContainerRef;
-    $[23] = loading;
-    $[24] = message === null || message === void 0 ? void 0 : message.description;
-    $[25] = message === null || message === void 0 ? void 0 : message.title;
-    $[26] = selectedItems;
-    $[27] = usingRemoveActiveDescendant;
-    $[28] = t7;
+    $[13] = announce$1;
+    $[14] = isFirstRender;
+    $[15] = items;
+    $[16] = listContainerRef;
+    $[17] = loading;
+    $[18] = message === null || message === void 0 ? void 0 : message.description;
+    $[19] = message === null || message === void 0 ? void 0 : message.title;
+    $[20] = selectedItems;
+    $[21] = usingRemoveActiveDescendant;
+    $[22] = t7;
   } else {
-    t7 = $[28];
+    t7 = $[22];
   }
   const t8 = message === null || message === void 0 ? void 0 : message.title;
   const t9 = message === null || message === void 0 ? void 0 : message.description;
   let t10;
-  if ($[29] !== announce$1 || $[30] !== isFirstRender || $[31] !== items || $[32] !== listContainerRef || $[33] !== loading || $[34] !== selectedItems || $[35] !== t8 || $[36] !== t9 || $[37] !== usingRemoveActiveDescendant) {
+  if ($[23] !== announce$1 || $[24] !== isFirstRender || $[25] !== items || $[26] !== listContainerRef || $[27] !== loading || $[28] !== selectedItems || $[29] !== t8 || $[30] !== t9 || $[31] !== usingRemoveActiveDescendant) {
     t10 = [announce$1, isFirstRender, items, listContainerRef, liveRegion, usingRemoveActiveDescendant, t8, t9, loading, selectedItems];
-    $[29] = announce$1;
-    $[30] = isFirstRender;
-    $[31] = items;
-    $[32] = listContainerRef;
-    $[33] = loading;
-    $[34] = selectedItems;
-    $[35] = t8;
-    $[36] = t9;
-    $[37] = usingRemoveActiveDescendant;
-    $[38] = t10;
+    $[23] = announce$1;
+    $[24] = isFirstRender;
+    $[25] = items;
+    $[26] = listContainerRef;
+    $[27] = loading;
+    $[28] = selectedItems;
+    $[29] = t8;
+    $[30] = t9;
+    $[31] = usingRemoveActiveDescendant;
+    $[32] = t10;
   } else {
-    t10 = $[38];
+    t10 = $[32];
   }
   useEffect(t7, t10);
 };

package/lib-esm/LabelGroup/LabelGroup.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { SxProp } from '../sx';
 export type LabelGroupProps = {
     /** Customize the element type of the rendered container */
     as?: React.ElementType;
@@ -8,7 +7,7 @@ export type LabelGroupProps = {
     /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */
     visibleChildCount?: 'auto' | number;
     className?: string;
-} & SxProp;
+};
 declare const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>>;
 export default LabelGroup;
 //# sourceMappingURL=LabelGroup.d.ts.map

package/lib-esm/LabelGroup/LabelGroup.js

@@ -8,15 +8,13 @@ import VisuallyHidden from '../_VisuallyHidden.js';
 import { IconButton } from '../Button/IconButton.js';
 import { ButtonComponent } from '../Button/Button.js';
 import { useTheme } from '../ThemeProvider.js';
-import sx from '../sx.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { AnchoredOverlay } from '../AnchoredOverlay/AnchoredOverlay.js';
-import Box from '../Box/Box.js';
 
 const StyledLabelGroupContainer = styled.div.withConfig({
   displayName: "LabelGroup__StyledLabelGroupContainer",
   componentId: "sc-6tqg8q-0"
-})(["display:flex;flex-wrap:nowrap;gap:", ";line-height:1;max-width:100%;overflow:hidden;&[data-overflow='inline']{flex-wrap:wrap;}&[data-list]{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;}", ";"], get('space.1'), sx);
+})(["display:flex;flex-wrap:nowrap;gap:", ";line-height:1;max-width:100%;overflow:hidden;&[data-overflow='inline']{flex-wrap:wrap;}&[data-list]{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;}"], get('space.1'));
 const ItemWrapper = styled.div.withConfig({
   displayName: "LabelGroup__ItemWrapper",
   componentId: "sc-6tqg8q-1"
@@ -109,16 +107,18 @@ const OverlayToggle = t0 => {
       focusZoneSettings: {
         disabled: true
       },
-      children: /*#__PURE__*/jsxs(Box, {
-        alignItems: "flex-start",
-        display: "flex",
-        width: overlayWidth,
-        padding: `${overlayPaddingPx}px`,
-        children: [/*#__PURE__*/jsx(Box, {
+      children: /*#__PURE__*/jsxs("div", {
+        style: {
+          alignItems: "flex-start",
           display: "flex",
-          flexWrap: "wrap",
-          sx: {
-            gap: 1
+          width: overlayWidth,
+          padding: `${overlayPaddingPx}px`
+        },
+        children: [/*#__PURE__*/jsx("div", {
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "4px"
           },
           children: children
         }), /*#__PURE__*/jsx(IconButton, {
@@ -126,7 +126,7 @@ const OverlayToggle = t0 => {
           icon: XIcon,
           "aria-label": "Close",
           variant: "invisible",
-          sx: {
+          style: {
             flexShrink: 0
           }
         })]
@@ -152,7 +152,6 @@ const LabelGroup = ({
   children,
   visibleChildCount,
   overflowStyle = 'overlay',
-  sx: sxProp,
   as = 'ul',
   className
 }) => {
@@ -311,7 +310,6 @@ const LabelGroup = ({
     ref: containerRef,
     "data-overflow": overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined,
     "data-list": isList || undefined,
-    sx: sxProp,
     className: className,
     as: as,
     children: [React.Children.map(children, (child_0, index) => /*#__PURE__*/jsx(ItemWrapper
@@ -345,7 +343,6 @@ const LabelGroup = ({
   }) : /*#__PURE__*/jsx(StyledLabelGroupContainer, {
     "data-overflow": "inline",
     "data-list": isList || undefined,
-    sx: sxProp,
     as: as,
     className: className,
     children: isList ? React.Children.map(children, (child_1, index_0) => {