@raycast/api 1.36.1 → 1.37.0

package/api.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;
+    }
 }
 
 /**
@@ -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;
 }
 
 /**
@@ -2007,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.
@@ -2637,9 +2785,37 @@ export declare interface FormDropdownSectionProps extends Form.Dropdown.Section.
 
 /**
  * An interface describing Form events in callbacks
- * @beta
+ *
+ * @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 interface FormEvent<T extends FormValue_2> {
+declare type FormEvent<T extends FormValue_2> = {
     /**
      * An interface containing target data related to the event
      */
@@ -2653,7 +2829,18 @@ declare interface FormEvent<T extends FormValue_2> {
          */
         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.
@@ -2678,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.
      */
@@ -2704,11 +2896,13 @@ declare interface FormItemProps_2<T extends FormValue_2> {
      */
     onChange?: (newValue: T) => void;
     /**
-     * The callback which will be triggered when the item loses focus.
-     * The `event` object contains data with {@link FormItemProps.id} and current {@link FormItemProps.value} for the item.
-     * @beta
+     * 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;
 }
 
 /**
@@ -2786,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.
@@ -3227,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.
      */
@@ -3648,7 +3858,7 @@ declare interface GridMembers {
      * export default function Command() {
      *   return (
      *     <Grid>
-     *       <Grid.Item icon={Icon.Star} title="Augustiner Helles" subtitle="0,5 Liter" accessories={[{ text: "Germany" }]} />
+     *       <Grid.Item icon={Icon.Star} title="Augustiner Helles" subtitle="0,5 Liter" />
      *     </Grid>
      *   );
      * }
@@ -4053,11 +4263,17 @@ declare const Item: FunctionComponent<ItemProps> & ItemMembers;
  */
 declare const Item_2: FunctionComponent<ItemProps_2>;
 
-declare interface ItemAccessory {
+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
@@ -4068,7 +4284,7 @@ declare interface ItemAccessory {
      * An optional tooltip shown when the accessory is hovered.
      */
     tooltip?: string | undefined | null;
-}
+};
 
 declare interface ItemMembers {
     /**
@@ -4146,6 +4362,16 @@ 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 {
@@ -4155,31 +4381,42 @@ declare interface ItemProps_2 extends ActionsInterface {
      */
     id?: string;
     /**
-     * An image, optionally with a tooltip, representing the content of the grid item.
+     * An image or color, optionally with a tooltip, representing the content of the grid item.
      */
     content: Image.ImageLike | {
-        value: Image.ImageLike;
+        color: Color.ColorLike;
+    } | {
+        value: Image.ImageLike | {
+            color: Color.ColorLike;
+        };
         tooltip: string;
     };
     /**
-     * The main title displayed for that item, optionally with a tooltip.
+     * An optional title displayed below the content.
      */
-    title?: string | {
-        value: string;
-        tooltip: string;
-    };
+    title?: string;
     /**
-     * An optional subtitle displayed next to the main title, optionally with a tooltip.
+     * An optional subtitle displayed below the title.
      */
-    subtitle?: string | {
-        value: string;
-        tooltip: string;
-    };
+    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;
 }
 
@@ -4298,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}
  */
@@ -5964,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;
 }
 
 /**
@@ -6147,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;
 }
 
 /**
@@ -6332,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}
  */

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "@raycast/api",
-  "version": "1.36.1",
+  "version": "1.37.0",
   "description": "Build extensions for Raycast with React and Node.js.",
   "author": "Raycast Technologies Ltd.",
   "homepage": "https://developers.raycast.com",
   "license": "MIT",
   "types": "types/index.d.ts",
-  "peerDependencies": {
-    "react": "17.0.2",
-    "react-reconciler": "0.26.2"
+  "dependencies": {
+    "@types/node": "16.10.3",
+    "@types/react": "18.0.9",
+    "react": "18.1.0",
+    "react-reconciler": "0.28.0"
   },
   "bin": {
     "ray": "./bin/ray"

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;
+    }
 }
 
 /**
@@ -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;
 }
 
 /**
@@ -2007,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.
@@ -2635,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.
  */
@@ -2658,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.
      */
@@ -2683,7 +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;
 }
 
 /**
@@ -2761,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.
@@ -3202,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.
      */
@@ -3623,7 +3858,7 @@ declare interface GridMembers {
      * export default function Command() {
      *   return (
      *     <Grid>
-     *       <Grid.Item icon={Icon.Star} title="Augustiner Helles" subtitle="0,5 Liter" accessories={[{ text: "Germany" }]} />
+     *       <Grid.Item icon={Icon.Star} title="Augustiner Helles" subtitle="0,5 Liter" />
      *     </Grid>
      *   );
      * }
@@ -4028,11 +4263,17 @@ declare const Item: FunctionComponent<ItemProps> & ItemMembers;
  */
 declare const Item_2: FunctionComponent<ItemProps_2>;
 
-declare interface ItemAccessory {
+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
@@ -4043,7 +4284,7 @@ declare interface ItemAccessory {
      * An optional tooltip shown when the accessory is hovered.
      */
     tooltip?: string | undefined | null;
-}
+};
 
 declare interface ItemMembers {
     /**
@@ -4121,6 +4362,16 @@ 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 {
@@ -4130,31 +4381,42 @@ declare interface ItemProps_2 extends ActionsInterface {
      */
     id?: string;
     /**
-     * An image, optionally with a tooltip, representing the content of the grid item.
+     * An image or color, optionally with a tooltip, representing the content of the grid item.
      */
     content: Image.ImageLike | {
-        value: Image.ImageLike;
+        color: Color.ColorLike;
+    } | {
+        value: Image.ImageLike | {
+            color: Color.ColorLike;
+        };
         tooltip: string;
     };
     /**
-     * The main title displayed for that item, optionally with a tooltip.
+     * An optional title displayed below the content.
      */
-    title?: string | {
-        value: string;
-        tooltip: string;
-    };
+    title?: string;
     /**
-     * An optional subtitle displayed next to the main title, optionally with a tooltip.
+     * An optional subtitle displayed below the title.
      */
-    subtitle?: string | {
-        value: string;
-        tooltip: string;
-    };
+    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;
 }
 
@@ -4273,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}
  */
@@ -5939,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;
 }
 
 /**
@@ -6122,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;
 }
 
 /**
@@ -6307,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}
  */