@tylertech/forge-ai-react 0.1.0

package/dist/ForgeAiChatHeader.js

@@ -0,0 +1,62 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-chat-header";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiChatHeader = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    showExpandButton,
+    showMinimizeButton,
+    expanded,
+    minimizeIcon,
+    ...filteredProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-chat-header-clear",
+    props.onForgeAiChatHeaderClear,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-chat-header-info",
+    props.onForgeAiChatHeaderInfo,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-chat-header-expand",
+    props.onForgeAiChatHeaderExpand,
+  );
+  useEventListener(
+    ref,
+    "forge-ai-chat-header-minimize",
+    props.onForgeAiChatHeaderMinimize,
+  );
+
+  return React.createElement(
+    "forge-ai-chat-header",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      "minimize-icon": props.minimizeIcon || props["minimize-icon"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      "show-expand-button": props.showExpandButton ? true : undefined,
+      "show-minimize-button": props.showMinimizeButton ? true : undefined,
+      expanded: props.expanded ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiChatInterface.d.ts

@@ -0,0 +1,66 @@
+import React from "react";
+import { ForgeAiChatInterface as ForgeAiChatInterfaceElement } from "@tylertech/forge-ai/ai-chat-interface";
+
+export type { ForgeAiChatInterfaceElement };
+
+export interface ForgeAiChatInterfaceProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Controls whether the expand button is visible in the header */
+  showExpandButton?: boolean;
+
+  /** Controls whether the minimize button is visible in the header */
+  showMinimizeButton?: boolean;
+
+  /** Indicates the current expanded state for displaying the appropriate expand/collapse icon */
+  expanded?: boolean;
+
+  /** Controls which minimize icon to display in the header */
+  minimizeIcon?: ForgeAiChatInterfaceElement["minimizeIcon"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for messages
+ * - **suggestions** - Slot for AI suggestions component
+ * - **prompt** - Slot for AI prompt component
+ */
+export const ForgeAiChatInterface: React.ForwardRefExoticComponent<ForgeAiChatInterfaceProps>;

package/dist/ForgeAiChatInterface.js

@@ -0,0 +1,30 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/ai-chat-interface";
+
+export const ForgeAiChatInterface = forwardRef((props, forwardedRef) => {
+  const {
+    showExpandButton,
+    showMinimizeButton,
+    expanded,
+    minimizeIcon,
+    ...filteredProps
+  } = props;
+
+  return React.createElement(
+    "forge-ai-chat-interface",
+    {
+      ...filteredProps,
+      "minimize-icon": props.minimizeIcon || props["minimize-icon"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      "show-expand-button": props.showExpandButton ? true : undefined,
+      "show-minimize-button": props.showMinimizeButton ? true : undefined,
+      expanded: props.expanded ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiDialog.d.ts

@@ -0,0 +1,80 @@
+import React from "react";
+import { ForgeAiDialog as ForgeAiDialogElement } from "@tylertech/forge-ai/ai-dialog";
+
+export type { ForgeAiDialogElement };
+
+export interface ForgeAiDialogProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Indicates whether the dialog is open. */
+  open?: boolean;
+
+  /** Controls the dialog's positioning and size behavior.
+When true, the dialog will have an expanded width and be centered on the screen.
+When false, the dialog will be positioned at the bottom-right corner with a fixed width. */
+  expanded?: boolean;
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Gets the current fullscreen state (readonly) */
+  isFullscreen?: ForgeAiDialogElement["isFullscreen"];
+
+  /** Fired when the fullscreen state changes due to viewport size */
+  onForgeAiDialogFullscreenChange?: (
+    event: CustomEvent<CustomEvent<{ isFullscreen: boolean }>>,
+  ) => void;
+
+  /** Fired when the dialog is closed */
+  onForgeAiDialogClose?: (event: CustomEvent<CustomEvent<void>>) => void;
+}
+
+/**
+ *
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-dialog-fullscreen-change** - Fired when the fullscreen state changes due to viewport size
+ * - **forge-ai-dialog-close** - Fired when the dialog is closed
+ *
+ * ### **Methods:**
+ *  - **show(): _void_** - Opens the dialog.
+ * - **close(): _void_** - Closes the dialog.
+ * - **toggle(): _void_** - Toggles the dialog open state.
+ *
+ * ### **Slots:**
+ *  - _default_ - Default slot for dialog content (typically ai-chat-interface)
+ */
+export const ForgeAiDialog: React.ForwardRefExoticComponent<ForgeAiDialogProps>;

package/dist/ForgeAiDialog.js

@@ -0,0 +1,43 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-dialog";
+import { useEventListener, useProperties } from "./react-utils.js";
+
+export const ForgeAiDialog = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { open, expanded, isFullscreen, ...filteredProps } = props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-dialog-fullscreen-change",
+    props.onForgeAiDialogFullscreenChange,
+  );
+  useEventListener(ref, "forge-ai-dialog-close", props.onForgeAiDialogClose);
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "isFullscreen", props.isFullscreen);
+
+  return React.createElement(
+    "forge-ai-dialog",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      open: props.open ? true : undefined,
+      expanded: props.expanded ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiDropdownMenu.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+import {
+  ForgeAiDropdownMenu as ForgeAiDropdownMenuElement,
+  CustomEvent,
+} from "@tylertech/forge-ai/ai-dropdown-menu";
+
+export type { ForgeAiDropdownMenuElement, CustomEvent };
+
+export interface ForgeAiDropdownMenuProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether the dropdown is open. */
+  open?: boolean;
+
+  /** Whether the dropdown menu is disabled. */
+  disabled?: boolean;
+
+  /** The variant of the dropdown menu trigger button. */
+  variant?: ForgeAiDropdownMenuElement["variant"];
+
+  /** The selection mode for the dropdown menu.
+- 'none': No selection state, items act as actions only
+- 'single': Single selection with radio button behavior
+- 'multi': Multiple selection with checkbox behavior */
+  selectionMode?: ForgeAiDropdownMenuElement["selectionMode"];
+
+  /** The currently selected value(s).
+For single selection: string or null
+For multi selection: string array
+For none mode: null */
+  value?: ForgeAiDropdownMenuElement["value"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** undefined */
+  onForgeAiDropdownMenuChange?: (event: CustomEvent) => void;
+
+  /** undefined */
+  onEventName?: (event: CustomEvent) => void;
+}
+
+/**
+ * An AI dropdown menu component with advanced selection modes and submenu support.
+ * ---
+ *
+ *
+ * ### **Events:**
+ *  - **forge-ai-dropdown-menu-change**
+ * - **eventName**
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for dropdown menu items, item groups, and separators.
+ * - **header** - The header content displayed at the top of the dropdown menu.
+ * - **trigger-content** - The content of the trigger button (text or icon) when no selection is made.
+ * - **selected-text** - Custom content for the trigger button when selections are made (overrides default selection text).
+ * - **start** - The start icon slot for additional trigger button content.
+ * - **end** - The end icon slot for additional trigger button content.
+ *
+ * ### **CSS Properties:**
+ *  - **--ai-dropdown-menu-min-width** - Minimum width of the dropdown menu. _(default: undefined)_
+ * - **--ai-dropdown-menu-max-width** - Maximum width of the dropdown menu. _(default: undefined)_
+ * - **--ai-dropdown-menu-max-height** - Maximum height of the dropdown menu. _(default: undefined)_
+ * - **--ai-dropdown-menu-padding** - Padding inside the dropdown menu. _(default: undefined)_
+ * - **--ai-dropdown-menu-trigger-width** - The width of the trigger button. _(default: undefined)_
+ * - **--ai-dropdown-menu-trigger-height** - The height of the trigger button. _(default: undefined)_
+ */
+export const ForgeAiDropdownMenu: React.ForwardRefExoticComponent<ForgeAiDropdownMenuProps>;

package/dist/ForgeAiDropdownMenu.js

@@ -0,0 +1,44 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-dropdown-menu";
+import { useEventListener } from "./react-utils.js";
+
+export const ForgeAiDropdownMenu = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const { open, disabled, variant, selectionMode, value, ...filteredProps } =
+    props;
+
+  /** Event listeners - run once */
+  useEventListener(
+    ref,
+    "forge-ai-dropdown-menu-change",
+    props.onForgeAiDropdownMenuChange,
+  );
+  useEventListener(ref, "eventName", props.onEventName);
+
+  return React.createElement(
+    "forge-ai-dropdown-menu",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      variant: props.variant,
+      "selection-mode": props.selectionMode || props["selection-mode"],
+      value: props.value,
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      open: props.open ? true : undefined,
+      disabled: props.disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiDropdownMenuItem.d.ts

@@ -0,0 +1,89 @@
+import React from "react";
+import { ForgeAiDropdownMenuItem as ForgeAiDropdownMenuItemElement } from "@tylertech/forge-ai/ai-dropdown-menu";
+
+export type { ForgeAiDropdownMenuItemElement };
+
+export interface ForgeAiDropdownMenuItemProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** Whether this menu item is selected. */
+  selected?: boolean;
+
+  /** Whether this menu item is disabled. */
+  disabled?: boolean;
+
+  /** The value associated with this menu item. */
+  value?: ForgeAiDropdownMenuItemElement["value"];
+
+  /** The selection mode for this menu item.
+This is typically set by the parent dropdown menu component. */
+  selectionMode?: ForgeAiDropdownMenuItemElement["selectionMode"];
+
+  /** The trigger behavior for submenu opening.
+- 'hover': Opens on mouse hover (default)
+- 'click': Opens on click
+- 'both': Opens on both hover and click */
+  submenuTrigger?: ForgeAiDropdownMenuItemElement["submenuTrigger"];
+
+  /** The delay in milliseconds before opening a submenu on hover. */
+  submenuOpenDelay?: ForgeAiDropdownMenuItemElement["submenuOpenDelay"];
+
+  /** The delay in milliseconds before closing a submenu when mouse leaves. */
+  submenuCloseDelay?: ForgeAiDropdownMenuItemElement["submenuCloseDelay"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Gets the text content from the default slot (label text only). */
+  labelText?: ForgeAiDropdownMenuItemElement["labelText"];
+}
+
+/**
+ * An item component for use within ai-dropdown-menu with submenu support.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for item text content.
+ * - **description** - The description slot for additional item details.
+ * - **start** - The start icon slot.
+ * - **end** - The end icon slot.
+ * - **submenu** - The slot for nested dropdown menu components.
+ *
+ * ### **CSS Properties:**
+ *  - **--ai-dropdown-menu-item-submenu-open-delay** - Delay before opening submenu on hover. _(default: undefined)_
+ * - **--ai-dropdown-menu-item-submenu-close-delay** - Delay before closing submenu when mouse leaves. _(default: undefined)_
+ * - **--ai-dropdown-menu-item-selection-icon-size** - Size of selection and submenu icons. _(default: undefined)_
+ */
+export const ForgeAiDropdownMenuItem: React.ForwardRefExoticComponent<ForgeAiDropdownMenuItemProps>;

package/dist/ForgeAiDropdownMenuItem.js

@@ -0,0 +1,52 @@
+import React, { forwardRef, useRef, useEffect } from "react";
+import "@tylertech/forge-ai/ai-dropdown-menu";
+import { useProperties } from "./react-utils.js";
+
+export const ForgeAiDropdownMenuItem = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    selected,
+    disabled,
+    value,
+    selectionMode,
+    submenuTrigger,
+    submenuOpenDelay,
+    submenuCloseDelay,
+    labelText,
+    ...filteredProps
+  } = props;
+
+  /** Properties - run whenever a property has changed */
+  useProperties(ref, "labelText", props.labelText);
+
+  return React.createElement(
+    "forge-ai-dropdown-menu-item",
+    {
+      ref: (node) => {
+        ref.current = node;
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node);
+        } else if (forwardedRef) {
+          forwardedRef.current = node;
+        }
+      },
+      ...filteredProps,
+      value: props.value,
+      "selection-mode": props.selectionMode || props["selection-mode"],
+      "submenu-trigger": props.submenuTrigger || props["submenu-trigger"],
+      "submenu-open-delay":
+        props.submenuOpenDelay || props["submenu-open-delay"],
+      "submenu-close-delay":
+        props.submenuCloseDelay || props["submenu-close-delay"],
+      class: props.className,
+      exportparts: props.exportparts,
+      for: props.htmlFor,
+      part: props.part,
+      tabindex: props.tabIndex,
+      selected: props.selected ? true : undefined,
+      disabled: props.disabled ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/ForgeAiDropdownMenuItemGroup.d.ts

@@ -0,0 +1,53 @@
+import React from "react";
+import { ForgeAiDropdownMenuItemGroup as ForgeAiDropdownMenuItemGroupElement } from "@tylertech/forge-ai/ai-dropdown-menu";
+
+export type { ForgeAiDropdownMenuItemGroupElement };
+
+export interface ForgeAiDropdownMenuItemGroupProps
+  extends Pick<
+    React.AllHTMLAttributes<HTMLElement>,
+    | "children"
+    | "dir"
+    | "hidden"
+    | "id"
+    | "lang"
+    | "slot"
+    | "style"
+    | "title"
+    | "translate"
+    | "onClick"
+    | "onFocus"
+    | "onBlur"
+  > {
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: any;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ * A group component for organizing items within ai-dropdown-menu.
+ * ---
+ *
+ *
+ * ### **Slots:**
+ *  - _default_ - The default slot for dropdown menu items.
+ * - **label** - The label slot for the group heading text.
+ */
+export const ForgeAiDropdownMenuItemGroup: React.ForwardRefExoticComponent<ForgeAiDropdownMenuItemGroupProps>;

package/dist/ForgeAiDropdownMenuItemGroup.js

@@ -0,0 +1,20 @@
+import React, { forwardRef } from "react";
+import "@tylertech/forge-ai/ai-dropdown-menu";
+
+export const ForgeAiDropdownMenuItemGroup = forwardRef(
+  (props, forwardedRef) => {
+    return React.createElement(
+      "forge-ai-dropdown-menu-item-group",
+      {
+        ...props,
+        class: props.className,
+        exportparts: props.exportparts,
+        for: props.htmlFor,
+        part: props.part,
+        tabindex: props.tabIndex,
+        style: { ...props.style },
+      },
+      props.children,
+    );
+  },
+);