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

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

@@ -0,0 +1,159 @@
+import type { Key } from 'react';
+import type { SxProp } from '../sx';
+import type { Merge } from '../utils/polymorphic';
+import type { Group } from '../ActionList/Group';
+import type { ActionListGroupProps } from '../deprecated';
+import type { AriaRole } from '../utils/types';
+export type RenderItemFn = (props: FilteredActionListItemProps) => React.ReactElement;
+export type ItemInput = Merge<React.ComponentPropsWithoutRef<'div'>, FilteredActionListItemProps> | ((Partial<FilteredActionListItemProps> & {
+    renderItem: RenderItemFn;
+}) & {
+    key?: Key;
+});
+export interface FilteredActionListItemProps extends SxProp {
+    /**
+     * Primary text which names an `Item`.
+     */
+    text?: string;
+    /**
+     * Secondary text which provides additional information about an `Item`.
+     */
+    description?: string;
+    /**
+     * Secondary text style variations. Usage is discretionary.
+     *
+     * - `"inline"` - Secondary text is positioned beside primary text.
+     * - `"block"` - Secondary text is positioned below primary text.
+     */
+    descriptionVariant?: 'inline' | 'block';
+    /**
+     * Icon (or similar) positioned before `Item` text.
+     */
+    leadingVisual?: React.ElementType;
+    /**
+     * @deprecated Use `trailingVisual` instead
+     * Icon (or similar) positioned after `Item` text.
+     */
+    trailingIcon?: React.ElementType;
+    /**
+     * @deprecated Use `trailingVisual` instead
+     * Text positioned after `Item` text and optional trailing icon.
+     */
+    trailingText?: string;
+    /**
+     * Icon or text positioned after `Item` text.
+     */
+    trailingVisual?: React.ElementType | React.ReactNode;
+    /**
+     * Style variations associated with various `Item` types.
+     *
+     * - `"default"` - An action `Item`.
+     * - `"danger"` - A destructive action `Item`.
+     */
+    variant?: 'default' | 'danger';
+    /**
+     * For `Item`s which can be selected, whether the `Item` is currently selected.
+     */
+    selected?: boolean;
+    /**
+     * Designates the group that an item belongs to.
+     */
+    groupId?: string;
+    /**
+     * Items that are disabled can not be clicked, selected, or navigated through.
+     */
+    disabled?: boolean;
+    /**
+     * Callback that will trigger both on click selection and keyboard selection.
+     */
+    onAction?: (item: FilteredActionListItemProps, event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * An id associated with this item.  Should be unique between items
+     */
+    id?: number | string;
+    /**
+     * Node to be included inside the item before the text.
+     */
+    children?: React.ReactNode;
+    /**
+     * The ARIA role describing the function of `List` component. `option` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * An item to pass back in the `onAction` callback, meant as
+     */
+    item?: ItemInput;
+}
+/**
+ * Contract for props passed to the `List` component, when its `Item`s are collected in `Group`s.
+ */
+export interface GroupedListProps extends ListPropsBase {
+    /**
+     * A collection of `Group` props (except `items`), plus a unique group identifier
+     * and `Group`-level custom `Item` or `Group` renderers.
+     */
+    groupMetadata: ((Omit<ActionListGroupProps, 'items'> | Omit<Partial<ActionListGroupProps> & {
+        renderItem?: RenderItemFn;
+        renderGroup?: typeof Group;
+    }, 'items'>) & {
+        groupId: string;
+    })[];
+    /**
+     * A collection of `Item` props, plus associated group identifiers
+     * and `Item`-level custom `Item` renderers.
+     */
+    items: ((FilteredActionListItemProps | (Partial<FilteredActionListItemProps> & {
+        renderItem: RenderItemFn;
+    })) & {
+        groupId: string;
+    })[];
+}
+/**
+ * Contract for props passed to the `List` component.
+ */
+export interface ListPropsBase {
+    /**
+     * A collection of `Item` props and `Item`-level custom `Item` renderers.
+     */
+    items: ItemInput[];
+    /**
+     * The ARIA role describing the function of `List` component. `listbox` is a common value.
+     */
+    role?: AriaRole;
+    /**
+     * id to attach to the base DOM node of the list
+     */
+    id?: string;
+    /**
+     * aria-label to attach to the base DOM node of the list
+     */
+    'aria-label'?: string;
+    /**
+     * A `List`-level custom `Item` renderer. Every `Item` within this `List`
+     * without a `Group`-level or `Item`-level custom `Item` renderer will be
+     * rendered using this function component.
+     */
+    renderItem?: RenderItemFn;
+    /**
+     * A `List`-level custom `Group` renderer. Every `Group` within this `List`
+     * without a `Group`-level custom `Item` renderer will be rendered using
+     * this function component.
+     */
+    renderGroup?: typeof Group;
+    /**
+     * Style variations. Usage is discretionary.
+     *
+     * - `"inset"` - `List` children are offset (vertically and horizontally) from `List`’s edges
+     * - `"full"` - `List` children are flush (vertically and horizontally) with `List` edges
+     */
+    variant?: 'inset' | 'horizontal-inset' | 'full';
+    /**
+     *  For `Item`s which can be selected, whether `multiple` `Item`s or a `single` `Item` can be selected
+     */
+    selectionVariant?: 'single' | 'multiple' | 'radio';
+    /**
+     * Whether to display a divider above each `Item` in this `List` when it does not follow a `Header` or `Divider`.
+     */
+    showItemDividers?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -1,3 +1,6 @@
-import type { FilteredActionListProps } from './FilteredActionListEntry';
-export declare const useAnnouncements: (items: FilteredActionListProps["items"], listContainerRef: React.RefObject<HTMLUListElement>, inputRef: React.RefObject<HTMLInputElement>, enabled?: boolean, loading?: boolean) => void;
+import type { FilteredActionListProps } from './index';
+export declare const useAnnouncements: (items: FilteredActionListProps["items"], listContainerRef: React.RefObject<HTMLUListElement>, inputRef: React.RefObject<HTMLInputElement>, enabled?: boolean, loading?: boolean, message?: {
+    title: string;
+    description: string;
+}) => void;
 //# sourceMappingURL=useAnnouncements.d.ts.map

package/lib-esm/FilteredActionList/useAnnouncements.js

@@ -1,6 +1,7 @@
 import { c } from 'react-compiler-runtime';
 import { announce } from '@primer/live-region-element';
 import { useEffect, useRef } from 'react';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 
 // we add a delay so that it does not interrupt default screen reader announcement and queues after it
 const delayMs = 500;
@@ -11,6 +12,8 @@ const useFirstRender = () => {
   }, []);
   return firstRender.current;
 };
