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

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

@@ -1,74 +0,0 @@
-import type React from 'react';
-import type { DialogWidth, DialogHeight } from '../Dialog/Dialog';
-/**
- * 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;
-    /**
-     * 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
- * 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.
- */
-export declare const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDialogProps>>;
-export 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=ConfirmationDialog.d.ts.map

package/lib-esm/ConfirmationDialog/ConfirmationDialog.js

@@ -1,170 +0,0 @@
-import { useCallback } from 'react';
-import { createRoot } from 'react-dom/client';
-import { useTheme, ThemeProvider } from '../ThemeProvider.js';
-import { FocusKeys } from '@primer/behaviors';
-import { Dialog } from '../Dialog/Dialog.js';
-import { useFocusZone } from '../hooks/useFocusZone.js';
-import BaseStyles from '../BaseStyles.js';
-import classes from './ConfirmationDialog.module.css.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-const ConfirmationHeader = ({
-  title,
-  onClose,
-  dialogLabelId
-}) => {
-  const onCloseClick = useCallback(() => {
-    onClose('close-button');
-  }, [onClose]);
-  return /*#__PURE__*/jsxs("div", {
-    className: classes.ConfirmationHeader,
-    children: [/*#__PURE__*/jsx("h1", {
-      id: dialogLabelId,
-      children: title
-    }), /*#__PURE__*/jsx(Dialog.CloseButton, {
-      onClose: onCloseClick
-    })]
-  });
-};
-ConfirmationHeader.displayName = "ConfirmationHeader";
-const ConfirmationBody = ({
-  children
-}) => {
-  return /*#__PURE__*/jsx("div", {
-    className: classes.ConfirmationBody,
-    children: children
-  });
-};
-ConfirmationBody.displayName = "ConfirmationBody";
-const ConfirmationFooter = ({
-  footerButtons
-}) => {
-  const {
-    containerRef: footerRef
-  } = useFocusZone({
-    bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
-    focusInStrategy: 'closest'
-  });
-
-  // Must have exactly 2 buttons!
-  return /*#__PURE__*/jsx("div", {
-    ref: footerRef,
-    className: classes.ConfirmationFooter,
-    children: /*#__PURE__*/jsx(Dialog.Buttons, {
-      buttons: footerButtons !== null && footerButtons !== void 0 ? footerButtons : []
-    })
-  });
-};
-ConfirmationFooter.displayName = "ConfirmationFooter";
-/**
- * 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
-  } = props;
-  const onCancelButtonClick = useCallback(() => {
-    onClose('cancel');
-  }, [onClose]);
-  const onConfirmButtonClick = useCallback(() => {
-    onClose('confirm');
-  }, [onClose]);
-  const isConfirmationDangerous = confirmButtonType === 'danger';
-  const cancelButton = {
-    content: cancelButtonContent,
-    onClick: onCancelButtonClick,
-    autoFocus: isConfirmationDangerous,
-    loading: cancelButtonLoading
-  };
-  const confirmButton = {
-    content: confirmButtonContent,
-    buttonType: confirmButtonType,
-    onClick: onConfirmButtonClick,
-    autoFocus: !isConfirmationDangerous,
-    loading: confirmButtonLoading
-  };
-  const footerButtons = [cancelButton, confirmButton];
-  return /*#__PURE__*/jsx(Dialog, {
-    onClose: onClose,
-    title: title,
-    footerButtons: footerButtons,
-    role: "alertdialog",
-    width: width,
-    height: height,
-    className: className,
-    renderHeader: ConfirmationHeader,
-    renderBody: ConfirmationBody,
-    renderFooter: ConfirmationFooter,
-    children: children
-  });
-};
-ConfirmationDialog.displayName = "ConfirmationDialog";
-let hostElement = null;
-async function confirm(themeProps, options) {
-  const {
-    content,
-    ...confirmationDialogProps
-  } = options;
-  return new Promise(resolve => {
-    hostElement ||= document.createElement('div');
-    if (!hostElement.isConnected) document.body.append(hostElement);
-    const root = createRoot(hostElement);
-    const onClose = gesture => {
-      root.unmount();
-      if (gesture === 'confirm') {
-        resolve(true);
-      } else {
-        resolve(false);
-      }
-    };
-    root.render(/*#__PURE__*/jsx(ThemeProvider, {
-      ...themeProps,
-      children: /*#__PURE__*/jsx(BaseStyles, {
-        children: /*#__PURE__*/jsx(ConfirmationDialog, {
-          ...confirmationDialogProps,
-          onClose: onClose,
-          children: 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.
- */
-function useConfirm() {
-  const {
-    theme,
-    colorMode,
-    dayScheme,
-    nightScheme
-  } = useTheme();
-  const result = useCallback(options => {
-    const themeProps = {
-      theme,
-      colorMode,
-      dayScheme,
-      nightScheme
-    };
-    return confirm(themeProps, options);
-  }, [theme, colorMode, dayScheme, nightScheme]);
-  return result;
-}
-
-export { ConfirmationDialog, useConfirm };

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

@@ -1,5 +0,0 @@
-import './ConfirmationDialog-de0401ff.css';
-
-var classes = {"ConfirmationHeader":"prc-ConfirmationDialog-ConfirmationHeader-yiLEc","ConfirmationBody":"prc-ConfirmationDialog-ConfirmationBody-ht9P-","ConfirmationFooter":"prc-ConfirmationDialog-ConfirmationFooter-AqKBI"};
-
-export { classes as default };

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

@@ -1,15 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import type React from 'react';
-import type { SxProp } from '../sx';
-export type CounterLabelProps = React.PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
-    scheme?: 'primary' | 'secondary';
-    className?: string;
-} & SxProp>;
-declare const CounterLabel: React.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & {
-    scheme?: "primary" | "secondary";
-    className?: string;
-} & SxProp & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<HTMLSpanElement>>;
-export default CounterLabel;
-//# sourceMappingURL=CounterLabel.d.ts.map

package/lib-esm/CounterLabel/CounterLabel.js

@@ -1,99 +0,0 @@
-import { c } from 'react-compiler-runtime';
-import { clsx } from 'clsx';
-import { forwardRef } from 'react';
-import classes from './CounterLabel.module.css.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
-
-const CounterLabel = /*#__PURE__*/forwardRef((t0, forwardedRef) => {
-  const $ = c(20);
-  let children;
-  let className;
-  let rest;
-  let t1;
-  if ($[0] !== t0) {
-    ({
-      scheme: t1,
-      className,
-      children,
-      ...rest
-    } = t0);
-    $[0] = t0;
-    $[1] = children;
-    $[2] = className;
-    $[3] = rest;
-    $[4] = t1;
-  } else {
-    children = $[1];
-    className = $[2];
-    rest = $[3];
-    t1 = $[4];
-  }
-  const scheme = t1 === undefined ? "secondary" : t1;
-  let t2;
-  if ($[5] !== children) {
-    t2 = /*#__PURE__*/jsxs(VisuallyHidden, {
-      children: ["\xA0(", children, ")"]
-    });
-    $[5] = children;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  const label = t2;
-  let t3;
-  if ($[7] !== forwardedRef || $[8] !== rest || $[9] !== scheme) {
-    t3 = {
-      ref: forwardedRef,
-      "aria-hidden": "true",
-      "data-scheme": scheme,
-      ...rest
-    };
-    $[7] = forwardedRef;
-    $[8] = rest;
-    $[9] = scheme;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
-  }
-  const counterProps = t3;
-  let t4;
-  if ($[11] !== className) {
-    t4 = clsx(className, classes.CounterLabel);
-    $[11] = className;
-    $[12] = t4;
-  } else {
-    t4 = $[12];
-  }
-  let t5;
-  if ($[13] !== children || $[14] !== counterProps || $[15] !== t4) {
-    t5 = /*#__PURE__*/jsx(BoxWithFallback, {
-      as: "span",
-      ...counterProps,
-      className: t4,
-      children: children
-    });
-    $[13] = children;
-    $[14] = counterProps;
-    $[15] = t4;
-    $[16] = t5;
-  } else {
-    t5 = $[16];
-  }
-  let t6;
-  if ($[17] !== label || $[18] !== t5) {
-    t6 = /*#__PURE__*/jsxs(Fragment, {
-      children: [t5, label]
-    });
-    $[17] = label;
-    $[18] = t5;
-    $[19] = t6;
-  } else {
-    t6 = $[19];
-  }
-  return t6;
-});
-CounterLabel.displayName = 'CounterLabel';
-
-export { CounterLabel as default };

package/lib-esm/DataTable/Table-87f4043f.css

@@ -1,2 +0,0 @@
-.prc-DataTable-TableContainer-Gm3sY{column-gap:var(--base-size-8,.5rem);display:grid;grid-template-areas:"title actions" "divider divider" "subtitle subtitle" "filter filter" "table table" "footer footer";grid-template-columns:1fr 1fr}.prc-DataTable-TableTitle-Q7qQd{align-self:center;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);grid-area:title;line-height:20px}.prc-DataTable-TableSubtitle-DEyv-,.prc-DataTable-TableTitle-Q7qQd{color:var(--fgColor-default,var(--color-fg-default));margin:0}.prc-DataTable-TableSubtitle-DEyv-{font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-normal,400);grid-area:subtitle;line-height:var(--text-title-lineHeight-small,1.5)}.prc-DataTable-TableActions-IEEii{align-items:center;column-gap:var(--base-size-8,.5rem);display:flex;grid-area:actions;justify-self:end}.prc-DataTable-TableDivider-OsO1X{background-color:var(--borderColor-default,var(--color-border-default));grid-area:divider;height:1px;margin-block-end:var(--base-size-8,.5rem);margin-block-start:var(--base-size-16,1rem);width:100%}.prc-DataTable-TableActions-IEEii+.prc-DataTable-TableOverflowWrapper-PFgsy,.prc-DataTable-TableSubtitle-DEyv-+.prc-DataTable-TableOverflowWrapper-PFgsy,.prc-DataTable-TableTitle-Q7qQd+.prc-DataTable-TableOverflowWrapper-PFgsy{margin-block-start:var(--base-size-8,.5rem)}.prc-DataTable-Table-qYfrL,.prc-DataTable-TableOverflowWrapper-PFgsy{grid-area:table}.prc-DataTable-Table-qYfrL{--table-border-radius:0.375rem;--table-cell-padding:var(--cell-padding-block,0.5rem) var(--cell-padding-inline,0.75rem);--table-font-size:0.75rem;background-color:var(--bgColor-default,var(--color-canvas-default));border-collapse:separate;border-spacing:0;display:grid;font-size:var(--table-font-size);grid-template-columns:var(--grid-template-columns);line-height:1.66667;width:100%}.prc-DataTable-Table-qYfrL:where([data-cell-padding=condensed]){--cell-padding-block:0.25rem;--cell-padding-inline:0.5rem}.prc-DataTable-Table-qYfrL:where([data-cell-padding=normal]){--cell-padding-block:0.5rem;--cell-padding-inline:0.75rem}.prc-DataTable-Table-qYfrL:where([data-cell-padding=spacious]){--cell-padding-block:0.75rem;--cell-padding-inline:1rem}.prc-DataTable-TableCell-dVc-6:first-child,.prc-DataTable-TableHeader-CRPoj:first-child{border-inline-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default))}.prc-DataTable-TableCell-dVc-6:last-child,.prc-DataTable-TableHeader-CRPoj:last-child{border-inline-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default))}.prc-DataTable-TableCell-dVc-6,.prc-DataTable-TableHeader-CRPoj{align-items:center;border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));display:flex;padding:var(--table-cell-padding);text-align:start}.prc-DataTable-TableCell-dVc-6:where([data-cell-align=end]),.prc-DataTable-TableHeader-CRPoj:where([data-cell-align=end]){display:flex;justify-content:flex-end;text-align:end}.prc-DataTable-TableHeader-CRPoj[data-cell-align=end] .prc-DataTable-TableSortButton-LnQla{display:flex;flex-direction:row-reverse}.prc-DataTable-TableHead-eOrJU .prc-DataTable-TableRow-1vLX7:first-of-type .prc-DataTable-TableHeader-CRPoj{border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default))}.prc-DataTable-TableHead-eOrJU .prc-DataTable-TableRow-1vLX7:first-of-type .prc-DataTable-TableHeader-CRPoj:first-child{border-top-left-radius:var(--table-border-radius)}.prc-DataTable-TableHead-eOrJU .prc-DataTable-TableRow-1vLX7:first-of-type .prc-DataTable-TableHeader-CRPoj:last-child{border-top-right-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-PFgsy:last-child .prc-DataTable-Table-qYfrL .prc-DataTable-TableBody-p56SS .prc-DataTable-TableRow-1vLX7:last-of-type .prc-DataTable-TableCell-dVc-6:first-child{border-bottom-left-radius:var(--table-border-radius)}.prc-DataTable-TableOverflowWrapper-PFgsy:last-child .prc-DataTable-Table-qYfrL .prc-DataTable-TableBody-p56SS .prc-DataTable-TableRow-1vLX7:last-of-type .prc-DataTable-TableCell-dVc-6:last-child{border-bottom-right-radius:var(--table-border-radius)}.prc-DataTable-TableRow-1vLX7>:first-child .prc-DataTable-TableCellSkeletonItem-jFqti,.prc-DataTable-TableRow-1vLX7>:first-child:not(.prc-DataTable-TableCellSkeleton-ge8WK){padding-inline-start:var(--base-size-16,1rem)}.prc-DataTable-TableRow-1vLX7>:last-child .prc-DataTable-TableCellSkeletonItem-jFqti,.prc-DataTable-TableRow-1vLX7>:last-child:not(.prc-DataTable-TableCellSkeleton-ge8WK){padding-inline-end:var(--base-size-16,1rem)}.prc-DataTable-TableHeader-CRPoj{background-color:var(--bgColor-muted,var(--color-canvas-subtle));border-block-start:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-muted,var(--color-fg-muted));font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableHeader-CRPoj:where([aria-sort=ascending]),.prc-DataTable-TableHeader-CRPoj:where([aria-sort=descending]){color:var(--fgColor-default,var(--color-fg-default))}.prc-DataTable-TableSortIcon-2h30n{visibility:hidden}.prc-DataTable-TableHeader-CRPoj .prc-DataTable-TableSortButton-LnQla:focus .prc-DataTable-TableSortIcon--ascending-H9-sb,.prc-DataTable-TableHeader-CRPoj:hover .prc-DataTable-TableSortIcon--ascending-H9-sb,.prc-DataTable-TableHeader-CRPoj[aria-sort=ascending] .prc-DataTable-TableSortIcon--ascending-H9-sb,.prc-DataTable-TableHeader-CRPoj[aria-sort=descending] .prc-DataTable-TableSortIcon--descending-7-zjV{visibility:visible}.prc-DataTable-TableRow-1vLX7:hover .prc-DataTable-TableCell-dVc-6:not(.prc-DataTable-TableCellSkeleton-ge8WK){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.prc-DataTable-TableCell-dVc-6:where([scope=row]){align-items:center;color:var(--fgColor-default,var(--color-fg-default));display:flex;font-weight:var(--base-text-weight-semibold,600)}.prc-DataTable-TableCellSkeleton-ge8WK{padding:0}.prc-DataTable-TableCellSkeletonItems-XEGdI{display:flex;flex-direction:column;width:100%}.prc-DataTable-TableCellSkeletonItem-jFqti{padding:var(--table-cell-padding)}.prc-DataTable-TableCellSkeletonItem-jFqti:nth-of-type(5n+1){--skeleton-item-width:85%}.prc-DataTable-TableCellSkeletonItem-jFqti:nth-of-type(5n+2){--skeleton-item-width:67.5%}.prc-DataTable-TableCellSkeletonItem-jFqti:nth-of-type(5n+3){--skeleton-item-width:80%}.prc-DataTable-TableCellSkeletonItem-jFqti:nth-of-type(5n+4){--skeleton-item-width:60%}.prc-DataTable-TableCellSkeletonItem-jFqti:nth-of-type(5n+5){--skeleton-item-width:75%}.prc-DataTable-TableCellSkeletonItem-jFqti [data-component=SkeletonText]{width:var(--skeleton-item-width)}.prc-DataTable-TableCellSkeletonItem-jFqti:not(:last-of-type){border-block-end:var(--borderWidth-thin,.0625rem) solid var(--borderColor-default,var(--color-border-default))}.prc-DataTable-TableSortButton-LnQla{column-gap:.5rem}.prc-DataTable-TableBody-p56SS,.prc-DataTable-TableHead-eOrJU,.prc-DataTable-TableRow-1vLX7{display:contents}@supports (grid-template-columns:subgrid){.prc-DataTable-TableBody-p56SS,.prc-DataTable-TableHead-eOrJU,.prc-DataTable-TableRow-1vLX7{display:grid;grid-column:-1/1;grid-template-columns:subgrid}}
-/*# sourceMappingURL=Table-87f4043f.css.map */

package/lib-esm/DataTable/Table-87f4043f.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/DataTable/Table.module.css"],"names":[],"mappings":"AACA,oCAUE,mCAA8B,CAT9B,YAAa,CAEb,uHAMiB,CAPjB,6BASF,CAGA,gCAQE,iBAAkB,CANlB,8CAAuC,CACvC,gDAA6C,CAI7C,eAAgB,CAFhB,gBAIF,CAGA,mEANE,oDAA6B,CAL7B,QAkBF,CAPA,mCAEE,4CAAsC,CACtC,8CAA2C,CAG3C,kBAAmB,CAFnB,kDAGF,CAGA,kCAGE,kBAAmB,CADnB,mCAA8B,CAD9B,YAAa,CAGb,iBAAkB,CAClB,gBACF,CAGA,kCAIE,uEAA4C,CAC5C,iBAAkB,CAHlB,UAAW,CAKX,yCAAoC,CADpC,2CAAuC,CALvC,UAOF,CAGA,mOAGE,2CACF,CAOA,qEAJE,eAsCF,CAlCA,2BAEE,8BAA+B,CAC/B,wFAA2F,CAC3F,yBAA0B,CAW1B,mEAAwC,CADxC,wBAAyB,CAFzB,gBAAiB,CANjB,YAAa,CAGb,gCAAiC,CAQjC,kDAAmD,CANnD,mBAA0B,CAJ1B,UA2BF,CAdE,gEACE,4BAA6B,CAC7B,4BACF,CAEA,6DACE,2BAA4B,CAC5B,6BACF,CAEA,+DACE,4BAA6B,CAC7B,0BACF,CAIF,wFAEE,iHACF,CAEA,sFAEE,+GACF,CAEA,gEAME,kBAAmB,CACnB,8GAA0E,CAL1E,YAAa,CAEb,iCAAkC,CAClC,gBAGF,CAEA,0HAEE,YAAa,CAEb,wBAAyB,CADzB,cAEF,CAEA,2FACE,YAAa,CACb,0BACF,CAEA,4GACE,gHACF,CAIA,wHAEE,iDACF,CAGA,uHAEE,kDACF,CAGA,qMAEE,oDACF,CAGA,oMAEE,qDACF,CAMA,6KAEE,6CACF,CAEA,2KAEE,2CACF,CAGA,iCAGE,gEAAsC,CACtC,gHAA4E,CAF5E,gDAA2B,CAD3B,gDAIF,CAEA,6HAEE,oDACF,CAGA,mCACE,iBACF,CASA,yZAEE,kBACF,CAGA,+GACE,wGACF,CAGA,kDAIE,kBAAmB,CADnB,oDAA6B,CAF7B,YAAa,CACb,gDAGF,CAGA,uCACE,SACF,CAEA,4CACE,YAAa,CAEb,qBAAsB,CADtB,UAEF,CAEA,2CAEE,iCAqBF,CAnBE,6DACE,yBACF,CAEA,6DACE,2BACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAEA,6DACE,yBACF,CAGF,yEACE,gCACF,CAEA,8DACE,8GACF,CAEA,qCACE,gBACF,CAGA,4FAGE,gBACF,CAEA,0CACE,4FAGE,YAAa,CAEb,gBAAkB,CADlB,6BAEF,CACF","file":"Table-87f4043f.css","sourcesContent":["/* Container ---------------------------------------------------------------- */\n.TableContainer {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-template-areas:\n    'title actions'\n    'divider divider'\n    'subtitle subtitle'\n    'filter filter'\n    'table table'\n    'footer footer';\n  column-gap: var(--base-size-8);\n}\n\n/* TableTitle */\n.TableTitle {\n  margin: 0;\n  font-size: var(--text-body-size-medium);\n  font-weight: var(--base-text-weight-semibold);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: 20px;\n  color: var(--fgColor-default);\n  grid-area: title;\n  align-self: center;\n}\n\n/* TableSubtitle */\n.TableSubtitle {\n  margin: 0;\n  font-size: var(--text-body-size-small);\n  font-weight: var(--base-text-weight-normal);\n  line-height: var(--text-title-lineHeight-small);\n  color: var(--fgColor-default);\n  grid-area: subtitle;\n}\n\n/* TableActions */\n.TableActions {\n  display: flex;\n  column-gap: var(--base-size-8);\n  align-items: center;\n  grid-area: actions;\n  justify-self: end;\n}\n\n/* TableDivider */\n.TableDivider {\n  width: 100%;\n  height: 1px;\n  /* stylelint-disable-next-line primer/colors */\n  background-color: var(--borderColor-default);\n  grid-area: divider;\n  margin-block-start: var(--base-size-16);\n  margin-block-end: var(--base-size-8);\n}\n\n/* Spacing before the table */\n.TableTitle + .TableOverflowWrapper,\n.TableSubtitle + .TableOverflowWrapper,\n.TableActions + .TableOverflowWrapper {\n  margin-block-start: var(--base-size-8);\n}\n\n.TableOverflowWrapper {\n  grid-area: table;\n}\n\n/* Table -------------------------------------------------------------------- */\n.Table {\n  /* Default table styles */\n  --table-border-radius: 0.375rem;\n  --table-cell-padding: var(--cell-padding-block, 0.5rem) var(--cell-padding-inline, 0.75rem);\n  --table-font-size: 0.75rem;\n\n  display: grid;\n  width: 100%;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--table-font-size);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: calc(20 / 12);\n  border-spacing: 0;\n  /* stylelint-disable-next-line primer/borders */\n  border-collapse: separate;\n  background-color: var(--bgColor-default);\n  grid-area: table;\n  grid-template-columns: var(--grid-template-columns);\n\n  /* Density modes: condensed, normal, spacious */\n  &:where([data-cell-padding='condensed']) {\n    --cell-padding-block: 0.25rem;\n    --cell-padding-inline: 0.5rem;\n  }\n\n  &:where([data-cell-padding='normal']) {\n    --cell-padding-block: 0.5rem;\n    --cell-padding-inline: 0.75rem;\n  }\n\n  &:where([data-cell-padding='spacious']) {\n    --cell-padding-block: 0.75rem;\n    --cell-padding-inline: 1rem;\n  }\n}\n\n/* Borders */\n.TableCell:first-child,\n.TableHeader:first-child {\n  border-inline-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableCell:last-child,\n.TableHeader:last-child {\n  border-inline-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader,\n.TableCell {\n  display: flex;\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n  text-align: start;\n  align-items: center;\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([data-cell-align='end']),\n.TableCell:where([data-cell-align='end']) {\n  display: flex;\n  text-align: end;\n  justify-content: flex-end;\n}\n\n.TableHeader[data-cell-align='end'] .TableSortButton {\n  display: flex;\n  flex-direction: row-reverse;\n}\n\n.TableHead .TableRow:first-of-type .TableHeader {\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n/* Border radius */\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-specificity */\n.TableHead .TableRow:first-of-type .TableHeader:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-top-right-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:first-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-left-radius: var(--table-border-radius);\n}\n\n/* stylelint-disable-next-line selector-max-compound-selectors,selector-max-specificity */\n.TableOverflowWrapper:last-child .Table .TableBody .TableRow:last-of-type .TableCell:last-child {\n  /* stylelint-disable-next-line primer/borders */\n  border-bottom-right-radius: var(--table-border-radius);\n}\n\n/**\n * Offset padding to make sure type aligns regardless of cell padding\n * selection\n */\n.TableRow > *:first-child:not(.TableCellSkeleton),\n.TableRow > *:first-child .TableCellSkeletonItem {\n  padding-inline-start: var(--base-size-16);\n}\n\n.TableRow > *:last-child:not(.TableCellSkeleton),\n.TableRow > *:last-child .TableCellSkeletonItem {\n  padding-inline-end: var(--base-size-16);\n}\n\n/* TableHeader */\n.TableHeader {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-muted);\n  background-color: var(--bgColor-muted);\n  border-block-start: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableHeader:where([aria-sort='descending']),\n.TableHeader:where([aria-sort='ascending']) {\n  color: var(--fgColor-default);\n}\n\n/* Control visibility of sort icons */\n.TableSortIcon {\n  visibility: hidden;\n}\n\n/* The ASC icon is visible if the header is sortable and is hovered or focused */\n.TableHeader:hover .TableSortIcon--ascending,\n.TableHeader .TableSortButton:focus .TableSortIcon--ascending {\n  visibility: visible;\n}\n\n/* Each sort icon is visible if the TableHeader is currently in the corresponding sort state */\n.TableHeader[aria-sort='ascending'] .TableSortIcon--ascending,\n.TableHeader[aria-sort='descending'] .TableSortIcon--descending {\n  visibility: visible;\n}\n\n/* TableRow */\n.TableRow:hover .TableCell:not(.TableCellSkeleton) {\n  background-color: var(--control-transparent-bgColor-hover);\n}\n\n/* TableCell */\n.TableCell:where([scope='row']) {\n  display: flex;\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-default);\n  align-items: center;\n}\n\n/* TableCellSkeleton */\n.TableCellSkeleton {\n  padding: 0;\n}\n\n.TableCellSkeletonItems {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n}\n\n.TableCellSkeletonItem {\n  /* stylelint-disable-next-line primer/spacing */\n  padding: var(--table-cell-padding);\n\n  &:nth-of-type(5n + 1) {\n    --skeleton-item-width: 85%;\n  }\n\n  &:nth-of-type(5n + 2) {\n    --skeleton-item-width: 67.5%;\n  }\n\n  &:nth-of-type(5n + 3) {\n    --skeleton-item-width: 80%;\n  }\n\n  &:nth-of-type(5n + 4) {\n    --skeleton-item-width: 60%;\n  }\n\n  &:nth-of-type(5n + 5) {\n    --skeleton-item-width: 75%;\n  }\n}\n\n.TableCellSkeletonItem [data-component='SkeletonText'] {\n  width: var(--skeleton-item-width);\n}\n\n.TableCellSkeletonItem:not(:last-of-type) {\n  border-block-end: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.TableSortButton {\n  column-gap: 0.5rem;\n}\n\n/* Grid layout */\n.TableHead,\n.TableBody,\n.TableRow {\n  display: contents;\n}\n\n@supports (grid-template-columns: subgrid) {\n  .TableHead,\n  .TableBody,\n  .TableRow {\n    display: grid;\n    grid-template-columns: subgrid;\n    grid-column: -1 /1;\n  }\n}\n"]}

package/lib-esm/DataTable/Table.d.ts

@@ -1,135 +0,0 @@
-import React from 'react';
-import type { SxProp } from '../sx';
-import type { Column, CellAlignment } from './column';
-import type { UniqueRow } from './row';
-import { SortDirection } from './sorting';
-export type TableProps = React.ComponentPropsWithoutRef<'table'> & {
-    /**
-     * 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;
-    /**
-     * Column width definitions
-     */
-    gridTemplateColumns?: React.CSSProperties['gridTemplateColumns'];
-    /**
-     * Specify the amount of space that should be available around the contents of
-     * a cell
-     */
-    cellPadding?: 'condensed' | 'normal' | 'spacious';
-};
-declare const Table: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
-    /**
-     * 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;
-    /**
-     * Column width definitions
-     */
-    gridTemplateColumns?: React.CSSProperties["gridTemplateColumns"];
-    /**
-     * Specify the amount of space that should be available around the contents of
-     * a cell
-     */
-    cellPadding?: "condensed" | "normal" | "spacious";
-} & React.RefAttributes<HTMLTableElement>>;
-export type TableHeadProps = React.ComponentPropsWithoutRef<'thead'>;
-declare function TableHead({ children }: TableHeadProps): React.JSX.Element;
-export type TableBodyProps = React.ComponentPropsWithoutRef<'tbody'>;
-declare function TableBody({ children }: TableBodyProps): React.JSX.Element;
-export type TableHeaderProps = Omit<React.ComponentPropsWithoutRef<'th'>, 'align'> & {
-    /**
-     * The horizontal alignment of the cell's content
-     */
-    align?: CellAlignment;
-};
-declare function TableHeader({ align, children, ...rest }: TableHeaderProps): React.JSX.Element;
-type TableSortHeaderProps = TableHeaderProps & {
-    /**
-     * Specify the sort direction for the TableHeader
-     */
-    direction: SortDirection;
-    /**
-     * Provide a handler that is called when the sortable TableHeader is
-     * interacted with via a click or keyboard interaction
-     */
-    onToggleSort: () => void;
-};
-declare function TableSortHeader({ align, children, direction, onToggleSort, ...rest }: TableSortHeaderProps): React.JSX.Element;
-export type TableRowProps = React.ComponentPropsWithoutRef<'tr'>;
-declare function TableRow({ children, ...rest }: TableRowProps): React.JSX.Element;
-export type TableCellProps = Omit<React.ComponentPropsWithoutRef<'td'>, 'align'> & {
-    /**
-     * The horizontal alignment of the cell's content
-     */
-    align?: CellAlignment;
-    /**
-     * Provide the scope for a table cell, useful for defining a row header using
-     * `scope="row"`
-     */
-    scope?: 'row';
-};
-declare function TableCell({ align, className, children, scope, ...rest }: TableCellProps): React.JSX.Element;
-type TableCellPlaceholderProps = React.PropsWithChildren;
-declare function TableCellPlaceholder({ children }: TableCellPlaceholderProps): React.JSX.Element;
-export type TableContainerProps = React.PropsWithChildren<SxProp & React.HTMLAttributes<HTMLDivElement>>;
-declare function TableContainer({ children, className, ...rest }: TableContainerProps): React.JSX.Element;
-export type TableTitleProps = React.PropsWithChildren<{
-    /**
-     * Provide an alternate element or component to use as the container for
-     * `TableSubtitle`. This is useful when specifying markup that is more
-     * semantic for your use-case, such as a heading tag.
-     */
-    as?: keyof JSX.IntrinsicElements | React.ComponentType;
-    /**
-     * Provide a unique id for the table subtitle. This should be used along with
-     * `aria-labelledby` on `DataTable`
-     */
-    id: string;
-} & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-declare const TableTitle: React.ForwardRefExoticComponent<Omit<TableTitleProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export type TableSubtitleProps = React.PropsWithChildren<{
-    /**
-     * Provide an alternate element or component to use as the container for
-     * `TableSubtitle`. This is useful when specifying markup that is more
-     * semantic for your use-case
-     */
-    as?: keyof JSX.IntrinsicElements | React.ComponentType;
-    /**
-     * Provide a unique id for the table subtitle. This should be used along with
-     * `aria-describedby` on `DataTable`
-     */
-    id: string;
-} & React.HTMLAttributes<HTMLElement>>;
-declare function TableSubtitle({ as: BaseComponent, children, id }: TableSubtitleProps): React.JSX.Element;
-declare function TableDivider(): React.JSX.Element;
-export type TableActionsProps = React.PropsWithChildren;
-declare function TableActions({ children }: TableActionsProps): React.JSX.Element;
-export type TableSkeletonProps<Data extends UniqueRow> = React.ComponentPropsWithoutRef<'table'> & {
-    /**
-     * Specify the amount of space that should be available around the contents of
-     * a cell
-     */
-    cellPadding?: 'condensed' | 'normal' | 'spacious';
-    /**
-     * Provide an array of columns for the table. Columns will render as the headers
-     * of the table.
-     */
-    columns: Array<Column<Data>>;
-    /**
-     * Optionally specify the number of rows which should be included in the
-     * skeleton state of the component
-     */
-    rows?: number;
-};
-declare function TableSkeleton<Data extends UniqueRow>({ cellPadding, columns, rows, ...rest }: TableSkeletonProps<Data>): React.JSX.Element;
-export { TableContainer, TableTitle, TableSubtitle, TableActions, TableDivider, Table, TableHead, TableBody, TableRow, TableHeader, TableSortHeader, TableCell, TableCellPlaceholder, TableSkeleton, };
-//# sourceMappingURL=Table.d.ts.map