@raycast/api 1.40.3 → 1.41.0

package/api.d.ts

@@ -102,7 +102,7 @@ export declare namespace Action {
         /**
          * Props of the {@link Action.SubmitForm} React component.
          */
-        export type Props<T> = SubmitFormProps<T>;
+        export type Props<T extends Form.Values> = SubmitFormProps<T>;
     }
     export namespace Trash {
         /**
@@ -702,10 +702,10 @@ export declare function clearSearchBar(options?: {
 
 export declare namespace Clipboard {
     /**
-     * Copies text to the clipboard.
+     * Copies content to the clipboard.
      *
-     * @param text - The text to copy to the clipboard.
-     * @returns A Promise that resolves when the text is copied to the clipboard.
+     * @param content - The content to copy to the clipboard.
+     * @returns A Promise that resolves when the content is copied to the clipboard.
      *
      * @example
      * ```typescript
@@ -713,10 +713,22 @@ export declare namespace Clipboard {
      *
      * export default async () => {
      *   await Clipboard.copy("https://raycast.com");
+     *
+     *   const textContent: Clipboard.Content = {
+     *     text: "https://raycast.com",
+     *   }
+     *
+     *   await Clipboard.copy(textContent);
+     *
+     *   const fileContent: Clipboard.Content = {
+     *     file: "/path/to/file.pdf",
+     *   }
+     *
+     *   await Clipboard.copy(fileContent);
      * };
      * ```
      */
-    export function copy(text: string): Promise<void>;
+    export function copy(content: string | Content): Promise<void>;
     /**
      * Clears the current clipboard contents.
      *
@@ -733,10 +745,10 @@ export declare namespace Clipboard {
      */
     export function clear(): Promise<void>;
     /**
-     * Pastes text to the current selection of the frontmost application.
+     * Pastes content to the current selection of the frontmost application.
      *
-     * @param text - The text to insert at the cursor.
-     * @returns A Promise that resolves when the text is pasted.
+     * @param content - The content to insert at the cursor.
+     * @returns A Promise that resolves when the content is pasted.
      *
      * @example
      * ```typescript
@@ -747,7 +759,7 @@ export declare namespace Clipboard {
      * };
      * ```
      */
-    export function paste(text: string): Promise<void>;
+    export function paste(content: string | Content): Promise<void>;
     /**
      * Reads the clipboard as plain text.
      *
@@ -764,6 +776,36 @@ export declare namespace Clipboard {
      * ```
      */
     export function readText(): Promise<string | undefined>;
+    /**
+     * Type of the content copied and pasted to and from the {@link Clipboard}.
+     *
+     * @example
+     * ```typescript
+     * import { Clipboard } from "@raycast/api";
+     *
+     * const textContent: Clipboard.Content = {
+     *   text: "text to copy",
+     * }
+     *
+     * const fileContent: Clipboard.Content = {
+     *   file: "/path/to/file.pdf",
+     * }
+     * ```
+     */
+    export type Content = {
+        /**
+         * The text representation of the content.
+         */
+        text: string;
+    } | {
+        /**
+         * The file representation of the content.
+         *
+         * @remarks
+         * At the moment only file paths represented as a string are supported.
+         */
+        file: PathLike;
+    };
 }
 
 /**
@@ -3807,10 +3849,18 @@ export declare namespace Grid {
      * Props of the {@link Grid} React component.
      */
     export type Props = GridProps;
+    /**
+     * Allowed `aspectRatio` values.
+     */
+    export type AspectRatio = `${GridAspectRatio}`;
     /**
      * Enum representing the amount of space there should be between a {@link Grid.Item}'s content and its borders.
      */
     export type Inset = GridInset;
+    /**
+     * Enum representing the a {@link Grid.Items}'s fit.
+     */
+    export type Fit = GridFit;
     /**
      * Enum representing the number of items that should be displayed on a single row.
      */
@@ -3850,7 +3900,21 @@ export declare namespace Grid {
     }
 }
 
