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

package/lib-esm/Details/Details.js

@@ -3,42 +3,35 @@ 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 { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
 
 const Root = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
-  const $ = c(28);
+  const $ = c(16);
   let children;
   let className;
   let rest;
-  let t1;
   if ($[0] !== t0) {
     ({
       className,
       children,
-      sx: t1,
       ...rest
     } = t0);
     $[0] = t0;
     $[1] = children;
     $[2] = className;
     $[3] = rest;
-    $[4] = t1;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
-    t1 = $[4];
   }
-  const sxProp = t1 === undefined ? defaultSxProp : t1;
   const detailsRef = React.useRef(null);
   const ref = useMergedRefs(forwardRef, detailsRef);
   const [hasSummary, setHasSummary] = useState(false);
+  let t1;
   let t2;
-  let t3;
-  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = () => {
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = () => {
       const {
         current: details
       } = detailsRef;
@@ -61,93 +54,51 @@ const Root = /*#__PURE__*/React.forwardRef((t0, forwardRef) => {
         observer.disconnect();
       };
     };
-    t3 = [];
+    t2 = [];
+    $[4] = t1;
     $[5] = t2;
-    $[6] = t3;
   } else {
+    t1 = $[4];
     t2 = $[5];
-    t3 = $[6];
   }
-  useEffect(t2, t3);
-  if (sxProp !== defaultSxProp) {
-    let t4;
-    if ($[7] !== className) {
-      t4 = clsx(className, classes.Details);
-      $[7] = className;
-      $[8] = t4;
-    } else {
-      t4 = $[8];
-    }
-    let t5;
-    if ($[9] !== hasSummary) {
-      t5 = !hasSummary && /*#__PURE__*/jsx(Details.Summary, {
-        "data-default-summary": true,
-        children: "See Details"
-      });
-      $[9] = hasSummary;
-      $[10] = t5;
-    } else {
-      t5 = $[10];
-    }
-    let t6;
-    if ($[11] !== children || $[12] !== ref || $[13] !== rest || $[14] !== sxProp || $[15] !== t4 || $[16] !== t5) {
-      t6 = /*#__PURE__*/jsxs(Box, {
-        as: "details",
-        className: t4,
-        ...rest,
-        sx: sxProp,
-        ref: ref,
-        children: [t5, children]
-      });
-      $[11] = children;
-      $[12] = ref;
-      $[13] = rest;
-      $[14] = sxProp;
-      $[15] = t4;
-      $[16] = t5;
-      $[17] = t6;
-    } else {
-      t6 = $[17];
-    }
-    return t6;
-  }
-  let t4;
-  if ($[18] !== className) {
-    t4 = clsx(className, classes.Details);
-    $[18] = className;
-    $[19] = t4;
+  useEffect(t1, t2);
+  let t3;
+  if ($[6] !== className) {
+    t3 = clsx(className, classes.Details);
+    $[6] = className;
+    $[7] = t3;
   } else {
-    t4 = $[19];
+    t3 = $[7];
   }
-  let t5;
-  if ($[20] !== hasSummary) {
-    t5 = !hasSummary && /*#__PURE__*/jsx(Details.Summary, {
+  let t4;
+  if ($[8] !== hasSummary) {
+    t4 = !hasSummary && /*#__PURE__*/jsx(Details.Summary, {
       "data-default-summary": true,
       children: "See Details"
     });
-    $[20] = hasSummary;
-    $[21] = t5;
+    $[8] = hasSummary;
+    $[9] = t4;
   } else {
-    t5 = $[21];
+    t4 = $[9];
   }
-  let t6;
-  if ($[22] !== children || $[23] !== ref || $[24] !== rest || $[25] !== t4 || $[26] !== t5) {
-    t6 = /*#__PURE__*/jsxs("details", {
-      className: t4,
+  let t5;
+  if ($[10] !== children || $[11] !== ref || $[12] !== rest || $[13] !== t3 || $[14] !== t4) {
+    t5 = /*#__PURE__*/jsxs("details", {
+      className: t3,
       ...rest,
       ref: ref,
-      children: [t5, children]
+      children: [t4, children]
     });
-    $[22] = children;
-    $[23] = ref;
-    $[24] = rest;
-    $[25] = t4;
-    $[26] = t5;
-    $[27] = t6;
+    $[10] = children;
+    $[11] = ref;
+    $[12] = rest;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
   } else {
-    t6 = $[27];
+    t5 = $[15];
   }
-  return t6;
+  return t5;
 });
 Root.displayName = 'Details';
 function Summary(t0) {

package/lib-esm/FeatureFlags/DefaultFeatureFlags.js

@@ -1,13 +1,12 @@
 import { FeatureFlagScope } from './FeatureFlagScope.js';
 
 const DefaultFeatureFlags = FeatureFlagScope.create({
-  primer_react_css_modules_ga: false,
   primer_react_action_list_item_as_button: false,
-  primer_react_select_panel_with_modern_action_list: false,
   primer_react_overlay_overflow: false,
   primer_react_segmented_control_tooltip: false,
   primer_react_select_panel_fullscreen_on_narrow: false,
-  primer_react_select_panel_order_selected_at_top: false
+  primer_react_select_panel_order_selected_at_top: false,
+  primer_react_select_panel_remove_active_descendant: false
 });
 
 export { DefaultFeatureFlags };

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/FilteredActionList-96b126d7.css

@@ -0,0 +1,2 @@
+.prc-FilteredActionList-Root-S5E74{display:flex;flex-direction:column;overflow:hidden}.prc-FilteredActionList-Container-2A9NQ{display:flex;flex-grow:1;height:100%;overflow:auto}.prc-FilteredActionList-ActionListItem-39lnB:focus{background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-39lnB:focus:after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:var(--base-size-4,.25rem)}.prc-FilteredActionList-ActionListItem-39lnB:where([data-input-focused]):where([data-first-child]){background:var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg))}.prc-FilteredActionList-ActionListItem-39lnB:where([data-input-focused]):where([data-first-child]):after{background:var(--borderColor-accent-emphasis,var(--color-accent-emphasis));border-radius:var(--borderRadius-medium,.375rem);content:"";height:var(--base-size-24,1.5rem);left:calc(var(--base-size-8,.5rem)*-1);position:absolute;top:calc(50% - var(--base-size-12,.75rem));width:var(--base-size-4,.25rem)}@media screen and (max-width:calc(48rem - 0.02px)){@supports (-webkit-touch-callout:none){.prc-FilteredActionList-FullScreenTextInput-rCAiq{font-size:var(--text-title-size-small,1rem)}}}.prc-FilteredActionList-SelectAllContainer-w5otq{align-items:center;background:var(--bgColor-muted,var(--color-canvas-subtle));border-bottom:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding-block:var(--base-size-4,.25rem);padding-inline:var(--base-size-16,1rem)}.prc-FilteredActionList-SelectAllCheckbox-dq2yL{margin:var(--base-size-4,.25rem) var(--base-size-8,.5rem) calc(var(--base-size-4,.25rem) - 1px) 0}.prc-FilteredActionList-SelectAllLabel-l34LA{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-medium,.875rem)}
+/*# sourceMappingURL=FilteredActionList-96b126d7.css.map */

package/lib-esm/FilteredActionList/FilteredActionList-96b126d7.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/FilteredActionList/FilteredActionList.module.css","../../postcss-preset-primer/src/mixins/activeIndicatorLine.css"],"names":[],"mappings":"AAAA,mCACE,YAAa,CACb,qBAAsB,CACtB,eACF,CAEA,wCACE,YAAa,CAGb,WAAY,CAFZ,WAAY,CACZ,aAEF,CAEA,mDACE,wGAKF,CAHE,yDCRA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,iCAA2B,CAF3B,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,+BDcA,CAGF,mGACE,wGAKF,CAHE,yGChBA,0EAA8C,CAC9C,gDAAyC,CAHzC,UAAW,CADX,iCAA2B,CAF3B,sCAAmC,CAFnC,iBAAkB,CAClB,0CAAoC,CAEpC,+BDsBA,CAIA,mDAEE,uCAHJ,kDAIM,2CAGN,CAFI,CACF,CAGF,iDAEE,kBAAmB,CAGnB,0DAAgC,CAChC,2GAAuE,CALvE,YAAa,CAEb,uCAAiC,CACjC,uCAGF,CAEA,gDAGE,iGACF,CAEA,6CAEE,gDAA2B,CAD3B,8CAEF","file":"FilteredActionList-96b126d7.css","sourcesContent":[".Root {\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.Container {\n  display: flex;\n  height: 100%;\n  overflow: auto;\n  flex-grow: 1;\n}\n\n.ActionListItem:focus {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.ActionListItem:where([data-input-focused]):where([data-first-child]) {\n  background: var(--control-transparent-bgColor-selected);\n\n  &::after {\n    @mixin activeIndicatorLine;\n  }\n}\n\n.FullScreenTextInput {\n  @media screen and (--viewportRange-narrow) {\n    /* Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad */\n    @supports (-webkit-touch-callout: none) {\n      font-size: var(--text-title-size-small);\n    }\n  }\n}\n\n.SelectAllContainer {\n  display: flex;\n  align-items: center;\n  padding-block: var(--base-size-4);\n  padding-inline: var(--base-size-16);\n  background: var(--bgColor-muted);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.SelectAllCheckbox {\n  /* -1px hack to offset 1px border-bottom causing uneven alignment */\n  /* stylelint-disable-next-line primer/spacing */\n  margin: var(--base-size-4) var(--base-size-8) calc(var(--base-size-4) - 1px) 0;\n}\n\n.SelectAllLabel {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n}\n","@define-mixin activeIndicatorLine {\n  position: absolute;\n  top: calc(50% - var(--base-size-12));\n  left: calc(-1 * var(--base-size-8));\n  width: var(--base-size-4);\n  height: var(--base-size-24);\n  content: '';\n  /* stylelint-disable-next-line primer/colors */\n  background: var(--borderColor-accent-emphasis);\n  border-radius: var(--borderRadius-medium);\n}\n"]}

package/lib-esm/FilteredActionList/{FilteredActionListWithModernActionList.d.ts → FilteredActionList.d.ts}

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type { TextInputProps } from '../TextInput';
-import type { GroupedListProps, ListPropsBase } from '../SelectPanel/types';
+import type { GroupedListProps, ListPropsBase } from './';
 import type { SxProp } from '../sx';
 import type { FilteredActionListLoadingType } from './FilteredActionListLoaders';
 export interface FilteredActionListProps extends Partial<Omit<GroupedListProps, keyof ListPropsBase>>, ListPropsBase, SxProp {
@@ -8,18 +8,23 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
     loadingType?: FilteredActionListLoadingType;
     placeholderText?: string;
     filterValue?: string;
-    onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;
+    onFilterChange: (value: string, e: React.ChangeEvent<HTMLInputElement> | null) => void;
     onListContainerRefChanged?: (ref: HTMLElement | null) => void;
     onInputRefChanged?: (ref: React.RefObject<HTMLInputElement>) => void;
     textInputProps?: Partial<Omit<TextInputProps, 'onChange'>>;
     inputRef?: React.RefObject<HTMLInputElement>;
     message?: React.ReactNode;
+    messageText?: {
+        title: string;
+        description: string;
+    };
     className?: string;
     announcementsEnabled?: boolean;
     fullScreenOnNarrow?: boolean;
+    onSelectAllChange?: (checked: boolean) => void;
 }
-export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, sx, groupMetadata, showItemDividers, message, className, announcementsEnabled, fullScreenOnNarrow, ...listProps }: FilteredActionListProps): JSX.Element;
+export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, sx, groupMetadata, showItemDividers, message, messageText, className, selectionVariant, announcementsEnabled, fullScreenOnNarrow, onSelectAllChange, ...listProps }: FilteredActionListProps): JSX.Element;
 export declare namespace FilteredActionList {
     var displayName: string;
 }
-//# sourceMappingURL=FilteredActionListWithModernActionList.d.ts.map
+//# sourceMappingURL=FilteredActionList.d.ts.map

package/lib-esm/FilteredActionList/{FilteredActionListWithModernActionList.js → FilteredActionList.js}

@@ -11,21 +11,24 @@ import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js';
 import useScrollFlash from '../hooks/useScrollFlash.js';
 import { FilteredActionListLoadingTypes, FilteredActionListBodyLoader } from './FilteredActionListLoaders.js';
 import classes from './FilteredActionList.module.css.js';
+import { ActionListContainerContext } from '../ActionList/ActionListContainerContext.js';
 import { isValidElementType } from 'react-is';
 import { useAnnouncements } from './useAnnouncements.js';
 import { clsx } from 'clsx';
+import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import Box from '../Box/Box.js';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 import TextInput from '../TextInput/TextInput.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
+import Checkbox from '../Checkbox/Checkbox.js';
 
 const menuScrollMargins = {
   startMargin: 0,
   endMargin: 8
 };
 const StyledHeader = styled.div.withConfig({
-  displayName: "FilteredActionListWithModernActionList__StyledHeader",
-  componentId: "sc-1d2kw5v-0"
+  displayName: "FilteredActionList__StyledHeader",
+  componentId: "sc-1oqgb0s-0"
 })(["box-shadow:0 1px 0 ", ";z-index:1;"], get('colors.border.default'));
 function FilteredActionList({
   loading = false,
@@ -42,9 +45,12 @@ function FilteredActionList({
   groupMetadata,
   showItemDividers,
   message,
+  messageText,
   className,
+  selectionVariant,
   announcementsEnabled = true,
   fullScreenOnNarrow,
+  onSelectAllChange,
   ...listProps
 }) {
   const [filterValue, setInternalFilterValue] = useProvidedStateOrCreate(externalFilterValue, undefined, '');
@@ -53,22 +59,72 @@ function FilteredActionList({
     onFilterChange(value, e);
     setInternalFilterValue(value);
   }, [onFilterChange, setInternalFilterValue]);
+  const inputAndListContainerRef = useRef(null);
+  const listRef = useRef(null);
   const scrollContainerRef = useRef(null);
   const inputRef = useProvidedRefOrCreate(providedInputRef);
+  const usingRemoveActiveDescendant = useFeatureFlag('primer_react_select_panel_remove_active_descendant');
   const [listContainerElement, setListContainerElement] = useState(null);
   const activeDescendantRef = useRef();
   const listId = useId();
   const inputDescriptionTextId = useId();
-  const onInputKeyPress = useCallback(event => {
-    if (event.key === 'Enter' && activeDescendantRef.current) {
-      event.preventDefault();
-      event.nativeEvent.stopImmediatePropagation();
+  const [isInputFocused, setIsInputFocused] = useState(false);
+  const selectAllChecked = items.length > 0 && items.every(item => item.selected);
+  const selectAllIndeterminate = !selectAllChecked && items.some(item_0 => item_0.selected);
+  const selectAllLabelText = selectAllChecked ? 'Deselect all' : 'Select all';
+  const getItemListForEachGroup = useCallback(groupId => {
+    const itemsInGroup = [];
+    for (const item_1 of items) {
+      // Look up the group associated with the current item.
+      if (item_1.groupId === groupId) {
+        itemsInGroup.push(item_1);
+      }
+    }
+    return itemsInGroup;
+  }, [items]);
+  const onInputKeyDown = useCallback(event => {
+    if (event.key === 'ArrowDown') {
+      if (listRef.current) {
+        const firstSelectedItem = listRef.current.querySelector('[role="option"]');
+        firstSelectedItem === null || firstSelectedItem === void 0 ? void 0 : firstSelectedItem.focus();
+        event.preventDefault();
+      }
+    } else if (event.key === 'Enter') {
+      let firstItem;
+      // If there are groups, it's not guaranteed that the first item is the actual first item in the first -
+      // as groups are rendered in the order of the groupId provided
+      if (groupMetadata) {
+        let firstGroupIndex = 0;
+        for (let i = 0; i < groupMetadata.length; i++) {
+          if (getItemListForEachGroup(groupMetadata[i].groupId).length > 0) {
+            break;
+          } else {
+            firstGroupIndex++;
+          }
+        }
+        const firstGroup = groupMetadata[firstGroupIndex].groupId;
+        firstItem = items.filter(item_2 => item_2.groupId === firstGroup)[0];
+      } else {
+        firstItem = items[0];
+      }
+      if (firstItem.onAction) {
+        firstItem.onAction(firstItem, event);
+        event.preventDefault();
+      }
+    }
+  }, [items, groupMetadata, getItemListForEachGroup]);
+  const onInputKeyPress = useCallback(event_0 => {
+    if (event_0.key === 'Enter' && activeDescendantRef.current) {
+      event_0.preventDefault();
+      event_0.nativeEvent.stopImmediatePropagation();
 
       // Forward Enter key press to active descendant so that item gets activated
-      const activeDescendantEvent = new KeyboardEvent(event.type, event.nativeEvent);
+      const activeDescendantEvent = new KeyboardEvent(event_0.type, event_0.nativeEvent);
       activeDescendantRef.current.dispatchEvent(activeDescendantEvent);
     }
   }, [activeDescendantRef]);
+
+  // BEGIN: Todo remove when we remove usingRemoveActiveDescendant
   const listContainerRefCallback = useCallback(node => {
     setListContainerElement(node);
     onListContainerRefChanged === null || onListContainerRefChanged === void 0 ? void 0 : onListContainerRefChanged(node);
@@ -76,7 +132,9 @@ function FilteredActionList({
   useEffect(() => {
     onInputRefChanged === null || onInputRefChanged === void 0 ? void 0 : onInputRefChanged(inputRef);
   }, [inputRef, onInputRefChanged]);
-  useFocusZone({
+  //END: Todo remove when we remove usingRemoveActiveDescendant
+
+  useFocusZone(!usingRemoveActiveDescendant ? {
     containerRef: {
       current: listContainerElement
     },
@@ -92,32 +150,49 @@ function FilteredActionList({
         scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
       }
     }
-  }, [
-  // List container isn't in the DOM while loading.  Need to re-bind focus zone when it changes.
-  listContainerElement]);
+  } : undefined, [listContainerElement, usingRemoveActiveDescendant]);
   useEffect(() => {
-    // if items changed, we want to instantly move active descendant into view
     if (activeDescendantRef.current && scrollContainerRef.current) {
       scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {
         ...menuScrollMargins,
         behavior: 'auto'
       });
     }
-  }, [items]);
-  useAnnouncements(items, {
+  }, [items, inputRef]);
+  useEffect(() => {
+    if (usingRemoveActiveDescendant) {
+      const inputAndListContainerElement = inputAndListContainerRef.current;
+      if (!inputAndListContainerElement) return;
+      const list = listRef.current;
+      if (!list) return;
+
+      // Listen for focus changes within the container
+      const handleFocusIn = event_1 => {
+        if (event_1.target === inputRef.current || list.contains(event_1.target)) {
+          setIsInputFocused(inputRef.current && inputRef.current === document.activeElement ? true : false);
+        }
+      };
+      inputAndListContainerElement.addEventListener('focusin', handleFocusIn);
+      return () => {
+        inputAndListContainerElement.removeEventListener('focusin', handleFocusIn);
+      };
+    }
+  }, [items, inputRef, listContainerElement, usingRemoveActiveDescendant]); // Re-run when items change to update active indicators
+
+  useEffect(() => {
+    if (usingRemoveActiveDescendant && !loading) {
+      setIsInputFocused(inputRef.current && inputRef.current === document.activeElement ? true : false);
+    }
+  }, [loading, inputRef, usingRemoveActiveDescendant]);
+  useAnnouncements(items, usingRemoveActiveDescendant ? listRef : {
     current: listContainerElement
-  }, inputRef, announcementsEnabled, loading);
+  }, inputRef, announcementsEnabled, loading, messageText);
   useScrollFlash(scrollContainerRef);
-  function getItemListForEachGroup(groupId) {
-    const itemsInGroup = [];
-    for (const item of items) {
-      // Look up the group associated with the current item.
-      if (item.groupId === groupId) {
-        itemsInGroup.push(item);
-      }
+  const handleSelectAllChange = useCallback(e_0 => {
+    if (onSelectAllChange) {
+      onSelectAllChange(e_0.target.checked);
     }
-    return itemsInGroup;
-  }
+  }, [onSelectAllChange]);
   function getBodyContent() {
     if (loading && scrollContainerRef.current && loadingType.appearsInBody) {
       return /*#__PURE__*/jsx(FilteredActionListBodyLoader, {
@@ -128,9 +203,11 @@ function FilteredActionList({
     if (message) {
       return message;
     }
-    return /*#__PURE__*/jsx(ActionList, {
-      ref: listContainerRefCallback,
+    let firstGroupIndex_0 = 0;
+    const actionListContent = /*#__PURE__*/jsx(ActionList, {
+      ref: usingRemoveActiveDescendant ? listRef : listContainerRefCallback,
       showDividers: showItemDividers,
+      selectionVariant: selectionVariant,
       ...listProps,
       role: "listbox",
       id: listId,
@@ -139,41 +216,64 @@ function FilteredActionList({
       },
       children: groupMetadata !== null && groupMetadata !== void 0 && groupMetadata.length ? groupMetadata.map((group, index) => {
         var _group$header, _group$header2;
+        if (index === firstGroupIndex_0 && getItemListForEachGroup(group.groupId).length === 0) {
+          firstGroupIndex_0++; // Increment firstGroupIndex if the first group has no items
+        }
         return /*#__PURE__*/jsxs(ActionList.Group, {
           children: [/*#__PURE__*/jsx(ActionList.GroupHeading, {
             variant: (_group$header = group.header) !== null && _group$header !== void 0 && _group$header.variant ? group.header.variant : undefined,
             children: (_group$header2 = group.header) !== null && _group$header2 !== void 0 && _group$header2.title ? group.header.title : `Group ${group.groupId}`
           }), getItemListForEachGroup(group.groupId).map(({
             key: itemKey,
-            ...item_0
-          }, index_0) => {
-            var _ref, _item_0$id;
-            const key = (_ref = itemKey !== null && itemKey !== void 0 ? itemKey : (_item_0$id = item_0.id) === null || _item_0$id === void 0 ? void 0 : _item_0$id.toString()) !== null && _ref !== void 0 ? _ref : index_0.toString();
+            ...item_3
+          }, itemIndex) => {
+            var _ref, _item_3$id;
+            const key = (_ref = itemKey !== null && itemKey !== void 0 ? itemKey : (_item_3$id = item_3.id) === null || _item_3$id === void 0 ? void 0 : _item_3$id.toString()) !== null && _ref !== void 0 ? _ref : itemIndex.toString();
             return /*#__PURE__*/jsx(MappedActionListItem, {
-              ...item_0,
+              className: clsx(classes.ActionListItem, 'className' in item_3 ? item_3.className : undefined),
+              "data-input-focused": isInputFocused ? '' : undefined,
+              "data-first-child": index === firstGroupIndex_0 && itemIndex === 0 ? '' : undefined,
+              ...item_3,
               renderItem: listProps.renderItem
             }, key);
           })]
         }, index);
       }) : items.map(({
         key: itemKey_0,
-        ...item_1
-      }, index_1) => {
-        var _ref2, _item_1$id;
-        const key_0 = (_ref2 = itemKey_0 !== null && itemKey_0 !== void 0 ? itemKey_0 : (_item_1$id = item_1.id) === null || _item_1$id === void 0 ? void 0 : _item_1$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : index_1.toString();
+        ...item_4
+      }, index_0) => {
+        var _ref2, _item_4$id;
+        const key_0 = (_ref2 = itemKey_0 !== null && itemKey_0 !== void 0 ? itemKey_0 : (_item_4$id = item_4.id) === null || _item_4$id === void 0 ? void 0 : _item_4$id.toString()) !== null && _ref2 !== void 0 ? _ref2 : index_0.toString();
         return /*#__PURE__*/jsx(MappedActionListItem, {
-          ...item_1,
+          className: clsx(classes.ActionListItem, 'className' in item_4 ? item_4.className : undefined),
+          "data-input-focused": isInputFocused ? '' : undefined,
+          "data-first-child": index_0 === 0 ? '' : undefined,
+          ...item_4,
           renderItem: listProps.renderItem
         }, key_0);
       })
     });
+
+    // Use ActionListContainerContext.Provider only for the old behavior (when feature flag is disabled)
+    if (usingRemoveActiveDescendant) {
+      return /*#__PURE__*/jsx(ActionListContainerContext.Provider, {
+        value: {
+          container: 'FilteredActionList',
+          listRole: 'listbox',
+          selectionAttribute: 'aria-selected',
+          selectionVariant,
+          enableFocusZone: true
+        },
+        children: actionListContent
+      });
+    } else {
+      return actionListContent;
+    }
   }
-  return /*#__PURE__*/jsxs(Box, {
-    display: "flex",
-    flexDirection: "column",
-    overflow: "hidden",
+  return /*#__PURE__*/jsxs(BoxWithFallback, {
+    ref: inputAndListContainerRef,
     sx: sx,
-    className: className,
+    className: clsx(className, classes.Root),
     "data-testid": "filtered-action-list",
     children: [/*#__PURE__*/jsx(StyledHeader, {
       children: /*#__PURE__*/jsx(TextInput, {
@@ -184,6 +284,7 @@ function FilteredActionList({
         value: filterValue,
         onChange: onInputChange,
         onKeyPress: onInputKeyPress,
+        onKeyDown: usingRemoveActiveDescendant ? onInputKeyDown : () => {},
         placeholder: placeholderText,
         role: "combobox",
         "aria-expanded": "true",
@@ -199,6 +300,19 @@ function FilteredActionList({
     }), /*#__PURE__*/jsx(VisuallyHidden, {
       id: inputDescriptionTextId,
       children: "Items will be filtered as you type"
+    }), onSelectAllChange !== undefined && /*#__PURE__*/jsxs("div", {
+      className: classes.SelectAllContainer,
+      children: [/*#__PURE__*/jsx(Checkbox, {
+        id: "select-all-checkbox",
+        className: classes.SelectAllCheckbox,
+        checked: selectAllChecked,
+        indeterminate: selectAllIndeterminate,
+        onChange: handleSelectAllChange
+      }), /*#__PURE__*/jsx("label", {
+        className: classes.SelectAllLabel,
+        htmlFor: "select-all-checkbox",
+        children: selectAllLabelText
+      })]
     }), /*#__PURE__*/jsx("div", {
       ref: scrollContainerRef,
       className: classes.Container,

package/lib-esm/FilteredActionList/FilteredActionList.module.css.js

@@ -1,5 +1,5 @@
-import './FilteredActionList-e1dde781.css';
+import './FilteredActionList-96b126d7.css';
 
-var classes = {"Container":"prc-FilteredActionList-Container-2A9NQ","FullScreenTextInput":"prc-FilteredActionList-FullScreenTextInput-rCAiq"};
+var classes = {"Root":"prc-FilteredActionList-Root-S5E74","Container":"prc-FilteredActionList-Container-2A9NQ","ActionListItem":"prc-FilteredActionList-ActionListItem-39lnB","FullScreenTextInput":"prc-FilteredActionList-FullScreenTextInput-rCAiq","SelectAllContainer":"prc-FilteredActionList-SelectAllContainer-w5otq","SelectAllCheckbox":"prc-FilteredActionList-SelectAllCheckbox-dq2yL","SelectAllLabel":"prc-FilteredActionList-SelectAllLabel-l34LA"};
 
 export { classes as default };

package/lib-esm/FilteredActionList/FilteredActionListLoaders.js

@@ -1,10 +1,10 @@
 import { c } from 'react-compiler-runtime';
 import { Stack } from '../Stack/Stack.js';
+import { SkeletonBox } from '../Skeleton/SkeletonBox.js';
 import classes from './FilteredActionListLoaders.module.css.js';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Box from '../Box/Box.js';
 import StyledSpinner from '../Spinner/Spinner.js';
-import { SkeletonBox } from '../Skeleton/SkeletonBox.js';
 
 class FilteredActionListLoadingType {
   constructor(name, appearsInBody) {

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

@@ -1,3 +1,4 @@
-export { FilteredActionList } from './FilteredActionListEntry';
-export type { FilteredActionListProps } from './FilteredActionListEntry';
+export { FilteredActionList } from './FilteredActionList';
+export type { FilteredActionListProps } from './FilteredActionList';
+export type { FilteredActionListItemProps as ItemProps, ItemInput, GroupedListProps, ListPropsBase, RenderItemFn, } from './types';
 //# sourceMappingURL=index.d.ts.map