@raycast/api 1.35.2 → 1.37.0

package/types/index.d.ts

@@ -107,6 +107,12 @@ export declare namespace Action {
          */
         export type Props = TrashProps;
     }
+    export namespace ToggleQuickLook {
+        /**
+         * Props of the {@link Action.ToggleQuickLook} React component.
+         */
+        export type Props = ToggleQuickLookProps;
+    }
 }
 
 /**
@@ -343,7 +349,7 @@ export declare interface ActionPanelSubmenuProps extends ActionPanel.Submenu.Pro
 declare interface ActionProps {
     /**
      * ID of the item.
-     * @deprecated - This is an internal prop which not not have been exposed. You can safely remove it.
+     * @deprecated - This is an internal prop which should not have been exposed. You can safely remove it.
      */
     id?: string;
     /**
@@ -500,6 +506,108 @@ export declare interface Application {
     bundleId?: string;
 }
 
+/**
+ * Caching abstraction that stores data on disk and supports LRU (least recently used) access.
+ * Since extensions can only consume up to a max. heap memory size, the cache only maintains a lightweight index in memory
+ * and stores the actual data in separate files on disk in the extension's support directory.
+ *
+ * The Cache class provides CRUD-style methods (get, set, remove) to update and retrieve data synchronously based on a key.
+ * The data must be a string and it is up to the client to decide which serialization format to use.
+ * (A typical use case would be to use JSON.stringify and JSON.parse.)
+ *
+ * @remarks By default, the cache is shared between the commands of an extension. Use {@link Cache.Options} to configure
+ * a `namespace` per command if needed (for example, set it to `environment.commandName`).
+ *
+ * @example
+ * ```typescript
+ * import { Cache } from "@raycast/api";
+ *
+ * const cache = new Cache();
+ * cache.set("items", JSON.stringify([{ id: "1", title: "Item 1" }]));
+ * console.log(JSON.parse(cache.get("items")));
+ * ```
+ */
+export declare class Cache {
+    static get STORAGE_DIRECTORY_NAME(): string;
+    static get DEFAULT_CAPACITY(): number;
+    private directory;
+    private namespace?;
+    private capacity;
+    private journal;
+    private storage;
+    private subscribers;
+    constructor(options?: Cache.Options);
+    /**
+     * @returns the full path to the directory where the data is stored on disk.
+     */
+    get storageDirectory(): string;
+    /**
+     * @returns the data for the given key. If there is no data for the key, `undefined` is returned.
+     * @remarks If you want to just check for the existence of a key, use {@link has}.
+     */
+    get(key: string): string | undefined;
+    /**
+     * @returns `true` if data for the key exists, `false` otherwise.
+     * @remarks You can use this method to check for entries without affecting the LRU access.
+     */
+    has(key: string): boolean;
+    /**
+     * @returns `true` if the cache is empty, `false` otherwise.
+     */
+    get isEmpty(): boolean;
+    /**
+     * Sets the data for the given key.
+     * If the data exceeds the configured `capacity`, the least recently used entries are removed.
+     * This also notifies registered subscribers (see {@link subscribe}).
+     */
+    set(key: string, data: string): void;
+    /**
+     * Removes the data for the given key.
+     * This also notifies registered subscribers (see {@link subscribe}).
+     * @returns `true` if data for the key was removed, `false` otherwise.
+     */
+    remove(key: string): boolean;
+    /**
+     * Clears all stored data.
+     * This also notifies registered subscribers (see {@link subscribe}) unless the  `notifySubscribers` option is set to `false`.
+     */
+    clear(options?: {
+        notifySubscribers: boolean;
+    }): void;
+    /**
+     * Registers a new subscriber that gets notified when cache data is set or removed.
+     * @returns a function that can be used to remove the subscriber.
+     */
+    subscribe(subscription: Cache.Subscriber): Cache.Subscription;
+    private maintainCapacity;
+    private notifySubscribers;
+}
+
+export declare namespace Cache {
+    /**
+     * The options for creating a new {@link Cache}.
+     */
+    export interface Options {
+        /**
+         * If set, the Cache will be namespaced via a subdirectory.
+         * This can be useful to separate the caches for individual commands of an extension.
+         * By default, the cache is shared between the commands of an extension.
+         */
+        namespace?: string;
+        /**
+         * The parent directory for the cache data.
+         */
+        directory?: string;
+        /**
+         * The capacity in bytes. If the stored data exceeds the capacity, the least recently used data is removed.
+         * @default 10000000 (10 MB)
+         */
+        capacity?: number;
+    }
+    export type Subscriber = (key: string | undefined, data: string | undefined) => void;
+    export type Subscription = () => void;
+}
+
 /**
  * See {@link Form.Checkbox}
  */
