@primer/react 38.30.1-rc.0d136c1b7 → 38.30.1-rc.34724960c

package/dist/ConfirmationDialog/ConfirmationDialog.d.ts

@@ -1,65 +1,67 @@
-import type React from 'react';
-import type { DialogWidth, DialogHeight } from '../Dialog';
+import { DialogHeight, DialogWidth } from "../Dialog/Dialog.js";
+import React from "react";
+
+//#region src/ConfirmationDialog/ConfirmationDialog.d.ts
 /**
  * Props to customize the ConfirmationDialog.
  */
-export interface ConfirmationDialogProps {
-    /**
-     * Required. This callback is invoked when a gesture to close the dialog
-     * is performed. The first argument indicates the gesture.
-     */
-    onClose: (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => void;
-    /**
-     * Required. The title of the ConfirmationDialog. This is usually a brief
-     * question.
-     */
-    title: React.ReactNode;
-    /**
-     * The text to use for the cancel button. Default: "Cancel".
-     */
-    cancelButtonContent?: React.ReactNode;
-    /**
-     * The text to use for the confirm button. Default: "OK".
-     */
-    confirmButtonContent?: React.ReactNode;
-    /**
-     * The type of button to use for the confirm button. Default: Button.
-     */
-    confirmButtonType?: 'normal' | 'primary' | 'danger';
-    /**
-     * Whether the cancel button is in a loading state. Default: false.
-     */
-    cancelButtonLoading?: boolean;
-    /**
-     * Whether the confirm button is in a loading state. Default: false.
-     */
-    confirmButtonLoading?: boolean;
-    /**
-     * Overrides the button that should be initially focused when the dialog is opened. By default, the confirm button
-     * is focused initially unless it is a dangerous action, in which case the cancel button is focused. This should
-     * rarely be overridden, in order to ensure that the user does not accidentally confirm a dangerous action.
-     */
-    overrideButtonFocus?: 'cancel' | 'confirm';
-    /**
-     * Additional class names to apply to the dialog
-     */
-    className?: string;
-    /**
-     * The width of the dialog.
-     * small: 296px
-     * medium: 320px
-     * large: 480px
-     * xlarge: 640px
-     * @default 'medium'
-     */
-    width?: DialogWidth;
-    /**
-     * The height of the dialog.
-     * small: 480px
-     * large: 640px
-     * auto: variable based on contents
-     */
-    height?: DialogHeight;
+interface ConfirmationDialogProps {
+  /**
+   * Required. This callback is invoked when a gesture to close the dialog
+   * is performed. The first argument indicates the gesture.
+   */
+  onClose: (gesture: 'confirm' | 'close-button' | 'cancel' | 'escape') => void;
+  /**
+   * Required. The title of the ConfirmationDialog. This is usually a brief
+   * question.
+   */
+  title: React.ReactNode;
+  /**
+   * The text to use for the cancel button. Default: "Cancel".
+   */
+  cancelButtonContent?: React.ReactNode;
+  /**
+   * The text to use for the confirm button. Default: "OK".
+   */
+  confirmButtonContent?: React.ReactNode;
+  /**
+   * The type of button to use for the confirm button. Default: Button.
+   */
+  confirmButtonType?: 'normal' | 'primary' | 'danger';
+  /**
+   * Whether the cancel button is in a loading state. Default: false.
+   */
+  cancelButtonLoading?: boolean;
+  /**
+   * Whether the confirm button is in a loading state. Default: false.
+   */
+  confirmButtonLoading?: boolean;
+  /**
+   * Overrides the button that should be initially focused when the dialog is opened. By default, the confirm button
+   * is focused initially unless it is a dangerous action, in which case the cancel button is focused. This should
+   * rarely be overridden, in order to ensure that the user does not accidentally confirm a dangerous action.
+   */
+  overrideButtonFocus?: 'cancel' | 'confirm';
+  /**
+   * Additional class names to apply to the dialog
+   */
+  className?: string;
+  /**
+   * The width of the dialog.
+   * small: 296px
+   * medium: 320px
+   * large: 480px
+   * xlarge: 640px
+   * @default 'medium'
+   */
+  width?: DialogWidth;
+  /**
+   * The height of the dialog.
+   * small: 480px
+   * large: 640px
+   * auto: variable based on contents
+   */
+  height?: DialogHeight;
 }
 /**
  * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
@@ -67,5 +69,6 @@ export interface ConfirmationDialogProps {
  * two buttons: one to cancel the action and one to confirm it. No custom
  * rendering capabilities are provided for ConfirmationDialog.
  */
-export declare const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDialogProps>>;
-//# sourceMappingURL=ConfirmationDialog.d.ts.map
+declare const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDialogProps>>;
+//#endregion
+export { ConfirmationDialog, ConfirmationDialogProps };

package/dist/ConfirmationDialog/ConfirmationDialog.js

@@ -1,62 +1,48 @@
-import { useCallback } from 'react';
-import { jsx } from 'react/jsx-runtime';
-import { Dialog } from '../Dialog/Dialog.js';
-
+import { Dialog } from "../Dialog/Dialog.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+//#region src/ConfirmationDialog/ConfirmationDialog.tsx
 /**
- * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
- * is used to confirm a user action. ConfirmationDialogs always have exactly
- * two buttons: one to cancel the action and one to confirm it. No custom
- * rendering capabilities are provided for ConfirmationDialog.
- */
-const ConfirmationDialog = props => {
-  const {
-    onClose,
-    title,
-    cancelButtonContent = 'Cancel',
-    confirmButtonContent = 'OK',
-    confirmButtonType = 'normal',
-    cancelButtonLoading = false,
-    confirmButtonLoading = false,
-    children,
-    className,
-    width = 'medium',
-    height,
-    overrideButtonFocus
-  } = props;
-  const onCancelButtonClick = useCallback(() => {
-    onClose('cancel');
-  }, [onClose]);
-  const onConfirmButtonClick = useCallback(() => {
-    onClose('confirm');
-  }, [onClose]);
-  const isConfirmationDangerous = confirmButtonType === 'danger';
-  const buttonToFocus = overrideButtonFocus !== undefined ? overrideButtonFocus : isConfirmationDangerous ? 'cancel' : 'confirm';
-  const cancelButton = {
-    content: cancelButtonContent,
-    onClick: onCancelButtonClick,
-    autoFocus: buttonToFocus === 'cancel',
-    loading: cancelButtonLoading
-  };
-  const confirmButton = {
-    content: confirmButtonContent,
-    buttonType: confirmButtonType,
-    onClick: onConfirmButtonClick,
-    autoFocus: buttonToFocus === 'confirm',
-    loading: confirmButtonLoading
-  };
-  const footerButtons = [cancelButton, confirmButton];
-  return /*#__PURE__*/jsx(Dialog, {
-    "data-component": "ConfirmationDialog",
-    onClose: onClose,
-    title: title,
-    footerButtons: footerButtons,
-    role: "alertdialog",
-    width: width,
-    height: height,
-    className: className,
-    children: children
-  });
+* Props to customize the ConfirmationDialog.
+*/
+/**
+* A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
+* is used to confirm a user action. ConfirmationDialogs always have exactly
+* two buttons: one to cancel the action and one to confirm it. No custom
+* rendering capabilities are provided for ConfirmationDialog.
+*/
+const ConfirmationDialog = (props) => {
+	const { onClose, title, cancelButtonContent = "Cancel", confirmButtonContent = "OK", confirmButtonType = "normal", cancelButtonLoading = false, confirmButtonLoading = false, children, className, width = "medium", height, overrideButtonFocus } = props;
+	const onCancelButtonClick = useCallback(() => {
+		onClose("cancel");
+	}, [onClose]);
+	const onConfirmButtonClick = useCallback(() => {
+		onClose("confirm");
+	}, [onClose]);
+	const buttonToFocus = overrideButtonFocus !== void 0 ? overrideButtonFocus : confirmButtonType === "danger" ? "cancel" : "confirm";
+	return /*#__PURE__*/ jsx(Dialog, {
+		"data-component": "ConfirmationDialog",
+		onClose,
+		title,
+		footerButtons: [{
+			content: cancelButtonContent,
+			onClick: onCancelButtonClick,
+			autoFocus: buttonToFocus === "cancel",
+			loading: cancelButtonLoading
+		}, {
+			content: confirmButtonContent,
+			buttonType: confirmButtonType,
+			onClick: onConfirmButtonClick,
+			autoFocus: buttonToFocus === "confirm",
+			loading: confirmButtonLoading
+		}],
+		role: "alertdialog",
+		width,
+		height,
+		className,
+		children
+	});
 };
 ConfirmationDialog.displayName = "ConfirmationDialog";
-
+//#endregion
 export { ConfirmationDialog };

package/dist/ConfirmationDialog/useConfirm.d.ts

@@ -1,12 +1,15 @@
-import React from 'react';
-import { type ConfirmationDialogProps } from './ConfirmationDialog';
-export type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {
-    content: React.ReactNode;
+import { ConfirmationDialogProps } from "./ConfirmationDialog.js";
+import React from "react";
+
+//#region src/ConfirmationDialog/useConfirm.d.ts
+type ConfirmOptions = Omit<ConfirmationDialogProps, 'onClose'> & {
+  content: React.ReactNode;
 };
 /**
  * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
  * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
  * resolved with `true` or `false` depending on whether or not the confirm button was used.
  */
-export declare function useConfirm(): (options: ConfirmOptions) => Promise<boolean>;
-//# sourceMappingURL=useConfirm.d.ts.map
+declare function useConfirm(): (options: ConfirmOptions) => Promise<boolean>;
+//#endregion
+export { ConfirmOptions, useConfirm };

package/dist/ConfirmationDialog/useConfirm.js

@@ -1,40 +1,35 @@
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import BaseStyles from '../BaseStyles.js';
-import { ConfirmationDialog } from './ConfirmationDialog.js';
-
+import BaseStyles from "../BaseStyles.js";
+import { ConfirmationDialog } from "./ConfirmationDialog.js";
+import React from "react";
+import { createRoot } from "react-dom/client";
+//#region src/ConfirmationDialog/useConfirm.ts
 async function confirm(options) {
-  const {
-    content,
-    ...confirmationDialogProps
-  } = options;
-  return new Promise(resolve => {
-    const hostElement = document.createElement('div');
-    document.body.append(hostElement);
-    const root = createRoot(hostElement);
-    const onClose = gesture => {
-      root.unmount();
-      hostElement.remove();
-      resolve(gesture === 'confirm');
-    };
-    root.render(/*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(ConfirmationDialog, {
-      ...confirmationDialogProps,
-      onClose
-    }, content)));
-  });
+	const { content, ...confirmationDialogProps } = options;
+	return new Promise((resolve) => {
+		const hostElement = document.createElement("div");
+		document.body.append(hostElement);
+		const root = createRoot(hostElement);
+		const onClose = (gesture) => {
+			root.unmount();
+			hostElement.remove();
+			resolve(gesture === "confirm");
+		};
+		root.render(/*#__PURE__*/ React.createElement(BaseStyles, null, /*#__PURE__*/ React.createElement(ConfirmationDialog, {
+			...confirmationDialogProps,
+			onClose
+		}, content)));
+	});
 }
-
 /**
- * This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
- * is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
- * resolved with `true` or `false` depending on whether or not the confirm button was used.
- */
+* This hook takes no parameters and returns an `async` function, `confirm`. When `confirm`
+* is called, it shows the confirmation dialog. When the dialog is dismissed, a promise is
+* resolved with `true` or `false` depending on whether or not the confirm button was used.
+*/
 function useConfirm() {
-  const result = _temp;
-  return result;
+	return _temp;
 }
 function _temp(options) {
-  return confirm(options);
+	return confirm(options);
 }
-
+//#endregion
 export { useConfirm };

package/dist/CounterLabel/CounterLabel.d.ts

@@ -1,20 +1,19 @@
-import type { HTMLAttributes } from 'react';
-import type React from 'react';
-export type CounterLabelProps = React.PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
-    /** @deprecated use variant instead */
-    scheme?: 'primary' | 'secondary';
-    variant?: 'primary' | 'secondary';
-    className?: string;
-    'data-component'?: string;
+import React, { HTMLAttributes } from "react";
+
+//#region src/CounterLabel/CounterLabel.d.ts
+type CounterLabelProps = React.PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
+  /** @deprecated use variant instead */scheme?: 'primary' | 'secondary';
+  variant?: 'primary' | 'secondary';
+  className?: string;
+  'data-component'?: string;
 }>;
 declare const CounterLabel: React.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
-    /** @deprecated use variant instead */
-    scheme?: "primary" | "secondary";
-    variant?: "primary" | "secondary";
-    className?: string;
-    'data-component'?: string;
+  /** @deprecated use variant instead */scheme?: "primary" | "secondary";
+  variant?: "primary" | "secondary";
+  className?: string;
+  'data-component'?: string;
 } & {
-    children?: React.ReactNode | undefined;
+  children?: React.ReactNode | undefined;
 } & React.RefAttributes<HTMLSpanElement>>;
-export default CounterLabel;
-//# sourceMappingURL=CounterLabel.d.ts.map
+//#endregion
+export { CounterLabelProps, CounterLabel as default };

package/dist/CounterLabel/CounterLabel.js

@@ -1,36 +1,26 @@
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import classes from './CounterLabel.module.css.js';
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-
-const CounterLabel = /*#__PURE__*/forwardRef(({
-  variant,
-  scheme,
-  className,
-  children,
-  ['data-component']: dataComponent,
-  ...rest
-}, forwardedRef) => {
-  const label = /*#__PURE__*/jsxs(VisuallyHidden, {
-    children: ["\xA0(", children, ")"]
-  });
-  const inferredVariant = variant || scheme || 'secondary';
-  const counterProps = {
-    ref: forwardedRef,
-    ['aria-hidden']: 'true',
-    ['data-variant']: inferredVariant,
-    ...rest
-  };
-  return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsx("span", {
-      ...counterProps,
-      "data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : 'CounterLabel',
-      className: clsx(className, classes.CounterLabel),
-      children: children
-    }), label]
-  });
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+import CounterLabel_module_css_default from "./CounterLabel.module.css.js";
+import { clsx } from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+//#region src/CounterLabel/CounterLabel.tsx
+const CounterLabel = /*#__PURE__*/ forwardRef(({ variant, scheme, className, children, ["data-component"]: dataComponent, ...rest }, forwardedRef) => {
+	const label = /*#__PURE__*/ jsxs(VisuallyHidden, { children: [
+		"\xA0(",
+		children,
+		")"
+	] });
+	const inferredVariant = variant || scheme || "secondary";
+	return /*#__PURE__*/ jsxs(Fragment, { children: [/*#__PURE__*/ jsx("span", {
+		ref: forwardedRef,
+		["aria-hidden"]: "true",
+		["data-variant"]: inferredVariant,
+		...rest,
+		"data-component": dataComponent !== null && dataComponent !== void 0 ? dataComponent : "CounterLabel",
+		className: clsx(className, CounterLabel_module_css_default.CounterLabel),
+		children
+	}), label] });
 });
-CounterLabel.displayName = 'CounterLabel';
-
+CounterLabel.displayName = "CounterLabel";
+//#endregion
 export { CounterLabel as default };

package/dist/CounterLabel/CounterLabel.module.css.js

@@ -1,5 +1,5 @@
-import './CounterLabel-8c6e8ee4.css';
-
-var classes = {"CounterLabel":"prc-CounterLabel-CounterLabel-X-kRU"};
-
-export { classes as default };
+import "./CounterLabel-8c6e8ee4.css";
+//#region src/CounterLabel/CounterLabel.module.css.js
+var CounterLabel_module_css_default = { "CounterLabel": "prc-CounterLabel-CounterLabel-X-kRU" };
+//#endregion
+export { CounterLabel_module_css_default as default };

package/dist/CounterLabel/index.d.ts

@@ -1,3 +1,2 @@
-export { default } from './CounterLabel';
-export type { CounterLabelProps } from './CounterLabel';
-//# sourceMappingURL=index.d.ts.map
+import CounterLabel, { CounterLabelProps } from "./CounterLabel.js";
+export { type CounterLabelProps, CounterLabel as default };

package/dist/DataTable/DataTable.d.ts

@@ -1,63 +1,76 @@
-import type React from 'react';
-import type { Column } from './column';
-import type { SortDirection } from './sorting';
-import type { UniqueRow } from './row';
-import type { ObjectPaths } from './utils';
-export type DataTableProps<Data extends UniqueRow> = {
-    /**
-     * Provide an id to an element which uniquely describes this table
-     */
-    'aria-describedby'?: string;
-    /**
-     * Provide an id to an element which uniquely labels this table
-     */
-    'aria-labelledby'?: string;
-    /**
-     * Specify the amount of space that should be available around the contents of
-     * a cell
-     */
-    cellPadding?: 'condensed' | 'normal' | 'spacious';
-    /**
-     * Provide a collection of the rows which will be rendered inside of the table
-     */
-    data: Array<Data>;
-    /**
-     * Provide the columns for the table and the fields in `data` to which they
-     * correspond
-     */
-    columns: Array<Column<Data>>;
-    /**
-     * Provide the id or field of the column by which the table is sorted. When
-     * using this `prop`, the input data must be sorted by this column in
-     * ascending order
-     */
-    initialSortColumn?: ObjectPaths<Data> | string | number;
-    /**
-     * Provide the sort direction that the table should be sorted by on the
-     * currently sorted column
-     */
-    initialSortDirection?: Exclude<SortDirection, 'NONE'>;
-    /**
-     * When true, disables client-side sorting for all sortable columns in the
-     * table. Use this when sorting is handled server-side. The `onToggleSort`
-     * callback will still be fired when a sortable column header is clicked.
-     */
-    externalSorting?: boolean;
-    /**
-     * Provide a function to determine the unique identifier for each row.
-     * This function allows you to customize the key used for the row.
-     * By default, the table uses the `id` field from the data.
-     * @param rowData The row data object for which the ID is being retrieved.
-     * @returns The unique identifier for the row, which can be a string or number.
-     */
-    getRowId?: (rowData: Data) => string | number;
-    /**
-     * Fires every time the user clicks a sortable column header. It reports
-     * the column id that is now sorted and the direction after the toggle
-     * (never `"NONE"`).
-     */
-    onToggleSort?: (columnId: ObjectPaths<Data> | string | number, direction: Exclude<SortDirection, 'NONE'>) => void;
+import { ObjectPaths } from "./utils.js";
+import { UniqueRow } from "./row.js";
+import { SortDirection } from "./sorting.js";
+import { Column } from "./column.js";
+import React from "react";
+
+//#region src/DataTable/DataTable.d.ts
+type DataTableProps<Data extends UniqueRow> = {
+  /**
+   * Provide an id to an element which uniquely describes this table
+   */
+  'aria-describedby'?: string;
+  /**
+   * Provide an id to an element which uniquely labels this table
+   */
+  'aria-labelledby'?: string;
+  /**
+   * Specify the amount of space that should be available around the contents of
+   * a cell
+   */
+  cellPadding?: 'condensed' | 'normal' | 'spacious';
+  /**
+   * Provide a collection of the rows which will be rendered inside of the table
+   */
+  data: Array<Data>;
+  /**
+   * Provide the columns for the table and the fields in `data` to which they
+   * correspond
+   */
+  columns: Array<Column<Data>>;
+  /**
+   * Provide the id or field of the column by which the table is sorted. When
+   * using this `prop`, the input data must be sorted by this column in
+   * ascending order
+   */
+  initialSortColumn?: ObjectPaths<Data> | string | number;
+  /**
+   * Provide the sort direction that the table should be sorted by on the
+   * currently sorted column
+   */
+  initialSortDirection?: Exclude<SortDirection, 'NONE'>;
+  /**
+   * When true, disables client-side sorting for all sortable columns in the
+   * table. Use this when sorting is handled server-side. The `onToggleSort`
+   * callback will still be fired when a sortable column header is clicked.
+   */
+  externalSorting?: boolean;
+  /**
+   * Provide a function to determine the unique identifier for each row.
+   * This function allows you to customize the key used for the row.
+   * By default, the table uses the `id` field from the data.
+   * @param rowData The row data object for which the ID is being retrieved.
+   * @returns The unique identifier for the row, which can be a string or number.
+   */
+  getRowId?: (rowData: Data) => string | number;
+  /**
+   * Fires every time the user clicks a sortable column header. It reports
+   * the column id that is now sorted and the direction after the toggle
+   * (never `"NONE"`).
+   */
+  onToggleSort?: (columnId: ObjectPaths<Data> | string | number, direction: Exclude<SortDirection, 'NONE'>) => void;
 };
-declare function DataTable<Data extends UniqueRow>({ 'aria-labelledby': labelledby, 'aria-describedby': describedby, cellPadding, columns, data, initialSortColumn, initialSortDirection, externalSorting, getRowId, onToggleSort, }: DataTableProps<Data>): React.JSX.Element;
-export { DataTable };
-//# sourceMappingURL=DataTable.d.ts.map
+declare function DataTable<Data extends UniqueRow>({
+  'aria-labelledby': labelledby,
+  'aria-describedby': describedby,
+  cellPadding,
+  columns,
+  data,
+  initialSortColumn,
+  initialSortDirection,
+  externalSorting,
+  getRowId,
+  onToggleSort
+}: DataTableProps<Data>): React.JSX.Element;
+//#endregion
+export { DataTable, DataTableProps };