@raycast/api 1.30.2 → 1.32.0

package/types/api/components/List.d.ts

@@ -1,579 +0,0 @@
-import { ReactElement, ReactNode } from "react";
-import PropTypes from "prop-types";
-import { Image } from "../ui";
-import { ActionsInterface, NavigationChildInterface } from "./types";
-/**
- * Displays {@link List.Section} or {@link List.Item}, optionally {@link List.Dropdown}.
- *
- * @remarks
- * The list uses built-in filtering by indexing the title of list items and additionally keywords.
- *
- * @example
- * ```typescript
- * import { List } from "@raycast/api";
- *
- * function DrinkDropdown(props: DrinkDropdownProps) {
- *   const { isLoading = false, drinkTypes, onDrinkTypeChange } = props;
- *   return (
- *     <List.Dropdown
- *       tooltip="Select Drink Type"
- *       storeValue={true}
- *       onChange={(newValue) => {
- *         onDrinkTypeChange(newValue);
- *       }}
- *     >
- *       <List.Dropdown.Section title="Alcoholic Beverages">
- *         {drinkTypes.map((drinkType) => (
- *           <List.Dropdown.Item key={drinkType.id} title={drinkType.name} value={drinkType.id} />
- *         ))}
- *       </List.Dropdown.Section>
- *     </List.Dropdown>
- *   );
- * }
- *
- * export default function Command() {
- *   const drinkTypes = [{ id: 1, name: 'Beer' }, { id: 2, name: 'Wine' }];
- *   const onDrinkTypeChange = (newValue) => {
- *     console.log(newValue);
- *   }
- *   return (
- *     <List
- *       navigationTitle="Search Beers"
- *       searchBarPlaceholder="Search your favorite drink"
- *       searchBarAccessory={<DrinkDropdown drinkTypes={drinkTypes} onDrinkTypeChange={onDrinkTypeChange} />}
- *     >
- *       <List.Item title="Augustiner Helles" />
- *       <List.Item title="Camden Hells" />
- *       <List.Item title="Leffe Blonde" />
- *       <List.Item title="Sierra Nevada IPA" />
- *     </List>
- *   );
- * }
- * ```
- */
-export declare function List(props: List.Props): ReactElement<List.Props>;
-export declare namespace List {
-    var propTypes: {
-        onSelectionChange: PropTypes.Requireable<(...args: any[]) => any>;
-        searchBarAccessory: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        searchText: PropTypes.Requireable<string>;
-        enableFiltering: PropTypes.Requireable<boolean>;
-        searchBarPlaceholder: PropTypes.Requireable<string>;
-        selectedItemId: PropTypes.Requireable<string>;
-        throttle: PropTypes.Requireable<boolean>;
-        onSearchTextChange: PropTypes.Requireable<(...args: any[]) => any>;
-        isLoading: PropTypes.Requireable<boolean>;
-        navigationTitle: PropTypes.Requireable<string>;
-    };
-    var displayName: string;
-}
-/**
- * See {@link List.Section}
- */
-declare function ListSection(props: List.Section.Props): ReactElement<List.Section.Props>;
-declare namespace ListSection {
-    var propTypes: {
-        id: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        subtitle: PropTypes.Requireable<string>;
-    };
-    var displayName: string;
-}
-/**
- * See {@link List.Item}
- */
-declare function ListItem(props: List.Item.Props): ReactElement<List.Item.Props>;
-declare namespace ListItem {
-    var propTypes: {
-        id: PropTypes.Requireable<string>;
-        title: PropTypes.Validator<string>;
-        subtitle: PropTypes.Requireable<string>;
-        accessoryTitle: PropTypes.Requireable<string>;
-        keywords: PropTypes.Requireable<string[]>;
-        icon: PropTypes.Requireable<string | Required<PropTypes.InferProps<{
-            fileIcon: PropTypes.Validator<string>;
-        }>> | PropTypes.InferProps<{
-            source: PropTypes.Requireable<string | PropTypes.InferProps<{
-                light: PropTypes.Validator<string>;
-                dark: PropTypes.Validator<string>;
-            }>>;
-            fallback: PropTypes.Requireable<string | PropTypes.InferProps<{
-                light: PropTypes.Validator<string>;
-                dark: PropTypes.Validator<string>;
-            }>>;
-            mask: PropTypes.Requireable<Image.Mask>;
-            tintColor: PropTypes.Requireable<string | PropTypes.InferProps<{
-                light: PropTypes.Validator<string>;
-                dark: PropTypes.Validator<string>;
-                adjustContrast: PropTypes.Requireable<boolean>;
-            }>>;
-        }>>;
-    };
-    var displayName: string;
-}
-/**
- * See {@link List.Item.Detail}
- */
-declare function ListItemDetail(props: List.Item.Detail.Props): ReactElement<List.Item.Detail.Props>;
-declare namespace ListItemDetail {
-    var propTypes: {
-        isLoading: PropTypes.Requireable<boolean>;
-        markdown: PropTypes.Requireable<string>;
-    };
-    var displayName: string;
-}
-/**
- * See {@link List.Dropdown}
- */
-declare function ListDropdown(props: List.Dropdown.Props): ReactElement<List.Dropdown.Props>;
-declare namespace ListDropdown {
-    var propTypes: {
-        id: PropTypes.Requireable<string>;
-        tooltip: PropTypes.Validator<string>;
-        storeValue: (props: List.Dropdown.Props, propName: keyof List.Dropdown.Props, componentName: string, location: string, propFullName: string) => Error;
-        value: PropTypes.Requireable<string>;
-        defaultValue: PropTypes.Requireable<string>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    var displayName: string;
-}
-/**
- * See {@link List.Dropdown.Section}
- */
-declare function ListDropdownSection(props: List.Dropdown.Section.Props): ReactElement<List.Dropdown.Section.Props>;
-declare namespace ListDropdownSection {
-    var propTypes: {
-        title: PropTypes.Requireable<string>;
-    };
-    var displayName: string;
-}
-/**
- * See {@link List.Dropdown.Item}
- */
-declare function ListDropdownItem(props: List.Dropdown.Item.Props): ReactElement<List.Dropdown.Item.Props>;
-declare namespace ListDropdownItem {
-    var propTypes: {
-        value: PropTypes.Requireable<string>;
-        title: PropTypes.Validator<string>;
-        icon: PropTypes.Requireable<string | Required<PropTypes.InferProps<{
-            fileIcon: PropTypes.Validator<string>;
-        }>> | PropTypes.InferProps<{
-            source: PropTypes.Requireable<string | PropTypes.InferProps<{
-                light: PropTypes.Validator<string>;
-                dark: PropTypes.Validator<string>;
-            }>>;
-            fallback: PropTypes.Requireable<string | PropTypes.InferProps<{
-                light: PropTypes.Validator<string>;
-                dark: PropTypes.Validator<string>;
-            }>>;
-            mask: PropTypes.Requireable<Image.Mask>;
-            tintColor: PropTypes.Requireable<string | PropTypes.InferProps<{
-                light: PropTypes.Validator<string>;
-                dark: PropTypes.Validator<string>;
-                adjustContrast: PropTypes.Requireable<boolean>;
-            }>>;
-        }>>;
-    };
-    var displayName: string;
-}
-export declare namespace List {
-    /**
-     * A item in the {@link List}.
-     *
-     * @remarks
-     * This is one of the foundational UI components of Raycast. A list 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 list item is about.
-     *
-     * @example
-     * ```typescript
-     * import { Icon, List } from "@raycast/api";
-     *
-     * export default function Command() {
-     *   return (
-     *     <List>
-     *       <List.Item icon={Icon.Star} title="Augustiner Helles" subtitle="0,5 Liter" accessoryTitle="Germany" />
-     *     </List>
-     *   );
-     * }
-     * ```
-     */
-    const Item: typeof ListItem;
-    /**
-     * A group of related {@link List.Item}.
-     *
-     * @remarks
-     * Sections are a great way to structure your list. 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 { List } from "@raycast/api";
-     *
-     * export default function Command() {
-     *   return (
-     *     <List>
-     *       <List.Section title="Lager">
-     *         <List.Item title="Camden Hells" />
-     *       </List.Section>
-     *       <List.Section title="IPA">
-     *         <List.Item title="Sierra Nevada IPA" />
-     *       </List.Section>
-     *     </List>
-     *   );
-     * }
-     * ```
-     */
-    const Section: typeof ListSection;
-    /**
-     * A dropdown menu that will be shown in the right-hand-side of the search bar.
-     *
-     * @example
-     * ```typescript
-     * import { List } from "@raycast/api";
-     *
-     * function DrinkDropdown(props: DrinkDropdownProps) {
-     *   const { isLoading = false, drinkTypes, onDrinkTypeChange } = props;
-     *   return (
-     *     <List.Dropdown
-     *       tooltip="Select Drink Type"
-     *       disabled={isLoading}
-     *       storeValue={true}
-     *       onChange={(newValue) => {
-     *         onDrinkTypeChange(newValue);
-     *       }}
-     *     >
-     *       <List.Dropdown.Section title="Alcoholic Beverages">
-     *         {drinkTypes.map((drinkType) => (
-     *           <List.Dropdown.Item key={drinkType.id} title={drinkType.name} value={drinkType.id} />
-     *         ))}
-     *       </List.Dropdown.Section>
-     *     </List.Dropdown>
-     *   );
-     * }
-     *
-     * export default function Command() {
-     *   const drinkTypes = [{ id: 1, name: 'Beer' }, { id: 2, name: 'Wine' }];
-     *   const onDrinkTypeChange = (newValue) => {
-     *     console.log(newValue);
-     *   }
-     *   return (
-     *     <List
-     *       navigationTitle="Search Beers"
-     *       searchBarPlaceholder="Search your favorite drink"
-     *       searchBarAccessory={<DrinkDropdown drinkTypes={drinkTypes} onDrinkTypeChange={onDrinkTypeChange} />}
-     *     >
-     *       <List.Item title="Augustiner Helles" />
-     *       <List.Item title="Camden Hells" />
-     *       <List.Item title="Leffe Blonde" />
-     *       <List.Item title="Sierra Nevada IPA" />
-     *     </List>
-     *   );
-     * }
-     * ```
-     */
-    const Dropdown: typeof ListDropdown;
-    /**
-     * Props of the {@link List} React component.
-     */
-    interface Props extends ActionsInterface, NavigationChildInterface {
-        /**
-         * List sections or items. If {@link List.Item} elements are specified, a default section is automatically created.
-         */
-        children?: ReactNode;
-        /**
-         * Callback triggered when the item selection in the list changes.
-         */
-        onSelectionChange?: (id?: string) => void;
-        /**
-         * {@link List.Dropdown} that will be shown in the right-hand-side of the search bar.
-         */
-        searchBarAccessory?: ReactElement<List.Dropdown.Props> | null | boolean;
-        /**
-         * 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 list
-         * 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 ListProps.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;
-        /**
-         * Whether the List should have an area on the right side of the items to show additional details about the selected item.
-         *
-         * When true, it is recommended not to show any accessories on the `List.Item` and instead show the additional information in the `List.Item.Detail` view.
-         */
-        isShowingDetail?: boolean;
-    }
-    namespace Item {
-        /**
-         * Props of the {@link List.Item} React component.
-         */
-        interface Props extends ActionsInterface {
-            /**
-             * ID of the item.
-             * Make sure to assign each item a unique ID or a UUID will be auto generated.
-             */
-            id?: string;
-            /**
-             * The main title displayed for that item.
-             */
-            title: string;
-            /**
-             * An optional subtitle displayed next to the main 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[];
-            /**
-             * A optional icon displayed for the list item.
-             */
-            icon?: Image.ImageLike;
-            /**
-             * A optional icon displayed as accessory for the list item.
-             */
-            accessoryIcon?: Image.ImageLike;
-            /**
-             * An additional title displayed for the item.
-             */
-            accessoryTitle?: string;
-            /**
-             * An {@link ActionPanel} that will be updated for the selected list item.
-             */
-            actions?: ReactNode | null;
-            /**
-             * 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;
-        }
-        namespace Detail {
-            /**
-             * Props of the {@link List.Item.Detail} React component.
-             */
-            interface Props {
-                /**
-                 * Indicates whether a loading bar should be shown or hidden above the detail
-                 *
-                 * @defaultValue false
-                 */
-                isLoading?: boolean;
-                /**
-                 * The CommonMark string to be rendered in the right side area when the parent List is showing details and the item is selected.
-                 */
-                markdown?: string | null;
-            }
-        }
-    }
-    namespace Section {
-        /**
-         * Props of the {@link List.Section} React component.
-         */
-        interface Props {
-            /**
-             * The {@link List.Item} elements of the section.
-             */
-            children?: ReactNode;
-            /**
-             * ID of the section.
-             * Make sure to assign each section a unique ID or a UUID will be auto generated.
-             */
-            id?: string;
-            /**
-             * Title displayed above the section.
-             */
-            title?: string;
-            /**
-             * An optional subtitle displayed next to the title of the section.
-             */
-            subtitle?: string;
-        }
-    }
-    namespace Dropdown {
-        /**
-         * Props of the {@link List.Dropdown} React component.
-         */
-        interface Props {
-            /**
-             * 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;
-            /**
-             * 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.
-             * @important If you're using `storeValue` and configured it as `true` _and_ a {@link List.Dropdown.Item} with the same value exists, then it will be selected.
-             * @important If you configure `value` at the same time as `defaultValue`, the `value` will have precedence over `defaultValue`.
-             */
-            defaultValue?: string;
-            /**
-             * List sections or items. If {@link List.Dropdown.Item} elements are specified, a default section is automatically created.
-             */
-            children?: ReactNode;
-            /**
-             * Callback triggered when the list item selection changes.
-             */
-            onChange?: (newValue: string) => void;
-        }
-        namespace Section {
-            /**
-             * Props of the {@link List.Dropdown.Section} React component.
-             */
-            interface Props {
-                /**
-                 * The item elements of the section.
-                 */
-                children?: ReactNode;
-                /**
-                 * Title displayed above the section
-                 */
-                title?: string;
-            }
-        }
-        namespace Item {
-            /**
-             * Props of the {@link List.Dropdown.Item} React component.
-             */
-            interface Props {
-                /**
-                 * 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;
-                /**
-                 * A optional icon displayed for the item.
-                 */
-                icon?: Image.ImageLike;
-            }
-        }
-    }
-}
-declare namespace ListDropdown {
-    /**
-     * Visually separated group of dropdown items in a {@link List.Dropdown}.
-     *
-     * @remarks
-     * Use sections to group related dropdown items together.
-     *
-     * @example
-     * ```typescript
-     * import { List } from "@raycast/api";
-     *
-     * export default function Command() {
-     *   return (
-     *     <List searchBarAccessory={
-     *       <List.Dropdown tooltip="Dropdown With Sections">
-     *         <List.Dropdown.Section title="First Section">
-     *           <List.Dropdown.Item title="One" value="one" />
-     *         </List.Dropdown.Section>
-     *         <List.Dropdown.Section title="Second Section">
-     *           <List.Dropdown.Item title="Two" value="two" />
-     *         </List.Dropdown.Section>
-     *       </List.Dropdown>
-     *     }>
-     *       <List.Item title="Item in the Main List">
-     *     </List>
-     *   );
-     * }
-     * ```
-     */
-    const Section: typeof ListDropdownSection;
-    /**
-     * A dropdown item in a {@link List.Dropdown}
-     *
-     * @example
-     * ```typescript
-     * import { List } from "@raycast/api";
-     *
-     * export default function Command() {
-     *     return (
-     *       <List searchBarAccessory={
-     *         <List.Dropdown tooltip="Dropdown With Items">
-     *           <List.Dropdown.Item title="One" value="one" />
-     *           <List.Dropdown.Item title="Two" value="two" />
-     *           <List.Dropdown.Item title="Three" value="three" />
-     *         </List.Dropdown>
-     *       }>
-     *         <List.Item title="Item in the Main List">
-     *       </List>
-     *   );
-     * }
-     * ```
-     */
-    const Item: typeof ListDropdownItem;
-}
-declare namespace ListItem {
-    /**
-     * A Detail view that will be shown in the right-hand-side of the List.
-     *
-     * @example
-     * ```typescript
-     * import { List } from "@raycast/api";
-     *
-     * export default function Command() {
-     *   return (
-     *     <List isShowingDetail>
-     *       <List.Item
-     *         title="Pikachu"
-     *         subtitle="Electric"
-     *         detail={<List.Item.Detail markdown="![Illustration](https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png)" />}
-     *       />
-     *     </List>
-     *   );
-     * }
-     * ```
-     */
-    const Detail: typeof ListItemDetail;
-}
-export {};