@prismicio/editor-ui 0.4.14 → 0.4.15

package/dist/components/Checkbox/Checkbox.d.ts

@@ -2,5 +2,6 @@ export interface CheckboxProps {
     checked?: boolean;
     disabled?: boolean;
     onCheckedChange?: (checked: boolean) => void;
+    tabIndex?: number;
 }
 export declare function Checkbox(props: CheckboxProps): JSX.Element;

package/dist/components/Checkbox/Checkbox.stories.d.ts

@@ -4,8 +4,10 @@ export declare const Default: import("@storybook/types").StoryAnnotations<import
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
     onCheckedChange?: ((checked: boolean) => void) | undefined;
+    tabIndex?: number | undefined;
 }, {
     disabled?: boolean | undefined;
+    tabIndex?: number | undefined;
     checked?: boolean | undefined;
     onCheckedChange?: ((checked: boolean) => void) | undefined;
 }>;

package/dist/components/DropdownMenu/DropdownMenu.css.d.ts

@@ -1,4 +1,5 @@
 export declare const content: string;
+export declare const contentWidth: Record<128 | 256, string>;
 export declare const contentChild: string;
 export declare const contentChildColors: {
     grey: string;

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -9,9 +9,10 @@ interface DropdownMenuTriggerProps {
     children: ReactNode;
 }
 export declare function DropdownMenuTrigger(props: DropdownMenuTriggerProps): JSX.Element;
-interface DropdownMenuContentProps {
+export interface DropdownMenuContentProps {
     align?: "center" | "end" | "start";
     side?: "bottom" | "left" | "right" | "top";
+    minWidth?: 128 | 256;
     children: ReactNode;
     containerRef?: MutableRefObject<null>;
 }

package/dist/components/DropdownMenu/DropdownMenu.stories.d.ts

@@ -1,6 +1,8 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./DropdownMenu").DropdownMenuProps>;
+import { type DropdownMenuContentProps, type DropdownMenuProps } from "./DropdownMenu";
+type Args = DropdownMenuProps & Pick<DropdownMenuContentProps, "minWidth">;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, Args>;
 export default _default;
 export declare const Default: {
-    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("./DropdownMenu").DropdownMenuProps>;
+    render: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, Args>;
     name: string;
 };

package/dist/components/Skeleton/Skeleton.css.d.ts

@@ -8,4 +8,5 @@ export declare const borderRadius: {
     0: string;
     4: string;
     6: string;
+    "100%": string;
 };

package/dist/components/Suspense/AnimatedSuspense.css.d.ts

@@ -0,0 +1 @@
+export declare const childrenAnimationWrapper: string;

package/dist/components/Suspense/AnimatedSuspense.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+import { type Sprinkles } from "../../theme/sprinkles.css";
+interface AnimatedSuspenseProps {
+    children: ReactNode;
+    fallback?: ReactNode;
+    animationDuration?: Sprinkles["animationDuration"];
+}
+export declare function AnimatedSuspense(props: AnimatedSuspenseProps): JSX.Element;
+export {};

package/dist/components/Suspense/index.d.ts

@@ -0,0 +1 @@
+export { AnimatedSuspense } from "./AnimatedSuspense";

package/dist/components/Table/Table.css.d.ts

@@ -1,9 +1,12 @@
 export declare const root: string;
-export declare const table: string;
-export declare const head: string;
-export declare const body: string;
-export declare const row: string;
+export declare const header: string;
 export declare const bodyRow: string;
-export declare const rowClickable: string;
+export declare const disablePointerEvents: string;
+export declare const onClickBodyRow: string;
+export declare const staticBodyRow: string;
+export declare const headerCell: string;
+export declare const bodyCell: string;
 export declare const cell: string;
-export declare const cellContent: string;
+export declare const linkedRowContainer: string;
+export declare const linkElementWrapper: string;
+export declare const link: string;

package/dist/components/Table/Table.d.ts

@@ -1,24 +1,63 @@
-import { type MouseEventHandler, type ReactNode } from "react";
+import { type ReactNode } from "react";
 export interface TableProps {
     children: ReactNode;
+    /** The number and size of columns. See [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns). */
+    columnLayout: string;
 }
-export declare function Table({ children }: TableProps): JSX.Element;
+/**
+ * Outer table component. This should wrap any table header and body in order to
+ * set the layout context.
+ */
+export declare function Table(props: TableProps): JSX.Element;
 export interface TableHeadProps {
     children: ReactNode;
 }
-export declare function TableHead({ children }: TableHeadProps): JSX.Element;
+/**
+ * Wrapper for the entire table header. This ensures any rows contained in it have the
+ * header row style applied.
+ */
+export declare function TableHead(props: TableHeadProps): JSX.Element;
 export interface TableBodyProps {
     children: ReactNode;
 }
-export declare function TableBody({ children }: TableBodyProps): JSX.Element;
-export interface TableRowProps {
+/**
+ * Wrapper for the entire table body and its rows. This ensures any rows contained in
+ * it have the body row style applied.
+ */
+export declare function TableBody(props: TableBodyProps): JSX.Element;
+export interface ClickableTableRowProps {
     children: ReactNode;
-    onClick?: MouseEventHandler<HTMLTableRowElement>;
+    /** Callback fired when the row is clicked */
+    onClick?: () => void;
+    renderLink?: never;
 }
+export interface LinkTableRowProps {
+    children: ReactNode;
+    onClick?: never;
+    /** Anchor tag wrapper for the row to enable using any routing library such as next Link or react-router. */
+    renderLink: ({ children }: {
+        children: ReactNode;
+    }) => JSX.Element;
+}
+type TableRowProps = ClickableTableRowProps | LinkTableRowProps;
+/**
+ * A possibly interactable table row. This component is used in
+ * both the header and the table body. The interactivity works in 1 of 3 ways:
+ *
+ * - Not giving any props other than children: The table acts as a static element which you can't interact with
+ * - Given an onClick prop: fires the onClick callback when the row is clicked
+ * - Given a renderLink: wraps the **entire** row in the given component. E.g. wrapping it in `react-router-dom` `<Link>`
+ */
 export declare function TableRow(props: TableRowProps): JSX.Element;
 export interface TableCellProps {
     children?: ReactNode;
     /** How to align the content in the cell. Note that undefined defaults to start */
     align?: "center" | "end";
+    /** Whether the content of the cell is interactive, this disables the link properties for that cell. Defaults to `false`. */
+    interactive?: boolean;
 }
+/**
+ * Table cells wrap the individual content of the table.
+ */
 export declare function TableCell(props: TableCellProps): JSX.Element;
+export {};

package/dist/index.d.ts

@@ -56,6 +56,7 @@ export { Separator } from "./components/Separator";
 export { Skeleton } from "./components/Skeleton";
 export { SliceCard, SliceSelectCard } from "./components/Slice";
 export { Slider } from "./components/Slider";
+export { AnimatedSuspense } from "./components/Suspense";
 export { Switch } from "./components/Switch";
 export { Tab } from "./components/Tab";
 export { Table, TableBody, TableCell, TableHead, TableRow } from "./components/Table";