+declare enum GridAspectRatio {
+    One = "1",
+    ThreeToTwo = "3/2",
+    TwoToThree = "2/3",
+    SixteenToNine = "16/9",
+    NineToSixteen = "9/16"
+}
+
+declare enum GridFit {
+    Contain = "contain",
+    Fill = "fill"
+}
+
 declare enum GridInset {
+    Zero = "zero",
     Small = "sm",
     Medium = "md",
     Large = "lg"
@@ -3869,8 +3933,14 @@ declare interface GridMembers {
     Inset: typeof GridInset;
     /**
      * Enum representing the size of the Grid's child {@link Grid.Item}s.
+     *
+     * @deprecated Use the `columns` number prop instead.
      */
     ItemSize: typeof GridItemSize;
+    /**
+     * Enum representing the a {@link Grid.Items}'s fit.
+     */
+    Fit: typeof GridFit;
     /**
      * A view to display when there aren't any items available. Use to greet users with a friendly message if the
      * extension requires user input before it can show any grid items e.g. when searching for a package, an article etc.
@@ -4018,12 +4088,26 @@ declare interface GridProps extends ActionsInterface, NavigationChildInterface {
      * Grid sections or items. If {@link Grid.Item} elements are specified, a default section is automatically created.
      */
     children?: ReactNode;
+    /**
+     * Column count for the grid's sections. Minimum value is 1, maximum value is 8.
+     *
+     * @defaultValue 5
+     */
+    columns?: number;
     /**
      * The number of items that should be displayed on a single row.
      *
-     * @defaultValue {@link Grid.ItemSize.Medium}
+     * @deprecated use `columns` instead.
      */
     itemSize?: Grid.ItemSize;
+    /**
+     * Aspect ratio for the {@link Grid.Item} elements. Defaults to 1.
+     */
+    aspectRatio?: Grid.AspectRatio;
+    /**
+     * Fit for the {@link Grid.Item} element content. Defaults to "contain"
+     */
+    fit?: Grid.Fit;
     /**
      * Indicates how much space there should be between a {@link Grid.Item}s' content and its borders.
      * The absolute value depends on the value of the `itemSize` prop.
@@ -4031,8 +4115,11 @@ declare interface GridProps extends ActionsInterface, NavigationChildInterface {
     inset?: Grid.Inset;
     /**
      * Callback triggered when the item selection in the grid changes.
+     *
+     * When the received id is `null`, it means that all items have been filtered out
+     * and that there are no item selected
      */
-    onSelectionChange?: (id?: string) => void;
+    onSelectionChange?: (id: string | null) => void;
     /**
      * {@link Grid.Dropdown} that will be shown in the right-hand-side of the search bar.
      */
@@ -4405,6 +4492,7 @@ export declare enum Icon {
     Pencil = "pencil-16",
     Person = "person-16",
     PersonCircle = "person-circle-16",
+    PersonLines = "person-lines-16",
     Phone = "phone-16",
     PhoneRinging = "phone-ringing-16",
     PieChart = "pie-chart-16",
@@ -4905,6 +4993,10 @@ declare interface ItemProps_3 {
      * The main title displayed for this item.
      */
     title: string;
+    /**
+     * The subtitle displayed for this item in a slightly dimmed text color.
+     */
+    subtitle?: string;
     /**
      * An optional icon for this item.
      */
@@ -5377,8 +5469,11 @@ declare interface ListProps_2 extends ActionsInterface, NavigationChildInterface
     children?: ReactNode;
     /**
      * Callback triggered when the item selection in the list changes.
+     *
+     * When the received id is `null`, it means that all items have been filtered out
+     * and that there are no item selected
      */
-    onSelectionChange?: (id?: string) => void;
+    onSelectionChange?: (id: string | null) => void;
     /**
      * {@link List.Dropdown} that will be shown in the right-hand-side of the search bar.
      */
@@ -5388,6 +5483,7 @@ declare interface ListProps_2 extends ActionsInterface, NavigationChildInterface
      */
     searchText?: string;
     /**
+     * @deprecated Use {@link List.filtering} instead.
      * Toggles Raycast filtering. When `true`, Raycast will use the query in the search bar to filter list
      * items. When `false`, the extension needs to take care of the filtering.
      *
@@ -5397,6 +5493,19 @@ declare interface ListProps_2 extends ActionsInterface, NavigationChildInterface
      * @defaultValue `false` when `onSearchTextChange` is specified, `true` otherwise.
      */
     enableFiltering?: boolean;
+    /**
+     * Toggles Raycast filtering. When `true`, Raycast will use the query in the search bar to filter list
+     * items. When `false`, the extension needs to take care of the filtering.
+     *
+     * You can further define how native filtering orders list sections by setting an object with a `keepSectionOrder` property:
+     * When `true`, ensures that Raycast filtering maintains the section order as defined in the extension.
+     * When `false`, filtering may change the section order depending on the ranking values of list items.
+     *
+     * @defaultValue `false` when `onSearchTextChange` is specified, `true` otherwise.
+     */
+    filtering?: boolean | {
+        keepSectionOrder: boolean;
+    };
     /**
      * Placeholder text that will be shown in the search bar.
      *
@@ -5658,30 +5767,7 @@ declare interface MenuBarExtraMembers {
      */
     Item: typeof Item_3;
     /**
-     * A visual separator between two items of type {@link MenuBarExtra.Item} or {@link MenuBarExtra.Submenu}.
-     *
-     * @example
-     * ```typescript
-     * import { MenuBarExtra } from "@raycast/api";
-     *
-     * export default function Command() {
-     *   return (
-     *     <MenuBarExtra icon="https://github.githubassets.com/favicons/favicon.png" tooltip="Your Pull Requests">
-     *       <MenuBarExtra.Item title="Item 1" />
-     *       <MenuBarExtra.Separator />
-     *       <MenuBarExtra.Item title="Item 2" />
-     *       <MenuBarExtra.Separator />
-     *       <MenuBarExtra.Submenu title="Submenu 1">
-     *         <MenuBarExtra.Item title="Submenu 1 Item 1" />
-     *       </MenuBarExtra.Submenu>
-     *       <MenuBarExtra.Separator />
-     *       <MenuBarExtra.Submenu title="Submenu 2">
-     *         <MenuBarExtra.Item title="Submenu 2 Item 1" />
-     *       </MenuBarExtra.Submenu>
-     *     </MenuBarExtra>
-     *   );
-     * }
-     * ```
+     * @deprecated Use {@link MenuBarExtra.Section} instead to wrap your items. A separator is added automatically.
      */
     Separator: typeof Separator_4;
     /**
@@ -5714,6 +5800,28 @@ declare interface MenuBarExtraMembers {
      * ```
      */
     Submenu: typeof Submenu_2;
+    /**
+     * A section of related {@link MenuBarExtra.Item} or {@link MenuBarExtra.Submenu} with an optional title.
+     *
+     * @example
+     * ```typescript
+     * import { MenuBarExtra } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <MenuBarExtra icon="https://github.githubassets.com/favicons/favicon.png" tooltip="Your Pull Requests">
+     *       <MenuBarExtra.Section title="Open Pull Requests">
+     *         <MenuBarExtra.Item title="Add an amazing feature" subtitle="#1" />
+     *       </MenuBarExtra.Section>
+     *       <MenuBarExtra.Section title="Closed Pull Requests" />
+     *         <MenuBarExtra.Item title="Fixed gnarly bug" subtitle="#2" />
+     *       </MenuBarExtra.Section>
+     *     </MenuBarExtra>
+     *   );
+     * }
+     * ```
+     */
+    Section: typeof Section_4;
 }
 
 declare interface MenuBarExtraProps {
@@ -6647,6 +6755,11 @@ declare const Section_2: FunctionComponent<SectionProps_2>;
  */
 declare const Section_3: FunctionComponent<SectionProps_3>;
 
+/**
+ * See {@link MenuBarExtra.Section}
+ */
+declare const Section_4: FunctionComponent<SectionProps_4>;
+
 declare type SectionChildren = ReactElement<ActionProps> | ReactElement<ActionProps>[] | ReactElement<SubmenuProps> | Array<ReactElement<SubmenuProps>> | Array<ReactElement<SubmenuProps> | ReactElement<ActionProps>> | null;
 
 /**
@@ -6696,6 +6809,35 @@ declare interface SectionProps_3 {
      * An optional subtitle displayed next to the title of the section.
      */
     subtitle?: string;
+    /**
+     * Column count for the section. Minimum value is 1, maximum value is 8.
+     *
+     * @defaultValue 5
+     */
+    columns?: number;
+    /**
+     * Aspect ratio for the {@link Grid.Item} elements. Defaults to 1.
+     */
+    aspectRatio?: `${GridAspectRatio}`;
+    /**
+     * Fit for the {@link Grid.Item} element content. Defaults to "contain"
+     */
+    fit?: GridFit;
+    /**
+     * Inset for the {@link Grid.Item} element content. Defaults to "none".
+     */
+    inset?: GridInset;
+}
+
+declare interface SectionProps_4 {
+    /**
+     * The item elements of the section.
+     */
+    children?: ReactNode;
+    /**
+     * Title displayed above the section
+     */
+    title?: string;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raycast/api",
-  "version": "1.40.3",
+  "version": "1.41.0",
   "description": "Build extensions for Raycast with React and Node.js.",
   "author": "Raycast Technologies Ltd.",
   "homepage": "https://developers.raycast.com",

package/types/index.d.ts

@@ -102,7 +102,7 @@ export declare namespace Action {
         /**
          * Props of the {@link Action.SubmitForm} React component.
          */
-        export type Props<T> = SubmitFormProps<T>;
+        export type Props<T extends Form.Values> = SubmitFormProps<T>;
     }
     export namespace Trash {
         /**
@@ -702,10 +702,10 @@ export declare function clearSearchBar(options?: {
 
 export declare namespace Clipboard {
     /**
-     * Copies text to the clipboard.
+     * Copies content to the clipboard.
      *
-     * @param text - The text to copy to the clipboard.
-     * @returns A Promise that resolves when the text is copied to the clipboard.
+     * @param content - The content to copy to the clipboard.
+     * @returns A Promise that resolves when the content is copied to the clipboard.
      *
      * @example
      * ```typescript
@@ -713,10 +713,22 @@ export declare namespace Clipboard {
      *
      * export default async () => {
      *   await Clipboard.copy("https://raycast.com");
+     *
+     *   const textContent: Clipboard.Content = {
+     *     text: "https://raycast.com",
+     *   }
+     *
+     *   await Clipboard.copy(textContent);
+     *
+     *   const fileContent: Clipboard.Content = {
+     *     file: "/path/to/file.pdf",
+     *   }
+     *
+     *   await Clipboard.copy(fileContent);
      * };
      * ```
      */
-    export function copy(text: string): Promise<void>;
+    export function copy(content: string | Content): Promise<void>;
     /**
      * Clears the current clipboard contents.
      *
@@ -733,10 +745,10 @@ export declare namespace Clipboard {
      */
     export function clear(): Promise<void>;
     /**
-     * Pastes text to the current selection of the frontmost application.
+     * Pastes content to the current selection of the frontmost application.
      *
-     * @param text - The text to insert at the cursor.
-     * @returns A Promise that resolves when the text is pasted.
+     * @param content - The content to insert at the cursor.
+     * @returns A Promise that resolves when the content is pasted.
      *
      * @example
      * ```typescript
@@ -747,7 +759,7 @@ export declare namespace Clipboard {
      * };
      * ```
      */
-    export function paste(text: string): Promise<void>;
+    export function paste(content: string | Content): Promise<void>;
     /**
      * Reads the clipboard as plain text.
      *
@@ -764,6 +776,36 @@ export declare namespace Clipboard {
      * ```
      */
     export function readText(): Promise<string | undefined>;
+    /**
+     * Type of the content copied and pasted to and from the {@link Clipboard}.
+     *
+     * @example
+     * ```typescript
+     * import { Clipboard } from "@raycast/api";
+     *
+     * const textContent: Clipboard.Content = {
+     *   text: "text to copy",
+     * }
+     *
+     * const fileContent: Clipboard.Content = {
+     *   file: "/path/to/file.pdf",
+     * }
+     * ```
+     */
+    export type Content = {
+        /**
+         * The text representation of the content.
+         */
+        text: string;
+    } | {
+        /**
+         * The file representation of the content.
+         *
+         * @remarks
+         * At the moment only file paths represented as a string are supported.
+         */
+        file: PathLike;
+    };
 }
 
 /**
@@ -3807,10 +3849,18 @@ export declare namespace Grid {
      * Props of the {@link Grid} React component.
      */
     export type Props = GridProps;
+    /**
+     * Allowed `aspectRatio` values.
+     */
+    export type AspectRatio = `${GridAspectRatio}`;
     /**
      * Enum representing the amount of space there should be between a {@link Grid.Item}'s content and its borders.
      */
     export type Inset = GridInset;
+    /**
+     * Enum representing the a {@link Grid.Items}'s fit.
+     */
+    export type Fit = GridFit;
     /**
      * Enum representing the number of items that should be displayed on a single row.
      */
@@ -3850,7 +3900,21 @@ export declare namespace Grid {
     }
 }
 
+declare enum GridAspectRatio {
+    One = "1",
+    ThreeToTwo = "3/2",
+    TwoToThree = "2/3",
+    SixteenToNine = "16/9",
+    NineToSixteen = "9/16"
+}
+
+declare enum GridFit {
+    Contain = "contain",
+    Fill = "fill"
+}
+
 declare enum GridInset {
+    Zero = "zero",
     Small = "sm",
     Medium = "md",
     Large = "lg"
@@ -3869,8 +3933,14 @@ declare interface GridMembers {
     Inset: typeof GridInset;
     /**
      * Enum representing the size of the Grid's child {@link Grid.Item}s.
+     *
+     * @deprecated Use the `columns` number prop instead.
      */
     ItemSize: typeof GridItemSize;
+    /**
+     * Enum representing the a {@link Grid.Items}'s fit.
+     */
+    Fit: typeof GridFit;
     /**
      * A view to display when there aren't any items available. Use to greet users with a friendly message if the
      * extension requires user input before it can show any grid items e.g. when searching for a package, an article etc.
@@ -4018,12 +4088,26 @@ declare interface GridProps extends ActionsInterface, NavigationChildInterface {
      * Grid sections or items. If {@link Grid.Item} elements are specified, a default section is automatically created.
      */
     children?: ReactNode;
+    /**
+     * Column count for the grid's sections. Minimum value is 1, maximum value is 8.
+     *
+     * @defaultValue 5
+     */
+    columns?: number;
     /**
      * The number of items that should be displayed on a single row.
      *
-     * @defaultValue {@link Grid.ItemSize.Medium}
+     * @deprecated use `columns` instead.
      */
     itemSize?: Grid.ItemSize;
+    /**
+     * Aspect ratio for the {@link Grid.Item} elements. Defaults to 1.
+     */
+    aspectRatio?: Grid.AspectRatio;
+    /**
+     * Fit for the {@link Grid.Item} element content. Defaults to "contain"
+     */
+    fit?: Grid.Fit;
     /**
      * Indicates how much space there should be between a {@link Grid.Item}s' content and its borders.
      * The absolute value depends on the value of the `itemSize` prop.
@@ -4031,8 +4115,11 @@ declare interface GridProps extends ActionsInterface, NavigationChildInterface {
     inset?: Grid.Inset;
     /**
      * Callback triggered when the item selection in the grid changes.
+     *
+     * When the received id is `null`, it means that all items have been filtered out
+     * and that there are no item selected
      */
-    onSelectionChange?: (id?: string) => void;
+    onSelectionChange?: (id: string | null) => void;
     /**
      * {@link Grid.Dropdown} that will be shown in the right-hand-side of the search bar.
      */
@@ -4405,6 +4492,7 @@ export declare enum Icon {
     Pencil = "pencil-16",
     Person = "person-16",
     PersonCircle = "person-circle-16",
+    PersonLines = "person-lines-16",
     Phone = "phone-16",
     PhoneRinging = "phone-ringing-16",
     PieChart = "pie-chart-16",
@@ -4905,6 +4993,10 @@ declare interface ItemProps_3 {
      * The main title displayed for this item.
      */
     title: string;
+    /**
+     * The subtitle displayed for this item in a slightly dimmed text color.
+     */
+    subtitle?: string;
     /**
      * An optional icon for this item.
      */
@@ -5377,8 +5469,11 @@ declare interface ListProps_2 extends ActionsInterface, NavigationChildInterface
     children?: ReactNode;
     /**
      * Callback triggered when the item selection in the list changes.
+     *
+     * When the received id is `null`, it means that all items have been filtered out
+     * and that there are no item selected
      */
-    onSelectionChange?: (id?: string) => void;
+    onSelectionChange?: (id: string | null) => void;
     /**
      * {@link List.Dropdown} that will be shown in the right-hand-side of the search bar.
      */
@@ -5388,6 +5483,7 @@ declare interface ListProps_2 extends ActionsInterface, NavigationChildInterface
      */
     searchText?: string;
     /**
+     * @deprecated Use {@link List.filtering} instead.
      * Toggles Raycast filtering. When `true`, Raycast will use the query in the search bar to filter list
      * items. When `false`, the extension needs to take care of the filtering.
      *
@@ -5397,6 +5493,19 @@ declare interface ListProps_2 extends ActionsInterface, NavigationChildInterface
      * @defaultValue `false` when `onSearchTextChange` is specified, `true` otherwise.
      */
     enableFiltering?: boolean;
+    /**
+     * Toggles Raycast filtering. When `true`, Raycast will use the query in the search bar to filter list
+     * items. When `false`, the extension needs to take care of the filtering.
+     *
+     * You can further define how native filtering orders list sections by setting an object with a `keepSectionOrder` property:
+     * When `true`, ensures that Raycast filtering maintains the section order as defined in the extension.
+     * When `false`, filtering may change the section order depending on the ranking values of list items.
+     *
+     * @defaultValue `false` when `onSearchTextChange` is specified, `true` otherwise.
+     */
+    filtering?: boolean | {
+        keepSectionOrder: boolean;
+    };
     /**
      * Placeholder text that will be shown in the search bar.
      *
@@ -5658,30 +5767,7 @@ declare interface MenuBarExtraMembers {
      */
     Item: typeof Item_3;
     /**
-     * A visual separator between two items of type {@link MenuBarExtra.Item} or {@link MenuBarExtra.Submenu}.
-     *
-     * @example
-     * ```typescript
-     * import { MenuBarExtra } from "@raycast/api";
-     *
-     * export default function Command() {
-     *   return (
-     *     <MenuBarExtra icon="https://github.githubassets.com/favicons/favicon.png" tooltip="Your Pull Requests">
-     *       <MenuBarExtra.Item title="Item 1" />
-     *       <MenuBarExtra.Separator />
-     *       <MenuBarExtra.Item title="Item 2" />
-     *       <MenuBarExtra.Separator />
-     *       <MenuBarExtra.Submenu title="Submenu 1">
-     *         <MenuBarExtra.Item title="Submenu 1 Item 1" />
-     *       </MenuBarExtra.Submenu>
-     *       <MenuBarExtra.Separator />
-     *       <MenuBarExtra.Submenu title="Submenu 2">
-     *         <MenuBarExtra.Item title="Submenu 2 Item 1" />
-     *       </MenuBarExtra.Submenu>
-     *     </MenuBarExtra>
-     *   );
-     * }
-     * ```
+     * @deprecated Use {@link MenuBarExtra.Section} instead to wrap your items. A separator is added automatically.
      */
     Separator: typeof Separator_4;
     /**
@@ -5714,6 +5800,28 @@ declare interface MenuBarExtraMembers {
      * ```
      */
     Submenu: typeof Submenu_2;
+    /**
+     * A section of related {@link MenuBarExtra.Item} or {@link MenuBarExtra.Submenu} with an optional title.
+     *
+     * @example
+     * ```typescript
+     * import { MenuBarExtra } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <MenuBarExtra icon="https://github.githubassets.com/favicons/favicon.png" tooltip="Your Pull Requests">
+     *       <MenuBarExtra.Section title="Open Pull Requests">
+     *         <MenuBarExtra.Item title="Add an amazing feature" subtitle="#1" />
+     *       </MenuBarExtra.Section>
+     *       <MenuBarExtra.Section title="Closed Pull Requests" />
+     *         <MenuBarExtra.Item title="Fixed gnarly bug" subtitle="#2" />
+     *       </MenuBarExtra.Section>
+     *     </MenuBarExtra>
+     *   );
+     * }
+     * ```
+     */
+    Section: typeof Section_4;
 }
 
 declare interface MenuBarExtraProps {
@@ -6647,6 +6755,11 @@ declare const Section_2: FunctionComponent<SectionProps_2>;
  */
 declare const Section_3: FunctionComponent<SectionProps_3>;
 
+/**
+ * See {@link MenuBarExtra.Section}
+ */
+declare const Section_4: FunctionComponent<SectionProps_4>;
+
 declare type SectionChildren = ReactElement<ActionProps> | ReactElement<ActionProps>[] | ReactElement<SubmenuProps> | Array<ReactElement<SubmenuProps>> | Array<ReactElement<SubmenuProps> | ReactElement<ActionProps>> | null;
 
 /**
@@ -6696,6 +6809,35 @@ declare interface SectionProps_3 {
      * An optional subtitle displayed next to the title of the section.
      */
     subtitle?: string;
+    /**
+     * Column count for the section. Minimum value is 1, maximum value is 8.
+     *
+     * @defaultValue 5
+     */
+    columns?: number;
+    /**
+     * Aspect ratio for the {@link Grid.Item} elements. Defaults to 1.
+     */
+    aspectRatio?: `${GridAspectRatio}`;
+    /**
+     * Fit for the {@link Grid.Item} element content. Defaults to "contain"
+     */
+    fit?: GridFit;
+    /**
+     * Inset for the {@link Grid.Item} element content. Defaults to "none".
+     */
+    inset?: GridInset;
+}
+
+declare interface SectionProps_4 {
+    /**
+     * The item elements of the section.
+     */
+    children?: ReactNode;
+    /**
+     * Title displayed above the section
+     */
+    title?: string;
 }
 
 /**