@primer/react 38.0.0-rc.0 → 38.0.0-rc.09f015db1

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

@@ -1,159 +0,0 @@
-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.js

@@ -1,203 +0,0 @@
-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;
-const useFirstRender = () => {
-  const firstRender = useRef(true);
-  useEffect(() => {
-    firstRender.current = false;
-  }, []);
-  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]');
-  if (!listElement || !(activeItemElement !== null && activeItemElement !== void 0 && activeItemElement.textContent)) return;
-  const optionElements = listElement.querySelectorAll('[role="option"]');
-  const index = Array.from(optionElements).indexOf(activeItemElement);
-  const activeItem = items[index];
-  const text = activeItem === null || activeItem === void 0 ? void 0 : activeItem.text;
-  const selected = activeItem === null || activeItem === void 0 ? void 0 : activeItem.selected;
-  return {
-    index,
-    text,
-    selected
-  };
-};
-//TODO remove this when we remove usingRemoveActiveDescendant
-
-const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) => {
-  const $ = c(39);
-  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");
-    $[0] = t2;
-  } else {
-    t2 = $[0];
-  }
-  const liveRegion = t2;
-  let t3;
-  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);
-      }
-    };
-    $[3] = enabled;
-    $[4] = t4;
-  } else {
-    t4 = $[4];
-  }
-  const announce$1 = t4;
-  let t5;
-  if ($[5] !== announce$1 || $[6] !== inputRef.current || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRemoveActiveDescendant) {
-    t5 = function announceInitialFocus() {
-      const focusHandler = () => {
-        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);
-    };
-    $[5] = announce$1;
-    $[6] = inputRef.current;
-    $[7] = items;
-    $[8] = listContainerRef;
-    $[9] = selectedItems;
-    $[10] = usingRemoveActiveDescendant;
-    $[11] = t5;
-  } 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];
-  }
-  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) {
-    t7 = function announceListUpdates() {
-      if (isFirstRender) {
-        return;
-      }
-      liveRegion === null || liveRegion === void 0 ? void 0 : liveRegion.clear();
-      if (items.length === 0 && !loading) {
-        announce$1(`${message === null || message === void 0 ? void 0 : message.title}. ${message === null || message === void 0 ? void 0 : message.description}`, {
-          delayMs
-        });
-        return;
-      }
-      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
-          });
-        });
-      }
-    };
-    $[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;
-  } else {
-    t7 = $[28];
-  }
-  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) {
-    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;
-  } else {
-    t10 = $[38];
-  }
-  useEffect(t7, t10);
-};
-function _temp(item) {
-  return item.selected;
-}
-
-export { useAnnouncements };

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

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { SxProp } from '../sx';
-import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-export type FlashProps = React.ComponentPropsWithoutRef<'div'> & {
-    className?: string;
-    variant?: 'default' | 'warning' | 'success' | 'danger';
-    full?: boolean;
-} & SxProp;
-declare const Flash: PolymorphicForwardRefComponent<"div", FlashProps>;
-export default Flash;
-//# sourceMappingURL=Flash.d.ts.map

package/lib-esm/Flash/Flash.js

@@ -1,78 +0,0 @@
-import { c } from 'react-compiler-runtime';
-import { clsx } from 'clsx';
-import React from 'react';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
-import classes from './Flash.module.css.js';
-import { jsx } from 'react/jsx-runtime';
-
-const Flash = /*#__PURE__*/React.forwardRef(function Flash(t0, ref) {
-  const $ = c(17);
-  let as;
-  let className;
-  let full;
-  let rest;
-  let sx;
-  let t1;
-  if ($[0] !== t0) {
-    ({
-      as,
-      className,
-      variant: t1,
-      full,
-      sx,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = as;
-    $[2] = className;
-    $[3] = full;
-    $[4] = rest;
-    $[5] = sx;
-    $[6] = t1;
-  } else {
-    as = $[1];
-    className = $[2];
-    full = $[3];
-    rest = $[4];
-    sx = $[5];
-    t1 = $[6];
-  }
-  const variant = t1 === undefined ? "default" : t1;
-  let t2;
-  if ($[7] !== className) {
-    t2 = clsx(classes.Flash, className);
-    $[7] = className;
-    $[8] = t2;
-  } else {
-    t2 = $[8];
-  }
-  const t3 = full ? "" : undefined;
-  let t4;
-  if ($[9] !== as || $[10] !== ref || $[11] !== rest || $[12] !== sx || $[13] !== t2 || $[14] !== t3 || $[15] !== variant) {
-    t4 = /*#__PURE__*/jsx(BoxWithFallback, {
-      ...rest,
-      ref: ref,
-      as: as,
-      className: t2,
-      "data-full": t3,
-      "data-variant": variant,
-      sx: sx
-    });
-    $[9] = as;
-    $[10] = ref;
-    $[11] = rest;
-    $[12] = sx;
-    $[13] = t2;
-    $[14] = t3;
-    $[15] = variant;
-    $[16] = t4;
-  } else {
-    t4 = $[16];
-  }
-  return t4;
-});
-if (process.env.NODE_ENV !== "production") {
-  Flash.displayName = 'Flash';
-}
-
-export { Flash as default };

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

@@ -1,62 +0,0 @@
-import React from 'react';
-import type { SxProp } from '../sx';
-import { FormControlCaption } from './FormControlCaption';
-export type FormControlProps = {
-    children?: React.ReactNode;
-    /**
-     * Whether the control allows user input
-     */
-    disabled?: boolean;
-    /**
-     * The unique identifier for this control. Used to associate the label, validation text, and caption text
-     */
-    id?: string;
-    /**
-     * If true, the user must specify a value for the input before the owning form can be submitted
-     */
-    required?: boolean;
-    /**
-     * The direction the content flows.
-     * Vertical layout is used by default, and horizontal layout is used for checkbox and radio inputs.
-     */
-    layout?: 'horizontal' | 'vertical';
-    className?: string;
-} & SxProp;
-declare const _default: React.ForwardRefExoticComponent<{
-    children?: React.ReactNode;
-    /**
-     * Whether the control allows user input
-     */
-    disabled?: boolean;
-    /**
-     * The unique identifier for this control. Used to associate the label, validation text, and caption text
-     */
-    id?: string;
-    /**
-     * If true, the user must specify a value for the input before the owning form can be submitted
-     */
-    required?: boolean;
-    /**
-     * The direction the content flows.
-     * Vertical layout is used by default, and horizontal layout is used for checkbox and radio inputs.
-     */
-    layout?: "horizontal" | "vertical";
-    className?: string;
-} & SxProp & React.RefAttributes<HTMLDivElement>> & {
-    Caption: typeof FormControlCaption;
-    Label: React.FC<React.PropsWithChildren<({
-        htmlFor?: string;
-    } & ((import("../internal/components/InputLabel").LabelProps | import("../internal/components/InputLabel").LegendOrSpanProps) & {
-        children?: React.ReactNode | undefined;
-    })) & {
-        visuallyHidden?: boolean;
-        requiredText?: string;
-        requiredIndicator?: boolean;
-        id?: string;
-        className?: string;
-    } & SxProp>>;
-    LeadingVisual: React.FC<React.PropsWithChildren<SxProp>>;
-    Validation: React.FC<React.PropsWithChildren<import("./_FormControlValidation").FormControlValidationProps>>;
-};
-export default _default;
-//# sourceMappingURL=FormControl.d.ts.map