@@ -1055,6 +1163,34 @@ declare interface ConvenienceActions {
      * ```
      */
     CreateQuicklink: typeof CreateQuicklink;
+    /**
+     * Action that toggles the Quick Look to preview a file.
+     *
+     * @example
+     * ```typescript
+     * import { ActionPanel, List, Action } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <List>
+     *         <List.Item
+     *           title="Preview me"
+     *           actions={
+     *             <ActionPanel>
+     *               <Action.ToggleQuickLook
+     *                 name="Some file"
+     *                 path="~/Downloads/Raycast.dmg"
+     *                 shortcut={{ modifiers: ["cmd"], key: "y" }}
+     *               />
+     *             </ActionPanel>
+     *           }
+     *         />
+     *     </ List>
+     *   );
+     * }
+     * ```
+     */
+    ToggleQuickLook: typeof ToggleQuickLook;
 }
 
 /**
@@ -1468,6 +1604,11 @@ declare const Dropdown: ForwardRefExoticComponent<DropdownProps & RefAttributes<
  */
 declare const Dropdown_2: FunctionComponent<DropdownProps_2> & DropdownMembers_2;
 
+/**
+ * See {@link Grid.Dropdown}
+ */
+declare const Dropdown_3: FunctionComponent<DropdownProps_3> & DropdownMembers_3;
+
 /**
  * See {@link Form.Dropdown.Item}
  */
@@ -1478,6 +1619,11 @@ declare const DropdownItem: FunctionComponent<DropdownItemProps>;
  */
 declare const DropdownItem_2: FunctionComponent<DropdownItemProps_2>;
 
+/**
+ * See {@link Grid.Dropdown.Item}
+ */
+declare const DropdownItem_3: FunctionComponent<DropdownItemProps_3>;
+
 /**
  * See {@link Form.Dropdown.Item.Props}
  */
@@ -1513,6 +1659,22 @@ declare interface DropdownItemProps_2 {
     icon?: Image.ImageLike | undefined | null;
 }
 
+declare interface DropdownItemProps_3 {
+    /**
+     * Value of the dropdown item.
+     * Make sure to assign each unique value for each item.
+     */
+    value: string;
+    /**
+     * The title displayed for the item.
+     */
+    title: string;
+    /**
+     * An optional icon displayed for the item.
+     */
+    icon?: Image.ImageLike | undefined | null;
+}
+
 declare interface DropdownMembers {
     /**
      * Visually separated group of dropdown items.
@@ -1631,6 +1793,61 @@ declare interface DropdownMembers_2 {
     Item: typeof DropdownItem_2;
 }
 
+declare interface DropdownMembers_3 {
+    /**
+     * Visually separated group of dropdown items in a {@link Grid.Dropdown}.
+     *
+     * @remarks
+     * Use sections to group related dropdown items together.
+     *
+     * @example
+     * ```typescript
+     * import { Grid } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Grid searchBarAccessory={
+     *       <Grid.Dropdown tooltip="Dropdown With Sections">
+     *         <Grid.Dropdown.Section title="First Section">
+     *           <Grid.Dropdown.Item title="One" value="one" />
+     *         </Grid.Dropdown.Section>
+     *         <Grid.Dropdown.Section title="Second Section">
+     *           <Grid.Dropdown.Item title="Two" value="two" />
+     *         </Grid.Dropdown.Section>
+     *       </Grid.Dropdown>
+     *     }>
+     *       <Grid.Item title="Item in the Main Grid">
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Section: typeof DropdownSection_3;
+    /**
+     * A dropdown item in a {@link Grid.Dropdown}
+     *
+     * @example
+     * ```typescript
+     * import { Grid } from "@raycast/api";
+     *
+     * export default function Command() {
+     *     return (
+     *       <Grid searchBarAccessory={
+     *         <Grid.Dropdown tooltip="Dropdown With Items">
+     *           <Grid.Dropdown.Item title="One" value="one" />
+     *           <Grid.Dropdown.Item title="Two" value="two" />
+     *           <Grid.Dropdown.Item title="Three" value="three" />
+     *         </Grid.Dropdown>
+     *       }>
+     *         <Grid.Item title="Item in the Main Grid">
+     *       </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Item: typeof DropdownItem_3;
+}
+
 /**
  * See {@link Form.Dropdown.Props}
  */
@@ -1683,6 +1900,48 @@ declare interface DropdownProps_2 {
     onChange?: (newValue: string) => void;
 }
 
+declare interface DropdownProps_3 {
+    /**
+     * ID of the dropdown.
+     */
+    id?: string;
+    /**
+     * Tooltip displayed when hovering the dropdown.
+     */
+    tooltip: string;
+    /**
+     * Placeholder text that will be shown in the dropdown search field.
+     *
+     * @defaultValue `"Search..."`
+     */
+    placeholder?: string;
+    /**
+     * Indicates whether the value of the dropdown should be persisted after selection, and restored next time the dropdown is rendered.
+     */
+    storeValue?: boolean | undefined;
+    /**
+     * The currently value of the dropdown.
+     */
+    value?: string;
+    /**
+     * The default value of the dropdown.
+     * Keep in mind that `defaultValue` will be configured once per component lifecycle. This means that if a user changes the value, `defaultValue` won't be configured on re-rendering.
+     *
+     * **If you're using `storeValue` and configured it as `true` _and_ a {@link Grid.Dropdown.Item} with the same value exists, then it will be selected.**
+     *
+     * **If you configure `value` at the same time as `defaultValue`, the `value` will have precedence over `defaultValue`.**
+     */
+    defaultValue?: string;
+    /**
+     * Grid sections or items. If {@link Grid.Dropdown.Item} elements are specified, a default section is automatically created.
+     */
+    children?: ReactNode;
+    /**
+     * Callback triggered when the grid item selection changes.
+     */
+    onChange?: (newValue: string) => void;
+}
+
 /**
  * Form.Dropdown Ref type.
  */
@@ -1698,6 +1957,11 @@ declare const DropdownSection: FunctionComponent<DropdownSectionProps>;
  */
 declare const DropdownSection_2: FunctionComponent<DropdownSectionProps_2>;
 
+/**
+ * See {@link Grid.Dropdown.Section}
+ */
+declare const DropdownSection_3: FunctionComponent<DropdownSectionProps_3>;
+
 /**
  * See {@link Form.Dropdown.Section.Props}
  */
@@ -1723,6 +1987,17 @@ declare interface DropdownSectionProps_2 {
     title?: string;
 }
 
+declare interface DropdownSectionProps_3 {
+    /**
+     * The item elements of the section.
+     */
+    children?: ReactNode;
+    /**
+     * Title displayed above the section
+     */
+    title?: string;
+}
+
 /**
  * @deprecated Use {@link Color.Dynamic} instead
  */