+
+//TODO remove this when we remove usingRemoveActiveDescendant
 const getItemWithActiveDescendant = (listRef, items) => {
   const listElement = listRef.current;
   const activeItemElement = listElement === null || listElement === void 0 ? void 0 : listElement.querySelector('[data-is-active-descendant]');
@@ -26,10 +29,13 @@ const getItemWithActiveDescendant = (listRef, items) => {
     selected
   };
 };
-const useAnnouncements = (items, listContainerRef, inputRef, t0, t1) => {
-  const $ = c(20);
+//TODO remove this when we remove usingRemoveActiveDescendant
+
+const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) => {
+  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");
   let t2;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t2 = document.querySelector("live-region");
@@ -39,109 +45,150 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1) => {
   }
   const liveRegion = t2;
   let t3;
-  if ($[1] !== enabled) {
-    t3 = (...t4) => {
-      const args = t4;
+  if ($[1] !== items) {
+    t3 = items.filter(_temp);
+    $[1] = items;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const selectedItems = t3.length;
+  let t4;
+  if ($[3] !== enabled) {
+    t4 = (...t5) => {
+      const args = t5;
       if (enabled) {
         return announce(...args);
       }
     };
-    $[1] = enabled;
-    $[2] = t3;
+    $[3] = enabled;
+    $[4] = t4;
   } else {
-    t3 = $[2];
+    t4 = $[4];
   }
-  const announce$1 = t3;
-  let t4;
-  if ($[3] !== announce$1 || $[4] !== inputRef.current || $[5] !== items || $[6] !== listContainerRef) {
-    t4 = function announceInitialFocus() {
+  const announce$1 = t4;
+  let t5;
+  let t6;
+  if ($[5] !== announce$1 || $[6] !== inputRef || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRemoveActiveDescendant) {
+    t5 = function announceInitialFocus() {
       const focusHandler = () => {
-        window.requestAnimationFrame(() => {
-          const activeItem = getItemWithActiveDescendant(listContainerRef, items);
-          if (!activeItem) {
-            return;
-          }
-          const {
-            index,
-            text,
-            selected
-          } = activeItem;
-          const announcementText = ["Focus on filter text box and list of items", `Focused item: ${text}`, `${selected ? "selected" : "not selected"}`, `${index + 1} of ${items.length}`].join(", ");
+        if (usingRemoveActiveDescendant) {
+          const announcementText = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
           announce$1(announcementText, {
             delayMs,
             from: liveRegion ? liveRegion : undefined
           });
-        });
+        } else {
+          window.requestAnimationFrame(() => {
+            const activeItem = getItemWithActiveDescendant(listContainerRef, items);
+            if (!activeItem) {
+              return;
+            }
+            const {
+              index,
+              text,
+              selected
+            } = activeItem;
+            const announcementText_0 = ["Focus on filter text box and list of items", `Focused item: ${text}`, `${selected ? "selected" : "not selected"}`, `${index + 1} of ${items.length}`].join(", ");
+            announce$1(announcementText_0, {
+              delayMs,
+              from: liveRegion ? liveRegion : undefined
+            });
+          });
+        }
       };
       const inputElement = inputRef.current;
       inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener("focus", focusHandler);
       return () => inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("focus", focusHandler);
     };
-    $[3] = announce$1;
-    $[4] = inputRef.current;
-    $[5] = items;
-    $[6] = listContainerRef;
-    $[7] = t4;
+    t6 = [listContainerRef, inputRef, items, liveRegion, announce$1, usingRemoveActiveDescendant, selectedItems];
+    $[5] = announce$1;
+    $[6] = inputRef;
+    $[7] = items;
+    $[8] = listContainerRef;
+    $[9] = selectedItems;
+    $[10] = usingRemoveActiveDescendant;
+    $[11] = t5;
+    $[12] = t6;
   } else {
-    t4 = $[7];
+    t5 = $[11];
+    t6 = $[12];
   }
-  let t5;
-  if ($[8] !== announce$1 || $[9] !== inputRef || $[10] !== items || $[11] !== listContainerRef) {
-    t5 = [listContainerRef, inputRef, items, liveRegion, announce$1];
-    $[8] = announce$1;
-    $[9] = inputRef;
-    $[10] = items;
-    $[11] = listContainerRef;
-    $[12] = t5;
-  } else {
-    t5 = $[12];
-  }
-  useEffect(t4, t5);
+  useEffect(t5, t6);
   const isFirstRender = useFirstRender();
-  let t6;
   let t7;
-  if ($[13] !== announce$1 || $[14] !== isFirstRender || $[15] !== items || $[16] !== listContainerRef || $[17] !== loading) {
-    t6 = function announceListUpdates() {
+  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;
       }
       liveRegion === null || liveRegion === void 0 ? void 0 : liveRegion.clear();
       if (items.length === 0 && !loading) {
-        announce$1("No matching items.", {
+        announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, {
           delayMs
         });
         return;
       }
-      window.requestAnimationFrame(() => {
-        const activeItem_0 = getItemWithActiveDescendant(listContainerRef, items);
-        if (!activeItem_0) {
-          return;
-        }
-        const {
-          index: index_0,
-          text: text_0,
-          selected: selected_0
-        } = activeItem_0;
-        const announcementText_0 = ["List updated", `Focused item: ${text_0}`, `${selected_0 ? "selected" : "not selected"}`, `${index_0 + 1} of ${items.length}`].join(", ");
-        announce$1(announcementText_0, {
+      if (usingRemoveActiveDescendant) {
+        const announcementText_1 = `${items.length} item${items.length > 1 ? "s" : ""} available, ${selectedItems} selected.`;
+        announce$1(announcementText_1, {
           delayMs,
           from: liveRegion ? liveRegion : undefined
         });
-      });
+      } else {
+        window.requestAnimationFrame(() => {
+          const activeItem_0 = getItemWithActiveDescendant(listContainerRef, items);
+          if (!activeItem_0) {
+            return;
+          }
+          const {
+            index: index_0,
+            text: text_0,
+            selected: selected_0
+          } = activeItem_0;
+          const announcementText_2 = ["List updated", `Focused item: ${text_0}`, `${selected_0 ? "selected" : "not selected"}`, `${index_0 + 1} of ${items.length}`].join(", ");
+          announce$1(announcementText_2, {
+            delayMs,
+            from: liveRegion ? liveRegion : undefined
+          });
+        });
+      }
     };
-    t7 = [announce$1, isFirstRender, items, listContainerRef, liveRegion, loading];
     $[13] = announce$1;
     $[14] = isFirstRender;
     $[15] = items;
     $[16] = listContainerRef;
     $[17] = loading;
-    $[18] = t6;
-    $[19] = t7;
+    $[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 = $[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 ($[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];
+    $[23] = announce$1;
+    $[24] = isFirstRender;
+    $[25] = items;
+    $[26] = listContainerRef;
+    $[27] = loading;
+    $[28] = selectedItems;
+    $[29] = t8;
+    $[30] = t9;
+    $[31] = usingRemoveActiveDescendant;
+    $[32] = t10;
   } else {
-    t6 = $[18];
-    t7 = $[19];
+    t10 = $[32];
   }
-  useEffect(t6, t7);
+  useEffect(t7, t10);
 };
+function _temp(item) {
+  return item.selected;
+}
 
 export { useAnnouncements };

package/lib-esm/FormControl/FormControl.js

@@ -12,7 +12,7 @@ import FormControlValidation from './_FormControlValidation.js';
 import { FormControlContextProvider } from './_FormControlContext.js';
 import { warning } from '../utils/warning.js';
 import classes from './FormControl.module.css.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
+import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import CheckboxOrRadioGroupContext from '../internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupContext.js';
 import Autocomplete from '../Autocomplete/Autocomplete.js';
@@ -22,7 +22,6 @@ import TextInput from '../TextInput/TextInput.js';
 import TextInputWithTokens from '../TextInputWithTokens/TextInputWithTokens.js';
 import Textarea from '../Textarea/Textarea.js';
 import { SelectPanel } from '../SelectPanel/SelectPanel.js';
-import Box from '../Box/Box.js';
 
 const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
   var _slots$validation, _slots$label;
@@ -162,23 +161,15 @@ const FormControl = /*#__PURE__*/React.forwardRef((t0, ref) => {
   } else {
     t10 = $[23];
   }
-  const t11 = isChoiceInput || layout === "horizontal" ? sx !== defaultSxProp ? /*#__PURE__*/jsx(Box, {
+  const t11 = isChoiceInput || layout === "horizontal" ? /*#__PURE__*/jsx(BoxWithFallback, {
     ref: ref,
     "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
     sx: sx,
     className: clsx(className, classes.ControlHorizontalLayout),
     children: InputChildren
-  }) : /*#__PURE__*/jsx("div", {
-    ref: ref,
-    "data-has-leading-visual": slots.leadingVisual ? "" : undefined,
-    className: clsx(className, classes.ControlHorizontalLayout),
-    children: InputChildren
-  }) : /*#__PURE__*/jsxs(Box, {
+  }) : /*#__PURE__*/jsxs(BoxWithFallback, {
     ref: ref,
     "data-has-label": !isLabelHidden ? "" : undefined,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "flex-start",
     sx: sx,
     className: clsx(className, classes.ControlVerticalLayout),
     children: [slots.label, /*#__PURE__*/React.isValidElement(InputComponent) && /*#__PURE__*/React.cloneElement(InputComponent, Object.assign({