@raycast/api 1.26.3 → 1.27.0

package/package.json

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

package/types/index.d.ts

@@ -907,12 +907,12 @@ export interface FormValues {
  */
 export interface FormProps extends ActionsInterface, NavigationChildInterface {
     /**
-     * The {@link FormItemElement} elements of the form.
+     * The Form.Item elements of the form.
      */
     children?: ReactElement<FormItemProps<FormValue>> | Array<ReactElement<FormItemProps<FormValue>>> | null;
 }
 /**
- * Shows a list of form items such as {@link FormViewTextField}, {@link FormViewCheckbox} or {@link FormViewDropdown}.
+ * Shows a list of form items such as {@link Form.TextField}, {@link Form.Checkbox} or {@link Form.Dropdown}.
  *
  * @category User Interface
  * @subcategory Form
@@ -937,7 +937,7 @@ export namespace Form {
     var TagPickerItem: typeof FormTagPickerItem;
 }
 /**
- * Props of the {@link Form.Item} React component.
+ * Props of the Form.Item React component.
  *
  * @category User Interface
  * @subcategory Form
@@ -995,7 +995,13 @@ export interface FormTextFieldProps extends FormItemProps<string> {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Name" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.TextField id="name" defaultValue="Steve" />
  *     </Form>
  *   );
@@ -1010,11 +1016,17 @@ export interface FormTextFieldProps extends FormItemProps<string> {
  * 
  *
  * export default function Command() {
- *   const [text, setText] = useState<string>();
+ *   const [name, setName] = useState<string>();
  *
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
- *       <Form.TextField id="textfield" value={text} onChange={setText} />
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Name" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
+ *       <Form.TextField id="name" value={name} onChange={setName} />
  *     </Form>
  *   );
  * }
@@ -1063,7 +1075,13 @@ export interface FormTextAreaProps extends FormItemProps<string> {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Description" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.TextArea id="description" defaultValue={DESCRIPTION} />
  *     </Form>
  *   );
@@ -1078,11 +1096,17 @@ export interface FormTextAreaProps extends FormItemProps<string> {
  * 
  *
  * export default function Command() {
- *   const [text, setText] = useState<string>();
+ *   const [description, setDescription] = useState<string>();
  *
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
- *       <Form.TextArea id="textarea" value={text} onChange={setText} />
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Description" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
+ *       <Form.TextArea id="description" value={description} onChange={setDescription} />
  *     </Form>
  *   );
  * }
@@ -1127,8 +1151,14 @@ export interface FormCheckboxProps extends FormItemProps<boolean> {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
- *       <Form.Checkbox id="checkbox" label="Are you happy?" defaultValue={true} />
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Answer" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
+ *       <Form.Checkbox id="answer" label="Are you happy?" defaultValue={true} />
  *     </Form>
  *   );
  * }
@@ -1145,8 +1175,14 @@ export interface FormCheckboxProps extends FormItemProps<boolean> {
  *   const [checked, setChecked] = useState(true);
  *
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
- *       <Form.Checkbox id="checkbox" label="Do you like orange juice?" value={checked} onChange={setChecked} />
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Answer" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
+ *       <Form.Checkbox id="answer" label="Do you like orange juice?" value={checked} onChange={setChecked} />
  *     </Form>
  *   );
  * }
@@ -1187,7 +1223,13 @@ export interface FormDatePickerProps extends FormItemProps<Date> {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Form" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.DatePicker id="dateOfBirth" title="Date of Birth" defaultValue={new Date(1955, 1, 24)} />
  *     </Form>
  *   );
@@ -1205,7 +1247,13 @@ export interface FormDatePickerProps extends FormItemProps<Date> {
  *   const [date, setDate] = useState<Date>();
  *
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Form" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.DatePicker id="launchDate" title="Launch Date" value={date} onChange={setDate} />
  *     </Form>
  *   );
@@ -1245,7 +1293,13 @@ export interface FormSeparatorProps {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Form" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.TextField id="textfield" />
  *       <Form.Separator />
  *       <Form.TextArea id="textarea" />
@@ -1284,7 +1338,13 @@ export interface FormDropdownProps extends FormItemProps<string> {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Favorite" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.Dropdown id="emoji" title="Favorite Emoji" defaultValue="lol">
  *         <Form.Dropdown.Item value="poop" title="Pile of poop" icon="💩" />
  *         <Form.Dropdown.Item value="rocket" title="Rocket" icon="🚀" />
@@ -1306,7 +1366,13 @@ export interface FormDropdownProps extends FormItemProps<string> {
  *   const [programmingLanguage, setProgrammingLanguage] = useState<string>("typescript");
  *
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Favorite" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.Dropdown
  *         id="dropdown"
  *         title="Favorite Language"
@@ -1371,7 +1437,13 @@ export interface FormDropdownSectionProps {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Favorite" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.Dropdown id="food" title="Favorite Food">
  *         <Form.Dropdown.Section title="Fruits">
  *           <Form.Dropdown.Item value="apple" title="Apple" icon="🍎" />
@@ -1428,7 +1500,13 @@ export interface FormDropdownItemProps {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Icon" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.Dropdown id="icon" title="Icon">
  *         <Form.Dropdown.Item value="circle" title="Cirlce" icon={Icon.Circle} />
  *       </Form.Dropdown>
@@ -1489,7 +1567,13 @@ export interface FormTagPickerProps extends FormItemProps<string[]> {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Favorite" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.TagPicker id="sports" title="Favorite Sports" defaultValue={["football"]}>
  *         <Form.TagPicker.Item value="basketball" title="Basketball" icon="🏀" />
  *         <Form.TagPicker.Item value="football" title="Football" icon="⚽️" />
@@ -1511,7 +1595,13 @@ export interface FormTagPickerProps extends FormItemProps<string[]> {
  *   const [countries, setCountries] = useState<string[]>(["ger", "ned", "pol"]);
  *
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Countries" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.TagPicker id="countries" title="Visited Countries" value={countries} onChange={setCountries}>
  *         <Form.TagPicker.Item value="ger" title="Germany" icon="🇩🇪" />
  *         <Form.TagPicker.Item value="ind" title="India" icon="🇮🇳" />
@@ -1573,9 +1663,17 @@ export interface FormTagPickerItemProps {
  *
  * export default function Command() {
  *   return (
- *     <Form onSubmit={(values) => console.log(values)}>
+ *     <Form
+ *       actions={
+ *         <ActionPanel>
+ *           <SubmitFormAction title="Submit Color" onSubmit={(values) => console.log(values)} />
+ *         </ActionPanel>
+ *       }
+ *     >
  *       <Form.TagPicker id="color" title="Color">
- *         <Form.TagPicker.Item value="ger" title="Germany" icon={{ source: Icon.Circle, tintColor: Color.Red }} />
+ *         <Form.TagPicker.Item value="red" title="Red" icon={{ source: Icon.Circle, tintColor: Color.Red }} />
+ *         <Form.TagPicker.Item value="green" title="Green" icon={{ source: Icon.Circle, tintColor: Color.Green }} />
+ *         <Form.TagPicker.Item value="blue" title="Blue" icon={{ source: Icon.Circle, tintColor: Color.Blue }} />
  *       </Form.TagPicker>
  *     </Form>
  *   );
@@ -2970,12 +3068,13 @@ export function confirmAlert(options: AlertOptions): Promise<boolean>;
  *     primaryAction: {
  *       title: 'Do something',
  *       onAction: () => {
+ *         // while you can register a handler for an action, it's more elegant
+ *         // to use the `if (await confirmAlert(...)) { ... }` pattern
  *         console.log("The alert action has been triggered")
  *       }
  *     }
  *   };
- *   const alert = new Alert(options);
- *   await alert.show();
+ *   await confirmAlert(options);
  * };
  * ```
  *