@@ -1730,6 +2005,8 @@ export declare type DynamicColor = Color.Dynamic;
 
 declare const EmptyView: FunctionComponent<EmptyViewProps>;
 
+declare const EmptyView_2: FunctionComponent<EmptyViewProps_2>;
+
 declare interface EmptyViewProps extends ActionsInterface {
     /**
      * An icon displayed in the center of the EmptyView.
@@ -1749,6 +2026,25 @@ declare interface EmptyViewProps extends ActionsInterface {
     description?: string;
 }
 
+declare interface EmptyViewProps_2 extends ActionsInterface {
+    /**
+     * An icon displayed in the center of the EmptyView.
+     *
+     * @remarks
+     * If an SVG is used, its longest side will be 128 pixels. Other images will be up/downscaled proportionally so that the longest side is between 64 and 256 pixels.
+     * If not specified, Raycast's default `EmptyView` icon will be used.
+     */
+    icon?: Image.ImageLike | undefined | null;
+    /**
+     * The main title displayed for the Empty View.
+     */
+    title?: string;
+    /**
+     * An optional description for why the empty view is shown.
+     */
+    description?: string;
+}
+
 /**
  * Holds data about the environment the command is running in. Use the global {@link environment} object to retrieve values.
  */
@@ -1847,6 +2143,18 @@ export declare namespace Form {
     export type Value = FormValue_2;
     export type Values = FormValues_2;
     export type Props = FormProps_2;
+    /**
+     * An interface describing event in callbacks {@link Form.Item.Props.onFocus} and {@link Form.Item.Props.onBlur}
+     */
+    export type Event<T extends FormValue_2> = FormEvent<T>;
+    export namespace Event {
+        /**
+         * Types of Form event {@link Form.Event}
+         * * `focus` - the type will be returned for the event of {@link Form.Item.Props.onFocus} callback
+         * * `blur` - the type will be returned for the event of {@link Form.Item.Props.onBlur} callback
+         */
+        export type Type = FormEventType;
+    }
     /**
      * A Ref Type for the {@link Form.TextField}.
      * Use refs to control your Form by calling `Form.TextField.focus()` or `Form.TextField.reset()` functions.
@@ -2475,6 +2783,65 @@ export declare const FormDropdownSection: typeof Form.Dropdown.Section;
 export declare interface FormDropdownSectionProps extends Form.Dropdown.Section.Props {
 }
 
+/**
+ * An interface describing Form events in callbacks
+ *
+ * @example
+ * ```typescript
+ *import { Form } from "@raycast/api";
+ *
+ *export default function Main() {
+ *  return (
+ *    <Form>
+ *      <Form.TextField id="textField" title="Text Field" onBlur={logEvent} onFocus={logEvent} />
+ *      <Form.TextArea id="textArea" title="Text Area" onBlur={logEvent} onFocus={logEvent} />
+ *      <Form.Dropdown id="dropdown" title="Dropdown" onBlur={logEvent} onFocus={logEvent}>
+ *        {[1, 2, 3, 4, 5, 6, 7].map((num) => (
+ *          <Form.Dropdown.Item value={String(num)} title={String(num)} key={num} />
+ *        ))}
+ *      </Form.Dropdown>
+ *      <Form.TagPicker id="tagPicker" title="Tag Picker" onBlur={logEvent} onFocus={logEvent}>
+ *        {[1, 2, 3, 4, 5, 6, 7].map((num) => (
+ *          <Form.TagPicker.Item value={String(num)} title={String(num)} key={num} />
+ *        ))}
+ *      </Form.TagPicker>
+ *    </Form>
+ *  );
+ *}
+ *
+ *function logEvent(event: Form.Event) {
+ *  console.log(`Event '${event.type}' has happened for '${event.target.id}'. Current 'value': '${event.target.value}'`);
+ *}
+ *
+ * ```
+ */
+declare type FormEvent<T extends FormValue_2> = {
+    /**
+     * An interface containing target data related to the event
+     */
+    target: {
+        /**
+         * The {@link FormItemProps.id} of Form item where the event has happened
+         */
+        id: string;
+        /**
+         * The current {@link FormItemProps.value} of Form item where the event has happened
+         */
+        value?: T;
+    };
+    /**
+     * A type of event
+     */
+    type: FormEventType;
+};
+
+/**
+ * Types of Form event ({@link Form.Event}).
+ * * `focus` will be returned for the event of {@link Form.Item.Props.onFocus} callback
+ * * `blur` will be returned for the event of {@link Form.Item.Props.onBlur} callback
+ */
+declare type FormEventType = "focus" | "blur";
+
 /**
  * @deprecated Use {@link Form.ItemProps} instead.
  */
@@ -2498,6 +2865,11 @@ declare interface FormItemProps_2<T extends FormValue_2> {
      * An optional info message to describe the form item. It appears on the right side of the item with an info icon. When the icon is hovered, the info message is shown.
      */
     info?: string;
+    /**
+     * An optional error message to show the form item validation issues.
+     * If the `error` is present, the Form Item will be highlighted with red border and will show an error message on the right.
+     */
+    error?: string;
     /**
      * Indicates whether the value of the item should be persisted after submitting, and restored next time the form is rendered.
      */
@@ -2523,6 +2895,14 @@ declare interface FormItemProps_2<T extends FormValue_2> {
      * The callback which will be triggered when the `value` of the item changes.
      */
     onChange?: (newValue: T) => void;
+    /**
+     * The callback that will be triggered when the item loses its focus.
+     */
+    onBlur?: (event: FormEvent<T>) => void;
+    /**
+     * The callback which will be triggered should be called when the item is focused.
+     */
+    onFocus?: (event: FormEvent<T>) => void;
 }
 
 /**
@@ -2600,6 +2980,17 @@ declare interface FormItemRef {
     reset: () => void;
 }
 
+/**
+ * An interface describing top-level props for Form drafts
+ */
+export declare interface FormLaunchProps {
+    /**
+     * When a user enters the command via a draft, this object will contain the user inputs that were saved as a draft.
+     * Use its values to populate the initial state for your Form.
+     */
+    draftValues?: Form.Values;
+}
+
 declare interface FormMembers {
     /**
      * A form item with a checkbox.
@@ -3041,6 +3432,11 @@ export declare interface FormProps extends Form.Props {
  * Props of the {@link Form} React component.
  */
 declare interface FormProps_2 extends ActionsInterface, NavigationChildInterface {
+    /**
+     * Defines whether the Form.Items values will be preserved when user exits the screen.
+     * @defaultValue `false`
+     */
+    enableDrafts?: boolean;
     /**
      * The Form.Item elements of the form.
      */
@@ -3285,23 +3681,347 @@ export declare function getSelectedFinderItems(): Promise<FileSystemItem[]>;
 export declare function getSelectedText(): Promise<string>;
 
 /**
- * List of built-in icons that can be used for actions or list items.
+ * Displays {@link Grid.Section} or {@link Grid.Item}, optionally {@link Grid.Dropdown}.
+ *
+ * @remarks
+ * The grid uses built-in filtering by indexing the title of grid items and additionally keywords.
  *
  * @example
  * ```typescript
- * import { Icon, List } from "@raycast/api";
+ * import { Grid } from "@raycast/api";
+ *
+ * function DrinkDropdown(props: DrinkDropdownProps) {
+ *   const { isLoading = false, drinkTypes, onDrinkTypeChange } = props;
+ *   return (
+ *     <Grid.Dropdown
+ *       tooltip="Select Drink Type"
+ *       storeValue={true}
+ *       onChange={(newValue) => {
+ *         onDrinkTypeChange(newValue);
+ *       }}
+ *     >
+ *       <Grid.Dropdown.Section title="Alcoholic Beverages">
+ *         {drinkTypes.map((drinkType) => (
+ *           <Grid.Dropdown.Item key={drinkType.id} title={{ value: drinkType.name, tooltip: drinkType.definition }} value={drinkType.id} />
+ *         ))}
+ *       </Grid.Dropdown.Section>
+ *     </Grid.Dropdown>
+ *   );
+ * }
  *
  * export default function Command() {
+ *   const drinkTypes = [
+ *     { id: 1, name: 'Beer', definition: "an alcoholic drink made from yeast-fermented malt flavoured with hops" },
+ *     { id: 2, name: 'Wine', definition: "an alcoholic drink made from fermented grape juice" }];
+ *   const onDrinkTypeChange = (newValue) => {
+ *     console.log(newValue);
+ *   }
  *   return (
- *     <List>
- *       <List.Item title="Icon" icon={Icon.Circle} />
- *     </List>
+ *     <Grid
+ *       navigationTitle="Search Beers"
+ *       searchBarPlaceholder="Search your favorite drink"
+ *       searchBarAccessory={<DrinkDropdown drinkTypes={drinkTypes} onDrinkTypeChange={onDrinkTypeChange} />}
+ *     >
+ *       <Grid.Item title="Augustiner Helles" />
+ *       <Grid.Item title="Camden Hells" />
+ *       <Grid.Item title="Leffe Blonde" />
+ *       <Grid.Item title="Sierra Nevada IPA" />
+ *     </Grid>
  *   );
- * };
+ * }
  * ```
  */
-export declare enum Icon {
-    ArrowClockwise = "arrow-clockwise-16",
+export declare const Grid: FunctionComponent<GridProps> & GridMembers;
+
+export declare namespace Grid {
+    /**
+     * Props of the {@link Grid} React component.
+     */
+    export type Props = GridProps;
+    /**
+     * 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 number of items that should be displayed on a single row.
+     */
+    export type ItemSize = GridItemSize;
+    export namespace EmptyView {
+        export type Props = EmptyViewProps_2;
+    }
+    export namespace Dropdown {
+        /**
+         * Props of the {@link Grid.Dropdown} React component.
+         */
+        export type Props = DropdownProps_3;
+        export namespace Item {
+            /**
+             * Props of the {@link Grid.Dropdown.Item} React component.
+             */
+            export type Props = DropdownItemProps_3;
+        }
+        export namespace Section {
+            /**
+             * Props of the {@link Grid.Dropdown.Section} React component.
+             */
+            export type Props = DropdownSectionProps_3;
+        }
+    }
+    export namespace Item {
+        /**
+         * Props of the {@link Grid.Item} React component.
+         */
+        export type Props = ItemProps_2;
+    }
+    export namespace Section {
+        /**
+         * Props of the {@link Grid.Section} React component.
+         */
+        export type Props = SectionProps_3;
+    }
+}
+
+declare enum GridInset {
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+
+declare enum GridItemSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+
+declare interface GridMembers {
+    /**
+     * Enum representing the amount of space there should be between a {@link Grid.Item}'s content and its borders.
+     */
+    Inset: typeof GridInset;
+    /**
+     * Enum representing the size of the Grid's child {@link Grid.Item}s.
+     */
+    ItemSize: typeof GridItemSize;
+    /**
+     * 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.
+     *
+     * @remarks
+     * Raycast provides a default `EmptyView` that will be displayed if the {@link Grid} component either has no children,
+     * or if it has children, but none of them match the query in the search bar. This too can be overridden by passing
+     * an empty view alongside the other `Grid.Item`s.
+     *
+     * @example
+     * ```typescript
+     * import { useState } from "react";
+     * import { Grid } from "@raycast/api";
+     *
+     * export default function CommandWithCustomEmptyState() {
+     *   const [state, setState] = useState({ searchText: "", items: [] });
+     *
+     *   useEffect(() => {
+     *     // perform an API call that eventually populates `items`.
+     *   }, [state.searchText])
+     *
+     *   return (
+     *     <Grid
+     *       onSearchTextChange={(newValue) =>
+     *         setState((previous) => ({ ...previous, searchText: newValue }))
+     *       }
+     *     >
+     *       {state.searchText === "" && state.items.length === 0 ? (
+     *         <Grid.EmptyView
+     *           icon={{ source: "https://placekitten.com/500/500" }}
+     *           title="Type something to get started"
+     *         />
+     *       ) : (
+     *         state.items.map((item) => <Grid.Item key={item} title={item} />)
+     *       )}
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    EmptyView: typeof EmptyView_2;
+    /**
+     * A item in the {@link Grid}.
+     *
+     * @remarks
+     * This is one of the foundational UI components of Raycast. A grid item represents a single entity. It can be a
+     * GitHub pull request, a file, or anything else. You most likely want to perform actions on this item, so make it clear
+     * to the user what this grid item is about.
+     *
+     * @example
+     * ```typescript
+     * import { Icon, Grid } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Grid>
+     *       <Grid.Item icon={Icon.Star} title="Augustiner Helles" subtitle="0,5 Liter" />
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Item: typeof Item_2;
+    /**
+     * A group of related {@link Grid.Item}.
+     *
+     * @remarks
+     * Sections are a great way to structure your grid. For example, group GitHub issues with the same status and order them by priority.
+     * This way, users can quickly access what is most relevant.
+     *
+     * @example
+     * ```typescript
+     * import { Grid } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Grid>
+     *       <Grid.Section title="Lager">
+     *         <Grid.Item title="Camden Hells" />
+     *       </Grid.Section>
+     *       <Grid.Section title="IPA">
+     *         <Grid.Item title="Sierra Nevada IPA" />
+     *       </Grid.Section>
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Section: typeof Section_3;
+    /**
+     * A dropdown menu that will be shown in the right-hand-side of the search bar.
+     *
+     * @example
+     * ```typescript
+     * import { Grid } from "@raycast/api";
+     *
+     * function DrinkDropdown(props: DrinkDropdownProps) {
+     *   const { isLoading = false, drinkTypes, onDrinkTypeChange } = props;
+     *   return (
+     *     <Grid.Dropdown
+     *       tooltip="Select Drink Type"
+     *       disabled={isLoading}
+     *       storeValue={true}
+     *       onChange={(newValue) => {
+     *         onDrinkTypeChange(newValue);
+     *       }}
+     *     >
+     *       <Grid.Dropdown.Section title="Alcoholic Beverages">
+     *         {drinkTypes.map((drinkType) => (
+     *           <Grid.Dropdown.Item key={drinkType.id} title={drinkType.name} value={drinkType.id} />
+     *         ))}
+     *       </Grid.Dropdown.Section>
+     *     </Grid.Dropdown>
+     *   );
+     * }
+     *
+     * export default function Command() {
+     *   const drinkTypes = [{ id: 1, name: 'Beer' }, { id: 2, name: 'Wine' }];
+     *   const onDrinkTypeChange = (newValue) => {
+     *     console.log(newValue);
+     *   }
+     *   return (
+     *     <Grid
+     *       navigationTitle="Search Beers"
+     *       searchBarPlaceholder="Search your favorite drink"
+     *       searchBarAccessory={<DrinkDropdown drinkTypes={drinkTypes} onDrinkTypeChange={onDrinkTypeChange} />}
+     *     >
+     *       <Grid.Item title="Augustiner Helles" />
+     *       <Grid.Item title="Camden Hells" />
+     *       <Grid.Item title="Leffe Blonde" />
+     *       <Grid.Item title="Sierra Nevada IPA" />
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Dropdown: typeof Dropdown_3;
+}
+
+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;
+    /**
+     * The number of items that should be displayed on a single row.
+     *
+     * @defaultValue {@link Grid.ItemSize.Medium}
+     */
+    itemSize?: Grid.ItemSize;
+    /**
+     * 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.
+     */
+    inset?: Grid.Inset;
+    /**
+     * Callback triggered when the item selection in the grid changes.
+     */
+    onSelectionChange?: (id?: string) => void;
+    /**
+     * {@link Grid.Dropdown} that will be shown in the right-hand-side of the search bar.
+     */
+    searchBarAccessory?: ReactElement<DropdownProps_3> | undefined | null;
+    /**
+     * The text that will be displayed in the search bar.
+     */
+    searchText?: string;
+    /**
+     * Toggles Raycast filtering. When `true`, Raycast will use the query in the search bar to filter grid
+     * items. When `false`, the extension needs to take care of the filtering.
+     *
+     * @remarks
+     * Having this enabled when filtering items in the extension is unspecified behaviour.
+     *
+     * @defaultValue `false` when `onSearchTextChange` is specified, `true` otherwise.
+     */
+    enableFiltering?: boolean;
+    /**
+     * Placeholder text that will be shown in the search bar.
+     *
+     * @defaultValue `"Search value..."`
+     */
+    searchBarPlaceholder?: string;
+    /**
+     * Selects the item with the specified id.
+     */
+    selectedItemId?: string;
+    /**
+     * Defines whether the {@link Grid.Props.onSearchTextChange} will be triggered on every keyboard press or with a delay for throttling the events.
+     * Recommended to set to `true` when using custom filtering logic with asynchronous operations (e.g. network requests).
+     * @defaultValue `false`
+     */
+    throttle?: boolean;
+    /**
+     * Callback triggered when the search bar text changes.
+     *
+     * @remarks
+     * Specifying this implicitly toggles `enableFiltering` to false. To enable native filtering when using `onSearchTextChange`, explicitly set `enableFiltering` to true.
+     */
+    onSearchTextChange?: (text: string) => void;
+}
+
+/**
+ * List of built-in icons that can be used for actions or list items.
+ *
+ * @example
+ * ```typescript
+ * import { Icon, List } from "@raycast/api";
+ *
+ * export default function Command() {
+ *   return (
+ *     <List>
+ *       <List.Item title="Icon" icon={Icon.Circle} />
+ *     </List>
+ *   );
+ * };
+ * ```
+ */
+export declare enum Icon {
+    ArrowClockwise = "arrow-clockwise-16",
     TwoArrowsClockwise = "arrow-2-clockwise-16",
     ArrowRight = "arrow-right-16",
     Binoculars = "binoculars-16",
@@ -3538,11 +4258,22 @@ export declare type ImageSource = Image.Source;
  */
 declare const Item: FunctionComponent<ItemProps> & ItemMembers;
 
-declare interface ItemAccessory {
+/**
+ * See {@link Grid.Item}
+ */
+declare const Item_2: FunctionComponent<ItemProps_2>;
+
+declare type ItemAccessory = ({
     /**
      * An optional text that will be used as the label.
      */
     text?: string | undefined | null;
+} | {
+    /**
+     * An optional Date that will be used as the label. The date is formatted relatively to the current time (for example `new Date()` will be displayed as `"now"`, yesterday's Date will be displayed as "1d", etc.).
+     */
+    date?: Date | undefined | null;
+}) & {
     /**
      * An optional {@link Image.ImageLike} that will be used as the icon.
      * @remarks
@@ -3553,7 +4284,7 @@ declare interface ItemAccessory {
      * An optional tooltip shown when the accessory is hovered.
      */
     tooltip?: string | undefined | null;
-}
+};
 
 declare interface ItemMembers {
     /**
@@ -3631,6 +4362,62 @@ declare interface ItemProps extends ActionsInterface {
      * The `List.Item.Detail` to be rendered in the right side area when the parent List is showing details and the item is selected.
      */
     detail?: ReactNode;
+    /**
+     * Optional information to preview files with Quick Look. Toggle the preview ith {@link Action.ToggleQuickLook}.
+     *
+     * @remarks
+     * If no `name` is specified, the file name of the given path is used.
+     */
+    quickLook?: {
+        name?: string | null;
+        path: string;
+    };
+}
+
+declare interface ItemProps_2 extends ActionsInterface {
+    /**
+     * ID of the item. This string is passed to the `onSelectionChange` handler of the {@link Grid} when the item is selected.
+     * Make sure to assign each item a unique ID or a UUID will be auto generated.
+     */
+    id?: string;
+    /**
+     * An image or color, optionally with a tooltip, representing the content of the grid item.
+     */
+    content: Image.ImageLike | {
+        color: Color.ColorLike;
+    } | {
+        value: Image.ImageLike | {
+            color: Color.ColorLike;
+        };
+        tooltip: string;
+    };
+    /**
+     * An optional title displayed below the content.
+     */
+    title?: string;
+    /**
+     * An optional subtitle displayed below the title.
+     */
+    subtitle?: string;
+    /**
+     * An optional property used for providing additional indexable strings for search.
+     * When filtering the list in Raycast through the search bar, the keywords will be searched in addition to the title.
+     */
+    keywords?: string[];
+    /**
+     * Optional information to preview files with Quick Look. Toggle the preview ith {@link Action.ToggleQuickLook}.
+     *
+     * @remarks
+     * If no `name` is specified, the file name of the given path is used.
+     */
+    quickLook?: {
+        name?: string | null;
+        path: string;
+    };
+    /**
+     * An {@link ActionPanel} that will be updated for the selected grid item.
+     */
+    actions?: ReactNode | null;
 }
 
 export declare namespace Keyboard {
@@ -3748,6 +4535,11 @@ declare interface LabelProps_2 {
     text?: string;
 }
 
+/**
+ * The top-level props that a Command receives on launch
+ */
+export declare type LaunchProps = FormLaunchProps;
+
 /**
  * See {@link Detail.Metadata.Link}
  */
@@ -4383,12 +5175,12 @@ declare interface NavigationChildInterface {
 export declare namespace OAuth {
     export namespace PKCEClient {
         /**
-         * The options for creating a new {@link PKCEClient}.
+         * The options for creating a new {@link OAuth.PKCEClient}.
          */
         export interface Options {
             /**
              * The redirect method for the OAuth flow.
-             * Make sure to set this to the correct method for the provider, see {@link RedirectMethod} for more information.
+             * Make sure to set this to the correct method for the provider, see {@link OAuth.RedirectMethod} for more information.
              */
             redirectMethod: RedirectMethod;
             /**
@@ -4438,37 +5230,37 @@ export declare namespace OAuth {
         constructor(options: PKCEClient.Options);
         /**
          * Creates an authorization request for the provided authorization endpoint, client ID, and scopes.
-         * You need to first create the authorization request before calling {@link authorize}.
+         * You need to first create the authorization request before calling {@link OAuth.PKCEClient.authorize}.
          *
          * @remarks The generated code challenge for the PKCE request uses the S256 method.
          *
-         * @returns A promise for an {@link AuthorizationRequest} that you can use as input for {@link authorize}.
+         * @returns A promise for an {@link OAuth.AuthorizationRequest} that you can use as input for {@link OAuth.PKCEClient.authorize}.
          */
         authorizationRequest(options: AuthorizationRequestOptions): Promise<AuthorizationRequest>;
         /**
          * Starts the authorization and shows the OAuth overlay in Raycast.
-         * As parameter you can either directly use the returned request from {@link authorizationRequest},
-         * or customize the URL by extracting parameters from {@link AuthorizationRequest} and providing your own URL via {@link AuthorizationOptions}.
+         * As parameter you can either directly use the returned request from {@link OAuth.PKCEClient.authorizationRequest},
+         * or customize the URL by extracting parameters from {@link OAuth.AuthorizationRequest} and providing your own URL via {@link AuthorizationOptions}.
          * Eventually the URL will be used to open the authorization page of the provider in the web browser.
          *
-         * @returns A promise for an {@link AuthorizationResponse}, which contains the authorization code needed for the token exchange.
+         * @returns A promise for an {@link OAuth.AuthorizationResponse}, which contains the authorization code needed for the token exchange.
          * The promise is resolved when the user was redirected back from the provider's authorization page to the Raycast extension.
          */
         authorize(options: AuthorizationRequest | AuthorizationOptions): Promise<AuthorizationResponse>;
         private authorizationURL;
         /**
-         * Securely stores a {@link TokenSet} for the provider. Use this after fetching the access token from the provider.
-         * If the provider returns a a standard OAuth JSON token response, you can directly pass the {@link TokenResponse}.
-         * At a minimum, you need to set the {@link TokenSet.accessToken}, and typically you also set {@link TokenSet.refreshToken} and {@link TokenSet.isExpired}.
+         * Securely stores a {@link OAuth.TokenSet} for the provider. Use this after fetching the access token from the provider.
+         * If the provider returns a a standard OAuth JSON token response, you can directly pass the {@link OAuth.TokenResponse}.
+         * At a minimum, you need to set the {@link OAuth.TokenSet.accessToken}, and typically you also set {@link OAuth.TokenSet.refreshToken} and {@link OAuth.TokenSet.isExpired}.
          * Raycast automatically shows a logout preference for the extension when a token set was saved.
          *
-         * @remarks If you want to make use of the convenience {@link TokenSet.isExpired} method, the property {@link TokenSet.expiresIn} must be configured.
+         * @remarks If you want to make use of the convenience {@link OAuth.TokenSet.isExpired} method, the property {@link OAuth.TokenSet.expiresIn} must be configured.
          *
          * @returns A promise that resolves when the token set has been stored.
          */
         setTokens(options: TokenSetOptions | TokenResponse): Promise<void>;
         /**
-         * Retrieves the stored {@link TokenSet} for the client.
+         * Retrieves the stored {@link OAuth.TokenSet} for the client.
          * You can use this to initially check whether the authorization flow should be initiated or
          * the user is already logged in and you might have to refresh the access token.
          *
@@ -4476,7 +5268,7 @@ export declare namespace OAuth {
          */
         getTokens(): Promise<TokenSet | undefined>;
         /**
-         * Removes the stored {@link TokenSet} for the client.
+         * Removes the stored {@link OAuth.TokenSet} for the client.
          *
          * @remarks Raycast automatically shows a logout preference that removes the token set.
          * Use this method only if you need to provide an additional logout option in your extension or you want to remove the token set because of a migration.
@@ -4509,7 +5301,7 @@ export declare namespace OAuth {
         AppURI = "appURI"
     }
     /**
-     * The options for an authorization request via {@link PKCEClient.authorizationRequest}.
+     * The options for an authorization request via {@link OAuth.PKCEClient.authorizationRequest}.
      */
     export interface AuthorizationRequestOptions {
         /**
@@ -4533,8 +5325,8 @@ export declare namespace OAuth {
         extraParameters?: Record<string, string>;
     }
     /**
-     * Values of {@link AuthorizationRequest}.
-     * The PKCE client automatically generates the values for you and returns them for {@link PKCEClient.authorizationRequest}.
+     * Values of {@link OAuth.AuthorizationRequest}.
+     * The PKCE client automatically generates the values for you and returns them for {@link OAuth.PKCEClient.authorizationRequest}.
      */
     export interface AuthorizationRequestURLParams {
         /**
@@ -4555,9 +5347,9 @@ export declare namespace OAuth {
         redirectURI: string;
     }
     /**
-     * The request returned by {@link PKCEClient.authorizationRequest}.
-     * Can be used as direct input to {@link PKCEClient.authorize}, or
-     * to extract parameters for constructing a custom URL in {@link AuthorizationOptions}.
+     * The request returned by {@link OAuth.PKCEClient.authorizationRequest}.
+     * Can be used as direct input to {@link OAuth.PKCEClient.authorize}, or
+     * to extract parameters for constructing a custom URL in {@link OAuth.AuthorizationOptions}.
      */
     export interface AuthorizationRequest extends AuthorizationRequestURLParams {
         /**
@@ -4566,8 +5358,8 @@ export declare namespace OAuth {
         toURL(): string;
     }
     /**
-     * Options for customizing {@link PKCEClient.authorize}.
-     * You can use values from {@link AuthorizationRequest} to build your own URL.
+     * Options for customizing {@link OAuth.PKCEClient.authorize}.
+     * You can use values from {@link OAuth.AuthorizationRequest} to build your own URL.
      */
     export interface AuthorizationOptions {
         /**
@@ -4576,7 +5368,7 @@ export declare namespace OAuth {
         url: string;
     }
     /**
-     * The response returned by {@link PKCEClient.authorize}, containing the authorization code after the provider redirect.
+     * The response returned by {@link OAuth.PKCEClient.authorize}, containing the authorization code after the provider redirect.
      * You can then exchange the authorization code for an access token using the provider's token endpoint.
      */
     export interface AuthorizationResponse {
@@ -4588,7 +5380,7 @@ export declare namespace OAuth {
     /**
      * Describes the TokenSet created from an OAuth provider's token response.
      * The `accessToken` is the only required parameter but typically OAuth providers also return a refresh token, an expires value, and the scope.
-     * Securely store a token set via {@link PKCEClient.setTokens} and retrieve it via {@link PKCEClient.getTokens}.
+     * Securely store a token set via {@link OAuth.PKCEClient.setTokens} and retrieve it via {@link OAuth.PKCEClient.getTokens}.
      */
     export interface TokenSet {
         /**
@@ -4614,7 +5406,7 @@ export declare namespace OAuth {
          */
         scope?: string;
         /**
-         * The date when the token set was stored via {@link PKCEClient.setTokens}.
+         * The date when the token set was stored via {@link OAuth.PKCEClient.setTokens}.
          */
         updatedAt: Date;
         /**
@@ -4625,7 +5417,7 @@ export declare namespace OAuth {
         isExpired(): boolean;
     }
     /**
-     * Options for a {@link TokenSet} to store via {@link PKCEClient.setTokens}.
+     * Options for a {@link OAuth.TokenSet} to store via {@link OAuth.PKCEClient.setTokens}.
      */
     export interface TokenSetOptions {
         /**
@@ -4651,7 +5443,7 @@ export declare namespace OAuth {
     }
     /**
      * Defines the standard JSON response for an OAuth token request.
-     * The response can be directly used to store a {@link TokenSet} via {@link PKCEClient.setTokens}.
+     * The response can be directly used to store a {@link OAuth.TokenSet} via {@link OAuth.PKCEClient.setTokens}.
      */
     export interface TokenResponse {
         /**
@@ -5132,6 +5924,11 @@ declare const Section: FunctionComponent<SectionProps>;
  */
 declare const Section_2: FunctionComponent<SectionProps_2>;
 
+/**
+ * See {@link Grid.Section}
+ */
+declare const Section_3: FunctionComponent<SectionProps_3>;
+
 declare type SectionChildren = ReactElement<ActionProps> | ReactElement<ActionProps>[] | ReactElement<SubmenuProps> | Array<ReactElement<SubmenuProps>> | Array<ReactElement<SubmenuProps> | ReactElement<ActionProps>> | null;
 
 /**
@@ -5155,7 +5952,7 @@ declare interface SectionProps_2 {
     children?: ReactNode;
     /**
      * ID of the section.
-     * @deprecated - This is an internal prop which not not have been exposed. You can safely remove it.
+     * @deprecated - This is an internal prop which should not have been exposed. You can safely remove it.
      */
     id?: string;
     /**
@@ -5168,6 +5965,21 @@ declare interface SectionProps_2 {
     subtitle?: string;
 }
 
+declare interface SectionProps_3 {
+    /**
+     * The {@link Grid.Item} elements of the section.
+     */
+    children?: ReactNode;
+    /**
+     * Title displayed above the section.
+     */
+    title?: string;
+    /**
+     * An optional subtitle displayed next to the title of the section.
+     */
+    subtitle?: string;
+}
+
 /**
  * See {@link Form.Separator}
  */
@@ -5364,7 +6176,7 @@ declare type SubmenuChildren = ReactElement<SectionProps> | ReactElement<Section
 declare interface SubmenuProps {
     /**
      * ID of the submenu.
-     * @deprecated - This is an internal prop which not not have been exposed. You can safely remove it.
+     * @deprecated - This is an internal prop which should not have been exposed. You can safely remove it.
      */
     id?: string;
     /**
@@ -5394,6 +6206,23 @@ declare interface SubmenuProps {
      * Use {@link ActionPanel.Submenu} as parent when specifying sub-menu's children to make code is more readable.
      */
     children?: ReactNode;
+    /**
+     * Callback that is triggered when the Submenu is opened.
+     *
+     * This callback can be used to fetch its content lazily:
+     * ```js
+     * function LazySubmenu() {
+     *   const [content, setContent] = useState(null)
+     *
+     *   return (
+     *     <ActionPanel.Submenu onOpen={() => fetchSubmenuContent().then(setContent)}>
+     *       {content}
+     *     </ActionPanel.Submenu>
+     *   )
+     * }
+     * ```
+     */
+    onOpen?: () => void;
 }
 
 /**
@@ -5577,6 +6406,12 @@ declare interface TextAreaProps extends FormItemProps_2<string> {
      * Placeholder text shown in the text area.
      */
     placeholder?: string;
+    /**
+     * Whether markdown will be highlighted in the TextArea or not.
+     * When enabled, markdown shortcuts starts to work for the TextArea (pressing `⌘ + B` will add `**bold**` around the selected text, `⌘ + I` will make the selected text italic, etc.)
+     * @defaultValue `false`
+     */
+    enableMarkdown?: boolean;
 }
 
 /**
@@ -5762,6 +6597,34 @@ export declare interface ToastOptions extends Toast.Options {
  */
 export declare const ToastStyle: typeof Toast.Style;
 
+/**
+ * See {@link Action.ToggleQuickLook}
+ */
+declare const ToggleQuickLook: FunctionComponent<ToggleQuickLookProps>;
+
+/**
+ * See {@link Action.Open.Props}
+ */
+declare interface ToggleQuickLookProps {
+    /**
+     * The title for the action.
+     * @defaultValue `"Quick Look"`
+     */
+    title?: string;
+    /**
+     * The icon displayed for the action.
+     * @defaultValue {@link Icon.Eye}
+     */
+    icon?: Image.ImageLike;
+    /**
+     * The keyboard shortcut for the action.
+     *
+     * @remarks
+     * The recommended system-wide keyboard shortcut is "⌘ + Y".
+     */
+    shortcut?: Keyboard.Shortcut;
+}
+
 /**
  * See {@link Action.Trash}
  */