From 83f62756f9111f5511d6ae6ed0073fbbe6b84df7 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 18 Jun 2024 11:07:05 -0500 Subject: [PATCH 01/76] chore(chat-composer): add fontSize and lineHeight to props --- .../chat-composer/src/ChatComposer.tsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 6be74a280d..f6957e767a 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -61,6 +61,20 @@ export interface ChatComposerProps extends Omit( placeholder = "", initialValue, config, - maxHeight, + maxHeight = "size30", disabled, + fontSize, + lineHeight, ...props }, ref, @@ -124,6 +140,8 @@ export const ChatComposer = React.forwardRef( color: "colorTextWeaker", backgroundColor: "colorBackground", }} + fontSize={fontSize} + lineHeight={lineHeight} > From 3ddda4567fd99e4ffed2962f269e0e2e83bd92cd Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 12:31:54 -0500 Subject: [PATCH 02/76] feat(composer): wip base elements --- .../chat-composer/src/ChatComposer.tsx | 1 + .../src/ChatComposerActionGroup.tsx | 24 +++++++++++ .../src/ChatComposerAttatchmentGroup.tsx | 32 +++++++++++++++ .../src/ChatComposerContainer.tsx | 39 ++++++++++++++++++ .../components/chat-composer/src/index.tsx | 6 +++ .../stories/container.stories.tsx | 40 +++++++++++++++++++ 6 files changed, 142 insertions(+) create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx create mode 100644 packages/paste-core/components/chat-composer/stories/container.stories.tsx diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index f6957e767a..3f797b4f6b 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -142,6 +142,7 @@ export const ChatComposer = React.forwardRef( }} fontSize={fontSize} lineHeight={lineHeight} + gridArea="composer" > diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx new file mode 100644 index 0000000000..e731641d0f --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -0,0 +1,24 @@ +import type { BoxProps } from "@twilio-paste/box"; +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +export interface ChatComposerActionGroupProps { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'CHAT_COMPOSER_ACTION_GROUP' + * @type {BoxProps['element']} + * @memberof PageHeaderProps + */ + element?: BoxProps["element"]; +} + +export const ChatComposerActionGroup = React.forwardRef( + ({ element = "CHAT_COMPOSER_ACTION_GROUP", children, ...props }, ref) => ( + + {children} + + ), +); + +ChatComposerActionGroup.displayName = "ChatComposerActionGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx new file mode 100644 index 0000000000..957244364c --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx @@ -0,0 +1,32 @@ +import type { BoxProps } from "@twilio-paste/box"; +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +export interface ChatComposerAttatchmentGroupProps { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'CHAT_COMPOSER_ATTATCHMENT_GROUP' + * @type {BoxProps['element']} + * @memberof PageHeaderProps + */ + element?: BoxProps["element"]; +} + +export const ChatComposerAttatchmentGroup = React.forwardRef( + ({ element = "CHAT_COMPOSER_ATTATCHMENT_GROUP", children, ...props }, ref) => ( + + {children} + + ), +); + +ChatComposerAttatchmentGroup.displayName = "ChatComposerAttatchmentGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx new file mode 100644 index 0000000000..ce9737e873 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -0,0 +1,39 @@ +import type { BoxProps } from "@twilio-paste/box"; +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +export interface ChatComposerContainerProps { + children?: React.ReactNode; + /** + * Styling of the container + * @default 'default' + * @type {'default' | 'contained''} + * @memberof PageHeaderProps + */ + variant?: "default" | "contained"; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'CHAT_COMPOSER_CONTAINER' + * @type {BoxProps['element']} + * @memberof PageHeaderProps + */ + element?: BoxProps["element"]; +} + +export const ChatComposerContainer = React.forwardRef( + ({ variant, element = "CHAT_COMPOSER_CONTAINER", children, ...props }, ref) => ( + + {children} + + ), +); + +ChatComposerContainer.displayName = "ChatComposerContainer"; diff --git a/packages/paste-core/components/chat-composer/src/index.tsx b/packages/paste-core/components/chat-composer/src/index.tsx index fccff17913..fee6102b2b 100644 --- a/packages/paste-core/components/chat-composer/src/index.tsx +++ b/packages/paste-core/components/chat-composer/src/index.tsx @@ -1,2 +1,8 @@ export { ChatComposer } from "./ChatComposer"; export type { ChatComposerProps } from "./ChatComposer"; +export { ChatComposerActionGroup } from "./ChatComposerActionGroup"; +export type { ChatComposerActionGroupProps } from "./ChatComposerActionGroup"; +export { ChatComposerAttatchmentGroup } from "./ChatComposerAttatchmentGroup"; +export type { ChatComposerAttatchmentGroupProps } from "./ChatComposerAttatchmentGroup"; +export { ChatComposerContainer } from "./ChatComposerContainer"; +export type { ChatComposerContainerProps } from "./ChatComposerContainer"; diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx new file mode 100644 index 0000000000..65e2ab558a --- /dev/null +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -0,0 +1,40 @@ +import type { StoryFn } from "@storybook/react"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import type { EditorState } from "@twilio-paste/lexical-library"; +import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; +import * as React from "react"; + +import { ChatComposer, ChatComposerActionGroup, ChatComposerAttatchmentGroup, ChatComposerContainer } from "../src"; +import type { ChatComposerProps } from "../src"; + +export default { + title: "Components/Chat Composer/Container", + component: ChatComposer, +}; + +const defaultConfig: ChatComposerProps["config"] = { + namespace: "foo", + onError: (error: Error) => { + throw error; + }, +}; + +export const Default: StoryFn = () => { + return ( + + + + + + + + + ); +}; From 9fe61d09df4d1e22d52d16d57edad3a9054c146f Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 15:28:35 -0500 Subject: [PATCH 03/76] feat(composer): addition of all attatchment components --- .../chat-composer/src/ChatComposer.tsx | 28 ++++- .../src/ChatComposerActionGroup.tsx | 13 +- .../src/ChatComposerAttachment.tsx | 49 ++++++++ .../src/ChatComposerAttachmentCard.tsx | 113 +++++++++++++++++ .../src/ChatComposerAttachmentDescription.tsx | 38 ++++++ ...up.tsx => ChatComposerAttachmentGroup.tsx} | 20 +-- .../src/ChatComposerAttachmentLink.tsx | 31 +++++ .../src/ChatComposerContainer.tsx | 54 ++++++-- .../chat-composer/src/ChatComposerContext.ts | 12 ++ .../src/ToggleDisabledPlugin.tsx | 19 +++ .../components/chat-composer/src/index.tsx | 12 +- .../stories/container.stories.tsx | 115 +++++++++++++++++- 12 files changed, 469 insertions(+), 35 deletions(-) create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachmentDescription.tsx rename packages/paste-core/components/chat-composer/src/{ChatComposerAttatchmentGroup.tsx => ChatComposerAttachmentGroup.tsx} (50%) create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachmentLink.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerContext.ts create mode 100644 packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 3f797b4f6b..effa04daa0 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -32,9 +32,12 @@ import merge from "deepmerge"; import * as React from "react"; import { AutoLinkPlugin } from "./AutoLinkPlugin"; +import { ChatComposerContext } from "./ChatComposerContext"; import { PlaceholderWrapper } from "./PlaceholderWrapper"; +import { ToggleEditablePlugin } from "./ToggleDisabledPlugin"; import { baseConfig, renderInitialText } from "./helpers"; import { chatComposerLexicalStyles } from "./styles"; +import { ThemeShape } from "@twilio-paste/theme"; export interface ChatComposerProps extends Omit { children?: LexicalComposerProps["children"]; @@ -113,14 +116,31 @@ export const ChatComposer = React.forwardRef( lineHeight, ...props }, - ref, + ref ) => { + const { setIsDisabled } = React.useContext(ChatComposerContext); + const baseConfigWithEditorState = { ...baseConfig, editable: disabled ? false : true, editorState: initialValue ? () => renderInitialText(initialValue) : undefined, }; + const getDisabledStyling = React.useCallback(() => { + /** + * If setIsDisabled is defined, then the styling will be handled by ChatComposerContainer. + * If it is not defined, then the styling will be handled by ChatComposer. Using both causes the diabled style tochange + * from container and then composer. + */ + if (!!setIsDisabled) { + return {}; + } + return { + color: "colorTextWeaker" as ThemeShape["textColors"], + backgroundColor: "colorBackground" as ThemeShape["backgroundColors"], + }; + }, [!!setIsDisabled]); + return ( ( maxHeight={maxHeight} disabled={disabled} aria-disabled={disabled} - _disabled={{ - color: "colorTextWeaker", - backgroundColor: "colorBackground", - }} + _disabled={getDisabledStyling()} fontSize={fontSize} lineHeight={lineHeight} gridArea="composer" @@ -155,6 +172,7 @@ export const ChatComposer = React.forwardRef( {onChange && } + {children} diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx index e731641d0f..6318ae8b2c 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -15,7 +15,18 @@ export interface ChatComposerActionGroupProps { export const ChatComposerActionGroup = React.forwardRef( ({ element = "CHAT_COMPOSER_ACTION_GROUP", children, ...props }, ref) => ( - + {children} ), diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx new file mode 100644 index 0000000000..5f75a602c0 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx @@ -0,0 +1,49 @@ +import type { BoxElementProps } from "@twilio-paste/box"; +import { Box } from "@twilio-paste/box"; +import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object"; +import { Stack } from "@twilio-paste/stack"; +import type { HTMLPasteProps } from "@twilio-paste/types"; +import * as React from "react"; + +export interface ChatComposerAttachmentProps extends HTMLPasteProps<"div"> { + children: NonNullable; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentProps + */ + element?: BoxElementProps["element"]; + /** + * Pass an icon to use for the attachment message. DownloadIcon recommended + * + * @default null + * @type {NonNullable} + * @memberof ChatComposerAttachmentProps + */ + attachmentIcon: NonNullable; +} + +const ChatComposerAttachment = React.forwardRef( + ({ children, element = "CHAT_COMPOSER_ATTACHMENT", attachmentIcon, ...props }, ref) => { + return ( + + + + {attachmentIcon} + + + + + {children} + + + + ); + }, +); + +ChatComposerAttachment.displayName = "ChatComposerAttachment"; + +export { ChatComposerAttachment }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx new file mode 100644 index 0000000000..503ef9b6a8 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx @@ -0,0 +1,113 @@ +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { ClearIcon } from "@twilio-paste/icons/esm/ClearIcon"; +import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only"; +import type { HTMLPasteProps } from "@twilio-paste/types"; +import * as React from "react"; +import { ChatComposerContext } from "./ChatComposerContext"; + +/* + *These style props are specific to our ClearIcon use case in ChatComposerAttachmentCard. + * + *The close button uses ClearIcon and needs the Box behind it to have these styles + *because the inner part of the glyph is transparent (variant="secondary_icon"). + *When more button variants become available, closeButtonBackgroundStyles should + *be reconsidered (and possibly removed). + */ +const closeButtonBackgroundStyles: BoxStyleProps = { + backgroundColor: "colorBackgroundBody", + borderRadius: "borderRadiusCircle", + width: "12px", + height: "12px", + display: "flex", + justifyContent: "center", + alignItems: "center", +}; + +export interface ChatComposerAttachmentCardProps extends HTMLPasteProps<"div"> { + children: NonNullable; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT_CARD" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentCardProps + */ + element?: BoxProps["element"]; + /** + * Accessible label for the dismiss button if dismissable + * + * @default "Remove attachment" + * @type {string} + * @memberof ChatComposerAttachmentCardProps + */ + i18nDismissLabel?: string; + /** + * Function to run when ChatComposerAttachmentCard is dismissed. Adds a close button + * + * @default null + * @memberof ChatComposerAttachmentCardProps + */ + onDismiss?: () => void; +} + +const ChatComposerAttachmentCard = React.forwardRef( + ( + { + children, + onDismiss, + i18nDismissLabel = "Remove attachment", + element = "CHAT_COMPOSER_ATTACHMENT_CARD", + ...props + }, + ref, + ) => { + const { isDisabled } = React.useContext(ChatComposerContext); + + return ( + + {children} + {onDismiss && ( + + + + )} + + ); + }, +); + +ChatComposerAttachmentCard.displayName = "ChatComposerAttachmentCard"; + +export { ChatComposerAttachmentCard }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentDescription.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentDescription.tsx new file mode 100644 index 0000000000..450a30c928 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentDescription.tsx @@ -0,0 +1,38 @@ +import type { BoxElementProps } from "@twilio-paste/box"; +import { Text, safelySpreadTextProps } from "@twilio-paste/text"; +import type { HTMLPasteProps } from "@twilio-paste/types"; +import * as React from "react"; + +export interface ChatComposerAttachmentDescriptionProps extends HTMLPasteProps<"div"> { + children: string; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT_DESCRIPTION" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentDescriptionProps + */ + element?: BoxElementProps["element"]; +} + +const ChatComposerAttachmentDescription = React.forwardRef( + ({ children, element = "CHAT_COMPOSER_ATTACHMENT_DESCRIPTION", ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +ChatComposerAttachmentDescription.displayName = "ChatComposerAttachmentDescription"; + +export { ChatComposerAttachmentDescription }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx similarity index 50% rename from packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx rename to packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 957244364c..a43d8217bc 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -2,31 +2,35 @@ import type { BoxProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; import * as React from "react"; -export interface ChatComposerAttatchmentGroupProps { +export interface ChatComposerAttachmentGroupProps { children?: React.ReactNode; /** * Overrides the default element name to apply unique styles with the Customization Provider - * @default 'CHAT_COMPOSER_ATTATCHMENT_GROUP' + * @default 'CHAT_COMPOSER_ATTACHMENT_GROUP' * @type {BoxProps['element']} * @memberof PageHeaderProps */ element?: BoxProps["element"]; } -export const ChatComposerAttatchmentGroup = React.forwardRef( - ({ element = "CHAT_COMPOSER_ATTATCHMENT_GROUP", children, ...props }, ref) => ( +export const ChatComposerAttachmentGroup = React.forwardRef( + ({ element = "CHAT_COMPOSER_ATTACHMENT_GROUP", children, ...props }, ref) => ( {children} ), ); -ChatComposerAttatchmentGroup.displayName = "ChatComposerAttatchmentGroup"; +ChatComposerAttachmentGroup.displayName = "ChatComposerAttachmentGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentLink.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentLink.tsx new file mode 100644 index 0000000000..7543a3fb73 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentLink.tsx @@ -0,0 +1,31 @@ +import { Anchor } from "@twilio-paste/anchor"; +import type { AnchorProps } from "@twilio-paste/anchor"; +import type { BoxElementProps } from "@twilio-paste/box"; +import { Truncate } from "@twilio-paste/truncate"; +import * as React from "react"; + +export interface ChatComposerAttachmentLinkProps extends AnchorProps { + children: string; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT_LINK" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentLinkProps + */ + element?: BoxElementProps["element"]; +} + +const ChatComposerAttachmentLink = React.forwardRef( + ({ children, href, element = "CHAT_COMPOSER_ATTACHMENT_LINK", ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +ChatComposerAttachmentLink.displayName = "ChatComposerAttachmentLink"; + +export { ChatComposerAttachmentLink }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index ce9737e873..a320edaf08 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -1,7 +1,21 @@ import type { BoxProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import { ThemeShape } from "@twilio-paste/theme"; import * as React from "react"; +import { ChatComposerContext } from "./ChatComposerContext"; + +const Styles = { + default: {}, + contained: { + borderWidth: "borderWidth10" as ThemeShape["borderWidths"], + borderStyle: "solid", + borderRadius: "borderRadius30" as ThemeShape["radii"], + borderColor: "colorBorderWeaker" as ThemeShape["borderColors"], + boxShadow: "shadowBorderLow" as ThemeShape["shadows"], + }, +}; + export interface ChatComposerContainerProps { children?: React.ReactNode; /** @@ -21,19 +35,33 @@ export interface ChatComposerContainerProps { } export const ChatComposerContainer = React.forwardRef( - ({ variant, element = "CHAT_COMPOSER_CONTAINER", children, ...props }, ref) => ( - - {children} - - ), + ({ variant = "default", element = "CHAT_COMPOSER_CONTAINER", children, ...props }, ref) => { + const [isDisabled, setIsDisabled] = React.useState(false); + + return ( + + + {children} + + + ); + }, ); ChatComposerContainer.displayName = "ChatComposerContainer"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContext.ts b/packages/paste-core/components/chat-composer/src/ChatComposerContext.ts new file mode 100644 index 0000000000..aa9d810d5f --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContext.ts @@ -0,0 +1,12 @@ +import * as React from "react"; + +export interface ChatComposerContextProps { + isDisabled: boolean; + setIsDisabled?: (value: boolean) => void; +} + +const ChatComposerContext = React.createContext({ + isDisabled: false, +}); + +export { ChatComposerContext }; diff --git a/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx new file mode 100644 index 0000000000..d996b3c118 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx @@ -0,0 +1,19 @@ +import { useLexicalComposerContext } from "@twilio-paste/lexical-library"; +import * as React from "react"; +import { ChatComposerContext } from "./ChatComposerContext"; + +export const ToggleEditablePlugin: React.FC<{ disabled: boolean | undefined }> = ({ disabled }): null => { + const [editor] = useLexicalComposerContext(); + const { setIsDisabled } = React.useContext(ChatComposerContext); + + React.useEffect(() => { + if (disabled !== undefined) { + !!setIsDisabled && setIsDisabled(disabled); + editor.setEditable(!disabled); + } + }, [disabled]); + + return null; +}; + +ToggleEditablePlugin.displayName = "ToggleEditablePlugin"; diff --git a/packages/paste-core/components/chat-composer/src/index.tsx b/packages/paste-core/components/chat-composer/src/index.tsx index fee6102b2b..a46508410c 100644 --- a/packages/paste-core/components/chat-composer/src/index.tsx +++ b/packages/paste-core/components/chat-composer/src/index.tsx @@ -2,7 +2,15 @@ export { ChatComposer } from "./ChatComposer"; export type { ChatComposerProps } from "./ChatComposer"; export { ChatComposerActionGroup } from "./ChatComposerActionGroup"; export type { ChatComposerActionGroupProps } from "./ChatComposerActionGroup"; -export { ChatComposerAttatchmentGroup } from "./ChatComposerAttatchmentGroup"; -export type { ChatComposerAttatchmentGroupProps } from "./ChatComposerAttatchmentGroup"; +export { ChatComposerAttachmentGroup } from "./ChatComposerAttachmentGroup"; +export type { ChatComposerAttachmentGroupProps } from "./ChatComposerAttachmentGroup"; export { ChatComposerContainer } from "./ChatComposerContainer"; export type { ChatComposerContainerProps } from "./ChatComposerContainer"; +export { ChatComposerAttachment } from "./ChatComposerAttachment"; +export type { ChatComposerAttachmentProps } from "./ChatComposerAttachment"; +export { ChatComposerAttachmentCard } from "./ChatComposerAttachmentCard"; +export type { ChatComposerAttachmentCardProps } from "./ChatComposerAttachmentCard"; +export { ChatComposerAttachmentDescription } from "./ChatComposerAttachmentDescription"; +export type { ChatComposerAttachmentDescriptionProps } from "./ChatComposerAttachmentDescription"; +export { ChatComposerAttachmentLink } from "./ChatComposerAttachmentLink"; +export type { ChatComposerAttachmentLinkProps } from "./ChatComposerAttachmentLink"; diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 65e2ab558a..5350005c1f 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -1,13 +1,22 @@ import type { StoryFn } from "@storybook/react"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; +import { Checkbox } from "@twilio-paste/checkbox"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; -import type { EditorState } from "@twilio-paste/lexical-library"; -import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; import * as React from "react"; -import { ChatComposer, ChatComposerActionGroup, ChatComposerAttatchmentGroup, ChatComposerContainer } from "../src"; +import { + ChatComposer, + ChatComposerActionGroup, + ChatComposerAttachment, + ChatComposerAttachmentCard, + ChatComposerAttachmentDescription, + ChatComposerAttachmentLink, + ChatComposerAttachmentGroup, + ChatComposerContainer, +} from "../src"; import type { ChatComposerProps } from "../src"; export default { @@ -27,14 +36,108 @@ export const Default: StoryFn = () => { - - - ); }; + +Default.storyName = "Default"; + +export const ContainedVariant: StoryFn = () => { + return ( + + + + + + + + ); +}; + +ContainedVariant.storyName = "Contained Variant"; + +export const ContainedVariantWithAttatchments: StoryFn = () => { + return ( + + + + + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + + ); +}; + +ContainedVariantWithAttatchments.storyName = "Contained Variant with Attatchments"; + +export const ContainedDisabledVariant: StoryFn = () => { + const [isDisabled, setIsDisabled] = React.useState(true); + return ( + <> + + setIsDisabled((disabled) => !disabled)}> + Disable Input + + + + + + + + + + + ); +}; + +ContainedDisabledVariant.storyName = "Contained Disabled Variant"; From b4824928ef2d7d1afa9ee66f83fa536b47de0d97 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 15:59:54 -0500 Subject: [PATCH 04/76] feat(composer): lint fix --- packages/paste-core/components/chat-composer/package.json | 8 ++++++++ .../components/chat-composer/src/ChatComposer.tsx | 6 +++--- .../chat-composer/src/ChatComposerAttachmentCard.tsx | 1 + .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 2 +- .../components/chat-composer/src/ToggleDisabledPlugin.tsx | 5 ++++- 5 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/paste-core/components/chat-composer/package.json b/packages/paste-core/components/chat-composer/package.json index 5137a99eaf..b63526a57f 100644 --- a/packages/paste-core/components/chat-composer/package.json +++ b/packages/paste-core/components/chat-composer/package.json @@ -44,15 +44,23 @@ "react-dom": "^17.0.2 || ^18.0.0" }, "devDependencies": { + "@twilio-paste/anchor": "^12.1.0", "@twilio-paste/animation-library": "^2.0.0", "@twilio-paste/box": "^10.1.0", + "@twilio-paste/button": "^14.1.0", "@twilio-paste/color-contrast-utils": "^5.0.0", "@twilio-paste/customization": "^8.1.0", "@twilio-paste/design-tokens": "^10.2.0", + "@twilio-paste/icons": "^12.2.3", "@twilio-paste/lexical-library": "^4.1.0", + "@twilio-paste/media-object": "^10.1.0", + "@twilio-paste/screen-reader-only": "^13.1.0", + "@twilio-paste/stack": "^8.1.0", "@twilio-paste/style-props": "^9.1.0", "@twilio-paste/styling-library": "^3.0.0", + "@twilio-paste/text": "^10.1.0", "@twilio-paste/theme": "^11.0.0", + "@twilio-paste/truncate": "^14.1.0", "@twilio-paste/types": "^6.0.0", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index effa04daa0..c8047bc631 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -28,6 +28,7 @@ import { } from "@twilio-paste/lexical-library"; import type { ContentEditableProps, LexicalComposerProps, OnChangeFunction } from "@twilio-paste/lexical-library"; import { StylingGlobals } from "@twilio-paste/styling-library"; +import { ThemeShape } from "@twilio-paste/theme"; import merge from "deepmerge"; import * as React from "react"; @@ -37,7 +38,6 @@ import { PlaceholderWrapper } from "./PlaceholderWrapper"; import { ToggleEditablePlugin } from "./ToggleDisabledPlugin"; import { baseConfig, renderInitialText } from "./helpers"; import { chatComposerLexicalStyles } from "./styles"; -import { ThemeShape } from "@twilio-paste/theme"; export interface ChatComposerProps extends Omit { children?: LexicalComposerProps["children"]; @@ -132,14 +132,14 @@ export const ChatComposer = React.forwardRef( * If it is not defined, then the styling will be handled by ChatComposer. Using both causes the diabled style tochange * from container and then composer. */ - if (!!setIsDisabled) { + if (setIsDisabled === undefined) { return {}; } return { color: "colorTextWeaker" as ThemeShape["textColors"], backgroundColor: "colorBackground" as ThemeShape["backgroundColors"], }; - }, [!!setIsDisabled]); + }, [Boolean(setIsDisabled)]); return ( = ({ disabled }): null => { @@ -8,7 +9,9 @@ export const ToggleEditablePlugin: React.FC<{ disabled: boolean | undefined }> = React.useEffect(() => { if (disabled !== undefined) { - !!setIsDisabled && setIsDisabled(disabled); + if (setIsDisabled !== undefined) { + setIsDisabled(disabled); + } editor.setEditable(!disabled); } }, [disabled]); From 48e1f474624595b050f788aef8013b08dcb0c4ea Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 21 Jun 2024 09:58:04 -0500 Subject: [PATCH 05/76] feat(composer): fix disabled styling --- .../paste-core/components/chat-composer/src/ChatComposer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index c8047bc631..b174e1aec8 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -116,7 +116,7 @@ export const ChatComposer = React.forwardRef( lineHeight, ...props }, - ref + ref, ) => { const { setIsDisabled } = React.useContext(ChatComposerContext); @@ -132,7 +132,7 @@ export const ChatComposer = React.forwardRef( * If it is not defined, then the styling will be handled by ChatComposer. Using both causes the diabled style tochange * from container and then composer. */ - if (setIsDisabled === undefined) { + if (setIsDisabled !== undefined) { return {}; } return { From 3abd117d2734e09468f9738f65835140ba6746ab Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 21 Jun 2024 11:27:15 -0500 Subject: [PATCH 06/76] feat(composer): customization stories --- .../stories/container.stories.tsx | 94 ++++++++++++++++--- 1 file changed, 81 insertions(+), 13 deletions(-) diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 5350005c1f..62145a8c90 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -2,9 +2,11 @@ import type { StoryFn } from "@storybook/react"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { Checkbox } from "@twilio-paste/checkbox"; +import { CustomizationProvider } from "@twilio-paste/customization"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import { useTheme } from "@twilio-paste/theme"; import * as React from "react"; import { @@ -13,8 +15,8 @@ import { ChatComposerAttachment, ChatComposerAttachmentCard, ChatComposerAttachmentDescription, - ChatComposerAttachmentLink, ChatComposerAttachmentGroup, + ChatComposerAttachmentLink, ChatComposerContainer, } from "../src"; import type { ChatComposerProps } from "../src"; @@ -52,11 +54,7 @@ Default.storyName = "Default"; export const ContainedVariant: StoryFn = () => { return ( - + + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + + + ); +}; + +CustomizationContainedVariantWithAttatchments.storyName = "Customization Contained Variant with Attatchments"; +CustomizationContainedVariantWithAttatchments.parameters = { + a11y: { + // no need to a11y check customization + disable: true, + }, +}; From ea302d03a37273741bb7b75e1057321a037050db Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 21 Jun 2024 12:15:56 -0500 Subject: [PATCH 07/76] feat(composer): testing --- .../__tests__/ChatComposer.spec.tsx | 106 +++++++ .../chat-composer/__tests__/index.spec.tsx | 286 +++++++++++++----- 2 files changed, 311 insertions(+), 81 deletions(-) create mode 100644 packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx diff --git a/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx new file mode 100644 index 0000000000..bc62da9f95 --- /dev/null +++ b/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx @@ -0,0 +1,106 @@ +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; +import { Theme } from "@twilio-paste/theme"; +import * as React from "react"; + +import { ChatComposer } from "../src"; + +const initialText = (): void => { + const root = $getRoot(); + + if (root.getFirstChild() === null) { + const paragraph = $createParagraphNode(); + paragraph.append($createTextNode("Hello")); + + root.append(paragraph); + } +}; + +const baseConfig = { + namespace: "foo", + onError: (error: Error) => { + throw error; + }, +}; + +describe("ChatComposer", () => { + it("should render with placeholder text", () => { + render(); + expect(screen.getByRole("textbox")).toBeDefined(); + expect(screen.getByText("Type here..")).toBeDefined(); + }); + + it("should pass props to the content editable", async () => { + render( + , + ); + + const contentEditable = screen.getByRole("textbox"); + await waitFor(() => { + expect(contentEditable).toHaveAttribute("aria-label", "Feedback"); + expect(contentEditable).toHaveAttribute("aria-activedescendant", "foo"); + expect(contentEditable).toHaveAttribute("aria-owns", "foo"); + expect(contentEditable).toHaveAttribute("aria-describedby", "foo"); + expect(contentEditable.dataset.testid).toEqual("my-composer"); + }); + }); + + it("should render initial value with the initialValue prop", async () => { + render(); + + const contentEditable = screen.getByRole("textbox"); + await waitFor(() => { + expect(contentEditable).toHaveTextContent("Type here.."); + }); + }); + + it("should render custom initial value with the config prop", async () => { + render( + , + ); + + const contentEditable = screen.getByRole("textbox"); + await waitFor(() => { + expect(contentEditable).toHaveTextContent("Hello"); + }); + }); + + it("should set maxHeight with the maxHeight prop", async () => { + render( + + + , + ); + + const wrapper = screen.getByRole("textbox").parentElement; + await waitFor(() => { + expect(wrapper).toHaveStyleRule("max-height", "5.5rem"); + }); + }); + + it("should call onChange function", async () => { + const onChangeMock: jest.Mock = jest.fn(); + + render(); + + const contentEditable = screen.getByRole("textbox"); + + userEvent.type(contentEditable, "foo bar"); + waitFor(() => { + expect(onChangeMock).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index bc62da9f95..5bf4385ee8 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -1,21 +1,25 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; import { Theme } from "@twilio-paste/theme"; -import * as React from "react"; - -import { ChatComposer } from "../src"; - -const initialText = (): void => { - const root = $getRoot(); - if (root.getFirstChild() === null) { - const paragraph = $createParagraphNode(); - paragraph.append($createTextNode("Hello")); +import * as React from "react"; - root.append(paragraph); - } -}; +import { + ChatComposer, + ChatComposerActionGroup, + ChatComposerAttachment, + ChatComposerAttachmentCard, + ChatComposerAttachmentDescription, + ChatComposerAttachmentGroup, + ChatComposerAttachmentLink, + ChatComposerContainer, +} from "../src"; const baseConfig = { namespace: "foo", @@ -24,83 +28,203 @@ const baseConfig = { }, }; +const attatchments = [ + { + name: "Document-FINAL.doc", + size: "123 MB", + href: "www.google.com", + }, + { + name: "Document-PEDNING.doc", + size: "1328 MB", + href: "www.linux.com", + }, +]; + +const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock }> = ({ + attatchmentCloseSpy = jest.fn(), +}) => ( + + + + + + + + {attatchments.map((attatchment, index) => ( + { + attatchmentCloseSpy(attatchment.name); + }} + key={`attachment=${index}`} + data-testid={`chat-composer-attachment-card-${index}`} + > + } + data-testid={`chat-composer-attachment-${index}`} + > + + {attatchment.name} + + + {attatchment.size} + + + + ))} + + +); + +const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock }> = ({ + attatchmentCloseSpy = jest.fn(), +}) => ( + + + + + + + + {attatchments.map((attatchment, index) => ( + { + attatchmentCloseSpy(attatchment.name); + }} + key={`attachment=${index}`} + data-testid={`chat-composer-attachment-card-${index}`} + element="CUSTOM_CHAT_COMPOSER_ATTACHMENT_CARD" + > + } + data-testid={`chat-composer-attachment-${index}`} + element={`CUSTOM_CHAT_COMPOSER_ATTACHMENT-${index}`} + > + + {attatchment.name} + + + {attatchment.size} + + + + ))} + + +); + describe("ChatComposer", () => { - it("should render with placeholder text", () => { - render(); + it("should render", () => { + const spy = jest.fn(); + render(); expect(screen.getByRole("textbox")).toBeDefined(); - expect(screen.getByText("Type here..")).toBeDefined(); - }); - - it("should pass props to the content editable", async () => { - render( - , - ); - - const contentEditable = screen.getByRole("textbox"); - await waitFor(() => { - expect(contentEditable).toHaveAttribute("aria-label", "Feedback"); - expect(contentEditable).toHaveAttribute("aria-activedescendant", "foo"); - expect(contentEditable).toHaveAttribute("aria-owns", "foo"); - expect(contentEditable).toHaveAttribute("aria-describedby", "foo"); - expect(contentEditable.dataset.testid).toEqual("my-composer"); + expect(screen.getByText("Type here...")).toBeDefined(); + expect(screen.getByRole("button", { name: "Attach" })).toBeDefined(); + expect(screen.getByRole("button", { name: "Send" })).toBeDefined(); + attatchments.forEach((attatchment) => { + expect(screen.getByText(attatchment.name)).toBeDefined(); + expect(screen.getByText(attatchment.size)).toBeDefined(); }); - }); - - it("should render initial value with the initialValue prop", async () => { - render(); - - const contentEditable = screen.getByRole("textbox"); - await waitFor(() => { - expect(contentEditable).toHaveTextContent("Type here.."); + screen.getAllByRole("button", { name: "Remove attachment" }).forEach((button, index) => { + userEvent.click(button); + expect(spy).toHaveBeenCalledWith(attatchments[index].name); }); }); - it("should render custom initial value with the config prop", async () => { - render( - , - ); - - const contentEditable = screen.getByRole("textbox"); - await waitFor(() => { - expect(contentEditable).toHaveTextContent("Hello"); + describe("Customization", () => { + it("should set element data attribute", () => { + render(); + expect(screen.getByTestId("chat-composer-container").getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_CONTAINER", + ); + // data-testid getting set on lexiocal elemnt not the paste wrapper so need to check parent node + expect(screen.getByTestId("my-composer").parentElement?.getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER", + ); + expect(screen.getByTestId("chat-composer-action-group").getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ACTION_GROUP", + ); + expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ATTACHMENT_GROUP", + ); + attatchments.forEach((attatchment, index) => { + expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ATTACHMENT_CARD", + ); + expect(screen.getByTestId(`chat-composer-attachment-${index}`).getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ATTACHMENT", + ); + expect(screen.getByTestId(`chat-composer-attachment-link-${index}`).getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ATTACHMENT_LINK", + ); + expect( + screen.getByTestId(`chat-composer-attachment-description-${index}`).getAttribute("data-paste-element"), + ).toEqual("CHAT_COMPOSER_ATTACHMENT_DESCRIPTION"); + }); }); - }); - - it("should set maxHeight with the maxHeight prop", async () => { - render( - - - , - ); - - const wrapper = screen.getByRole("textbox").parentElement; - await waitFor(() => { - expect(wrapper).toHaveStyleRule("max-height", "5.5rem"); - }); - }); - - it("should call onChange function", async () => { - const onChangeMock: jest.Mock = jest.fn(); - - render(); - - const contentEditable = screen.getByRole("textbox"); - userEvent.type(contentEditable, "foo bar"); - waitFor(() => { - expect(onChangeMock).toHaveBeenCalledTimes(1); + it("should set custom element data attribute", () => { + render(); + expect(screen.getByTestId("chat-composer-container").getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER_CONTAINER", + ); + // data-testid getting set on lexiocal elemnt not the paste wrapper so need to check parent node + expect(screen.getByTestId("my-composer").parentElement?.getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER", + ); + expect(screen.getByTestId("chat-composer-action-group").getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER_ACTION_GROUP", + ); + expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER_ATTACHMENT_GROUP", + ); + attatchments.forEach((attatchment, index) => { + expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER_ATTACHMENT_CARD", + ); + expect(screen.getByTestId(`chat-composer-attachment-${index}`).getAttribute("data-paste-element")).toEqual( + `CUSTOM_CHAT_COMPOSER_ATTACHMENT-${index}`, + ); + expect(screen.getByTestId(`chat-composer-attachment-link-${index}`).getAttribute("data-paste-element")).toEqual( + `CUSTOM_CHAT_COMPOSER_ATTACHMENT_LINK-${index}`, + ); + expect( + screen.getByTestId(`chat-composer-attachment-description-${index}`).getAttribute("data-paste-element"), + ).toEqual(`CUSTOM_CHAT_COMPOSER_ATTACHMENT_DESCRIPTION-${index}`); + }); }); }); }); From 6e47e71055cb8550bdda15ca90bd5c8bd478479d Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 24 Jun 2024 08:36:07 -0500 Subject: [PATCH 08/76] feat(composer): import cleanup --- .../components/chat-composer/__tests__/ChatComposer.spec.tsx | 2 +- .../components/chat-composer/__tests__/index.spec.tsx | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx index bc62da9f95..7da47f6059 100644 --- a/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx @@ -1,4 +1,4 @@ -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; import { Theme } from "@twilio-paste/theme"; diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index 5bf4385ee8..bd4c3b23b7 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -1,12 +1,9 @@ -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; -import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; -import { Theme } from "@twilio-paste/theme"; import * as React from "react"; From 9ff59ced763b9fca6806279c37122ad2bec40947 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 08:19:54 -0500 Subject: [PATCH 09/76] feat(composer): build changes --- packages/paste-codemods/tools/.cache/mappings.json | 7 +++++++ yarn.lock | 8 ++++++++ 2 files changed, 15 insertions(+) diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index 4c1b330799..26c73102ef 100644 --- a/packages/paste-codemods/tools/.cache/mappings.json +++ b/packages/paste-codemods/tools/.cache/mappings.json @@ -46,6 +46,13 @@ "CalloutText": "@twilio-paste/core/callout", "Card": "@twilio-paste/core/card", "ChatComposer": "@twilio-paste/core/chat-composer", + "ChatComposerActionGroup": "@twilio-paste/core/chat-composer", + "ChatComposerAttachment": "@twilio-paste/core/chat-composer", + "ChatComposerAttachmentCard": "@twilio-paste/core/chat-composer", + "ChatComposerAttachmentDescription": "@twilio-paste/core/chat-composer", + "ChatComposerAttachmentGroup": "@twilio-paste/core/chat-composer", + "ChatComposerAttachmentLink": "@twilio-paste/core/chat-composer", + "ChatComposerContainer": "@twilio-paste/core/chat-composer", "ChatAttachment": "@twilio-paste/core/chat-log", "ChatAttachmentDescription": "@twilio-paste/core/chat-log", "ChatAttachmentLink": "@twilio-paste/core/chat-log", diff --git a/yarn.lock b/yarn.lock index ef6f733466..2618579ebe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11874,15 +11874,23 @@ __metadata: version: 0.0.0-use.local resolution: "@twilio-paste/chat-composer@workspace:packages/paste-core/components/chat-composer" dependencies: + "@twilio-paste/anchor": ^12.1.0 "@twilio-paste/animation-library": ^2.0.0 "@twilio-paste/box": ^10.1.0 + "@twilio-paste/button": ^14.1.0 "@twilio-paste/color-contrast-utils": ^5.0.0 "@twilio-paste/customization": ^8.1.0 "@twilio-paste/design-tokens": ^10.2.0 + "@twilio-paste/icons": ^12.2.3 "@twilio-paste/lexical-library": ^4.1.0 + "@twilio-paste/media-object": ^10.1.0 + "@twilio-paste/screen-reader-only": ^13.1.0 + "@twilio-paste/stack": ^8.1.0 "@twilio-paste/style-props": ^9.1.0 "@twilio-paste/styling-library": ^3.0.0 + "@twilio-paste/text": ^10.1.0 "@twilio-paste/theme": ^11.0.0 + "@twilio-paste/truncate": ^14.1.0 "@twilio-paste/types": ^6.0.0 "@types/react": ^18.0.27 "@types/react-dom": ^18.0.10 From 8bcfc2a91dfc4e6144609ef9e577da8fdddf781f Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 13:40:56 -0500 Subject: [PATCH 10/76] feat(composer): responsive columns and JS doc --- .../src/ChatComposerActionGroup.tsx | 2 +- .../src/ChatComposerAttachmentGroup.tsx | 54 ++++--- .../src/ChatComposerContainer.tsx | 15 +- .../stories/container.stories.tsx | 136 +++++++++++++----- 4 files changed, 153 insertions(+), 54 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx index 6318ae8b2c..de5a553a1b 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -8,7 +8,7 @@ export interface ChatComposerActionGroupProps { * Overrides the default element name to apply unique styles with the Customization Provider * @default 'CHAT_COMPOSER_ACTION_GROUP' * @type {BoxProps['element']} - * @memberof PageHeaderProps + * @memberof ChatComposerActionGroupProps */ element?: BoxProps["element"]; } diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 92533e6c61..89eeb3a6db 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -1,5 +1,6 @@ import type { BoxProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import { ResponsiveValue } from "@twilio-paste/styling-library"; import * as React from "react"; export interface ChatComposerAttachmentGroupProps { @@ -8,29 +9,46 @@ export interface ChatComposerAttachmentGroupProps { * Overrides the default element name to apply unique styles with the Customization Provider * @default 'CHAT_COMPOSER_ATTACHMENT_GROUP' * @type {BoxProps['element']} - * @memberof PageHeaderProps + * @memberof ChatComposerAttachmentGroupProps */ element?: BoxProps["element"]; + /** + * Sets the number of columns in the attachement grid + * @default 2 + * @type number + * @memberof ChatComposerAttachmentGroupProps + */ + columns?: ResponsiveValue; } export const ChatComposerAttachmentGroup = React.forwardRef( - ({ element = "CHAT_COMPOSER_ATTACHMENT_GROUP", children, ...props }, ref) => ( - - {children} - - ), + ({ element = "CHAT_COMPOSER_ATTACHMENT_GROUP", columns = 2, children, ...props }, ref) => { + const getColumnStyles = () => { + if (columns instanceof Array) { + return columns.map((column) => `repeat(${column}, minmax(0,1fr))`); + } + return `repeat(${columns}, 1fr)`; + }; + return ( + + {children} + + ); + }, ); ChatComposerAttachmentGroup.displayName = "ChatComposerAttachmentGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index a320edaf08..1bdc2b5c90 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -22,20 +22,27 @@ export interface ChatComposerContainerProps { * Styling of the container * @default 'default' * @type {'default' | 'contained''} - * @memberof PageHeaderProps + * @memberof ChatComposerContainerProps */ variant?: "default" | "contained"; /** * Overrides the default element name to apply unique styles with the Customization Provider * @default 'CHAT_COMPOSER_CONTAINER' * @type {BoxProps['element']} - * @memberof PageHeaderProps + * @memberof ChatComposerContainerProps */ element?: BoxProps["element"]; + /** + * Sets the maximum height of the composer before scrolling + * @default 'size20' + * @type {BoxProps['maxHeight']} + * @memberof ChatComposerContainerProps + */ + maxHeight?: BoxProps["maxHeight"]; } export const ChatComposerContainer = React.forwardRef( - ({ variant = "default", element = "CHAT_COMPOSER_CONTAINER", children, ...props }, ref) => { + ({ variant = "default", element = "CHAT_COMPOSER_CONTAINER", maxHeight = "size30", children, ...props }, ref) => { const [isDisabled, setIsDisabled] = React.useState(false); return ( @@ -55,6 +62,8 @@ export const ChatComposerContainer = React.forwardRef {children} diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 62145a8c90..530337a947 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -82,22 +82,42 @@ export const ContainedVariantWithAttatchments: StoryFn = () => { - - {}}> - }> - Document-FINAL.doc - 123 MB - - - - - {}}> - }> - Document-FINAL.doc - 123 MB - - - + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + ); @@ -105,6 +125,62 @@ export const ContainedVariantWithAttatchments: StoryFn = () => { ContainedVariantWithAttatchments.storyName = "Contained Variant with Attatchments"; +export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { + return ( + + + + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + ); +}; + +ResponsiveContainedVariantWithAttatchments.storyName = "Responsive Contained Variant with Attatchments"; + export const ContainedDisabledVariant: StoryFn = () => { const [isDisabled, setIsDisabled] = React.useState(true); return ( @@ -180,22 +256,18 @@ export const CustomizationContainedVariantWithAttatchments: StoryFn = () => { - - {}}> - }> - Document-FINAL.doc - 123 MB - - - - - {}}> - }> - Document-FINAL.doc - 123 MB - - - + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + From 583d7585b497947cfa9e42344b294e6c9658222f Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 13:49:21 -0500 Subject: [PATCH 11/76] feat(anchor): border radius --- packages/paste-core/components/anchor/src/DefaultAnchor.tsx | 1 + packages/paste-core/components/anchor/src/InverseAnchor.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/paste-core/components/anchor/src/DefaultAnchor.tsx b/packages/paste-core/components/anchor/src/DefaultAnchor.tsx index f12f46648d..db24b5ae6b 100644 --- a/packages/paste-core/components/anchor/src/DefaultAnchor.tsx +++ b/packages/paste-core/components/anchor/src/DefaultAnchor.tsx @@ -22,6 +22,7 @@ const DefaultAnchor = React.forwardRef((props, r boxShadow: "shadowFocus", color: "colorTextLink", textDecoration: "underline", + borderRadius: "borderRadius20", }} _hover={{ color: "colorTextLinkStronger", diff --git a/packages/paste-core/components/anchor/src/InverseAnchor.tsx b/packages/paste-core/components/anchor/src/InverseAnchor.tsx index 3836919de4..f0e532c0f8 100644 --- a/packages/paste-core/components/anchor/src/InverseAnchor.tsx +++ b/packages/paste-core/components/anchor/src/InverseAnchor.tsx @@ -22,6 +22,7 @@ const InverseAnchor = React.forwardRef((props, r boxShadow: "shadowFocusInverse", color: "colorTextInverse", textDecoration: "underline", + borderRadius: "borderRadius20", }} _hover={{ color: "colorTextInverse", From 3993a048aa27c90465cedd2e4a03c300c6533519 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 13:52:08 -0500 Subject: [PATCH 12/76] feat(composer): changesets --- .changeset/great-coins-judge.md | 6 ++++++ .changeset/serious-kings-wink.md | 6 ++++++ 2 files changed, 12 insertions(+) create mode 100644 .changeset/great-coins-judge.md create mode 100644 .changeset/serious-kings-wink.md diff --git a/.changeset/great-coins-judge.md b/.changeset/great-coins-judge.md new file mode 100644 index 0000000000..830483dbc2 --- /dev/null +++ b/.changeset/great-coins-judge.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/chat-composer": minor +"@twilio-paste/core": minor +--- + +[ChatComposer] Added new components to allow contained variants, actions buttons and attachments diff --git a/.changeset/serious-kings-wink.md b/.changeset/serious-kings-wink.md new file mode 100644 index 0000000000..d4ae23ea22 --- /dev/null +++ b/.changeset/serious-kings-wink.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/anchor": patch +"@twilio-paste/core": patch +--- + +[Anchor] Added border radius to focus styling From a16718ca44a19fca4267c9ec2c87e975c89e4301 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 15:34:33 -0500 Subject: [PATCH 13/76] chore(composer): update typedocs --- .../components/chat-composer/type-docs.json | 6684 +++++++++++++++++ 1 file changed, 6684 insertions(+) diff --git a/packages/paste-core/components/chat-composer/type-docs.json b/packages/paste-core/components/chat-composer/type-docs.json index 8038774c44..4e67718a01 100644 --- a/packages/paste-core/components/chat-composer/type-docs.json +++ b/packages/paste-core/components/chat-composer/type-docs.json @@ -692,6 +692,12 @@ "required": false, "externalProp": true }, + "fontSize": { + "type": "\"inherit\" | \"100%\" | \"fontSize10\" | \"fontSize20\" | \"fontSize30\" | \"fontSize40\" | \"fontSize50\" | \"fontSize60\" | \"fontSize70\" | \"fontSize80\" | \"fontSize90\" | \"fontSize100\" | \"fontSize110\" | ... 5 more ... | { ...; }", + "defaultValue": "null", + "required": false, + "externalProp": false + }, "form": { "type": "string", "defaultValue": null, @@ -880,6 +886,12 @@ "required": false, "externalProp": true }, + "lineHeight": { + "type": "\"inherit\" | \"unset\" | \"lineHeight0\" | \"lineHeight05\" | \"lineHeight10\" | \"lineHeight20\" | \"lineHeight30\" | \"lineHeight40\" | \"lineHeight50\" | \"lineHeight60\" | \"lineHeight70\" | ... 8 more ... | { ...; }", + "defaultValue": "null", + "required": false, + "externalProp": false + }, "list": { "type": "string", "defaultValue": null, @@ -2290,5 +2302,6677 @@ "required": false, "externalProp": true } + }, + "ChatComposerActionGroup": { + "element": { + "type": "string", + "defaultValue": "'CHAT_COMPOSER_ACTION_GROUP'", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + } + }, + "ChatComposerAttachmentGroup": { + "columns": { + "type": "| number\n | (number | null)[]\n | { [x: string]: number | undefined; [x: number]: number | undefined }", + "defaultValue": "2", + "required": false, + "externalProp": false, + "description": "Sets the number of columns in the attachement grid" + }, + "element": { + "type": "string", + "defaultValue": "'CHAT_COMPOSER_ATTACHMENT_GROUP'", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + } + }, + "ChatComposerContainer": { + "element": { + "type": "string", + "defaultValue": "'CHAT_COMPOSER_CONTAINER'", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "maxHeight": { + "type": "| string\n | number\n | (string & {})\n | (MaxHeightOptions | null)[]\n | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }", + "defaultValue": "'size20'", + "required": false, + "externalProp": false, + "description": "Sets the maximum height of the composer before scrolling" + }, + "variant": { + "type": "\"default\" | \"contained\"", + "defaultValue": "'default'", + "required": false, + "externalProp": false, + "description": "Styling of the container" + } + }, + "ChatComposerAttachment": { + "attachmentIcon": { + "type": "NonNullable", + "defaultValue": "null", + "required": true, + "externalProp": false, + "description": "Pass an icon to use for the attachment message. DownloadIcon recommended" + }, + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "CHAT_COMPOSER_ATTACHMENT", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + }, + "ChatComposerAttachmentCard": { + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "CHAT_COMPOSER_ATTACHMENT_CARD", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "i18nDismissLabel": { + "type": "string", + "defaultValue": "Remove attachment", + "required": false, + "externalProp": false, + "description": "Accessible label for the dismiss button if dismissable" + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDismiss": { + "type": "() => void", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "Function to run when ChatComposerAttachmentCard is dismissed. Adds a close button" + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + }, + "ChatComposerAttachmentDescription": { + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "CHAT_COMPOSER_ATTACHMENT_DESCRIPTION", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + }, + "ChatComposerAttachmentLink": { + "href": { + "type": "string", + "defaultValue": "null", + "required": true, + "externalProp": false, + "description": "A URL to route to." + }, + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "columnGap": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `column-gap` property" + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "display": { + "type": "| Display\n | (Display | null | undefined)[]\n | { [x: string]: Display | undefined; [x: number]: Display | undefined }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop for the CSS `display` property" + }, + "download": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "CHAT_COMPOSER_ATTACHMENT_LINK", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "height": { + "type": "| string\n | number\n | (string & {})\n | (HeightOptions | null)[]\n | { [x: string]: HeightOptions; [x: number]: HeightOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `height` property" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "hrefLang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "i18nExternalLinkLabel": { + "type": "string", + "defaultValue": "'(link takes you to an external page)'", + "required": false, + "externalProp": false, + "description": "Title for `showExternal` icon" + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "margin": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin` property" + }, + "marginBottom": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-bottom` property" + }, + "marginLeft": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-left` property" + }, + "marginRight": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-right` property" + }, + "marginTop": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-top` property" + }, + "marginX": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-left` and `margin-right` properties" + }, + "marginY": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-top` and `margin-bottom` properties" + }, + "maxHeight": { + "type": "| string\n | number\n | (string & {})\n | (MaxHeightOptions | null)[]\n | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `max-height` property" + }, + "maxWidth": { + "type": "| string\n | number\n | (string & {})\n | (MaxWidthOptions | null)[]\n | { [x: string]: MaxWidthOptions; [x: number]: MaxWidthOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `max-width` property" + }, + "media": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "minHeight": { + "type": "| string\n | number\n | (string & {})\n | (MinHeightOptions | null)[]\n | { [x: string]: MinHeightOptions; [x: number]: MinHeightOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `min-height` property" + }, + "minWidth": { + "type": "| string\n | number\n | (string & {})\n | (MinWidthOptions | null)[]\n | { [x: string]: MinWidthOptions; [x: number]: MinWidthOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `min-width` property" + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "overflow": { + "type": "| Overflow\n | (Overflow | null | undefined)[]\n | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }", + "defaultValue": null, + "required": false, + "externalProp": false + }, + "overflowX": { + "type": "| OverflowX\n | (OverflowX | null | undefined)[]\n | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }", + "defaultValue": null, + "required": false, + "externalProp": false + }, + "overflowY": { + "type": "| OverflowY\n | (OverflowY | null | undefined)[]\n | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }", + "defaultValue": null, + "required": false, + "externalProp": false + }, + "padding": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding` property" + }, + "paddingBottom": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-bottom` property" + }, + "paddingLeft": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-left` property" + }, + "paddingRight": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-right` property" + }, + "paddingTop": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-top` property" + }, + "paddingX": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-left` and `padding-right` properties" + }, + "paddingY": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-top` and `padding-bottom` properties" + }, + "ping": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "referrerPolicy": { + "type": "HTMLAttributeReferrerPolicy", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "rel": { + "type": "string", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "Sets the anchor rel attribute. If external href, defaults to 'noreferrer noopener'. Can be overwritten." + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "rowGap": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "showExternal": { + "type": "boolean", + "defaultValue": false, + "required": false, + "externalProp": false, + "description": "Shows the link external icon." + }, + "size": { + "type": "string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions; } | (HeightOptions | null)[] | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `width` and `height` properties" + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "AnchorTabIndexes", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "Sets the anchor tabIndex attribute." + }, + "target": { + "type": "AnchorTargets", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "If external href, defaults to '_blank'. Can be overwritten." + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "type": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "variant": { + "type": "AnchorVariants", + "defaultValue": "'default'", + "required": false, + "externalProp": false, + "description": "Sets the styled Anchor variant" + }, + "verticalAlign": { + "type": "VerticalAlign<0 | (string & {})> | (VerticalAlign<0 | (string & {})> | null | undefined)[] | { [x: string]: VerticalAlign<0 | (string & {})> | undefined; [x: number]: VerticalAlign<...> | undefined; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop for the CSS `vertical-align` property" + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "width": { + "type": "| string\n | number\n | (string & {})\n | (WidthOptions | null)[]\n | { [x: string]: WidthOptions; [x: number]: WidthOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for the CSS `width` property" + } } } From eb46fc41a0a545db326777fb3d4f9a7a9f0aca46 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 16:00:24 -0500 Subject: [PATCH 14/76] chore(composer): fix lint --- .../components/chat-composer/__tests__/index.spec.tsx | 1 - .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index bd4c3b23b7..6ec7c5dc2a 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -4,7 +4,6 @@ import { Button } from "@twilio-paste/button"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; - import * as React from "react"; import { diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 89eeb3a6db..19f99629cb 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -23,8 +23,8 @@ export interface ChatComposerAttachmentGroupProps { export const ChatComposerAttachmentGroup = React.forwardRef( ({ element = "CHAT_COMPOSER_ATTACHMENT_GROUP", columns = 2, children, ...props }, ref) => { - const getColumnStyles = () => { - if (columns instanceof Array) { + const getColumnStyles = (): string | string[] => { + if (Array.isArray(columns)) { return columns.map((column) => `repeat(${column}, minmax(0,1fr))`); } return `repeat(${columns}, 1fr)`; From 1f8de1a425f446cb040d330ad0d1a6176383e1fe Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 18:36:52 -0500 Subject: [PATCH 15/76] chore(composer): missing codemod --- .changeset/fair-beds-exist.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fair-beds-exist.md diff --git a/.changeset/fair-beds-exist.md b/.changeset/fair-beds-exist.md new file mode 100644 index 0000000000..e6c4efcd1e --- /dev/null +++ b/.changeset/fair-beds-exist.md @@ -0,0 +1,5 @@ +--- +"@twilio-paste/codemods": minor +--- + +[ChatComposer] Added new components to allow contained variants, actions buttons and attachments From cccafd4f554bbd16b5015ebcb708b62766814ab5 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 28 Jun 2024 12:58:02 -0500 Subject: [PATCH 16/76] feat(composer): add new plugin to access state --- .../ai-chat-log/stories/composer.stories.tsx | 38 +- .../chat-composer/src/ChatComposer.tsx | 21 +- .../chat-composer/stories/logs.stories.tsx | 418 ++++++++++++++++++ .../paste-libraries/lexical/src/index.tsx | 1 + 4 files changed, 463 insertions(+), 15 deletions(-) create mode 100644 packages/paste-core/components/chat-composer/stories/logs.stories.tsx diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index d8d28b6f61..0de25e6cfa 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -4,7 +4,7 @@ import type { AIChat } from "@twilio-paste/ai-chat-log"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { ButtonGroup } from "@twilio-paste/button-group"; -import { ChatComposer } from "@twilio-paste/chat-composer"; +import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; @@ -14,10 +14,12 @@ import { COMMAND_PRIORITY_HIGH, ClearEditorPlugin, KEY_ENTER_COMMAND, + LexicalEditor, useLexicalComposerContext, } from "@twilio-paste/lexical-library"; import * as React from "react"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { AIChatLog, AIChatLogger, @@ -202,22 +204,15 @@ export const AIChatLogComposer = (): React.ReactNode => { if (message === "") return; push(createNewMessage(message)); }; + + const editorRef = React.useRef(null); + return ( - + { ariaLabel="Message" placeholder="Type here..." onChange={handleComposerChange} + editorInstanceRef={editorRef} > - - + + + + + ); }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index b174e1aec8..1e928f8a48 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -3,6 +3,11 @@ import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; import { // The component that renders the content editable div ContentEditable, + /* + * Adds the ability to access the Lexical editor instance from outside of the context + * https://lexical.dev/docs/react/plugins#lexicaleditorrefplugin + */ + EditorRefPlugin, /* * ErrorBoundary catches errors in any of the children * https://reactjs.org/docs/error-boundaries.html @@ -26,7 +31,12 @@ import { */ RichTextPlugin, } from "@twilio-paste/lexical-library"; -import type { ContentEditableProps, LexicalComposerProps, OnChangeFunction } from "@twilio-paste/lexical-library"; +import type { + ContentEditableProps, + LexicalComposerProps, + LexicalEditor, + OnChangeFunction, +} from "@twilio-paste/lexical-library"; import { StylingGlobals } from "@twilio-paste/styling-library"; import { ThemeShape } from "@twilio-paste/theme"; import merge from "deepmerge"; @@ -99,6 +109,13 @@ export interface ChatComposerProps extends Omit} + * @memberof ChatComposerProps + */ + editorInstanceRef?: React.MutableRefObject; } export const ChatComposer = React.forwardRef( @@ -114,6 +131,7 @@ export const ChatComposer = React.forwardRef( disabled, fontSize, lineHeight, + editorInstanceRef, ...props }, ref, @@ -173,6 +191,7 @@ export const ChatComposer = React.forwardRef( + {editorInstanceRef && } {children} diff --git a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx new file mode 100644 index 0000000000..290c3dd469 --- /dev/null +++ b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx @@ -0,0 +1,418 @@ +import type { StoryFn } from "@storybook/react"; +import { + AIChatLogger, + AIChatMessage, + AIChatMessageActionCard, + AIChatMessageActionGroup, + AIChatMessageAuthor, + AIChatMessageBody, + AIChatMessageLoading, + useAIChatLogger, +} from "@twilio-paste/ai-chat-log"; +import { Avatar } from "@twilio-paste/avatar"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { + Chat, + ChatAttachment, + ChatAttachmentDescription, + ChatAttachmentLink, + ChatBookend, + ChatBookendItem, + ChatBubble, + ChatEvent, + ChatLogger, + ChatMessage, + ChatMessageMeta, + ChatMessageMetaItem, + useChatLogger, +} from "@twilio-paste/chat-log"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import * as React from "react"; + +import { AIChat } from "@twilio-paste/ai-chat-log/src"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; +import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; +import { + $getRoot, + CLEAR_EDITOR_COMMAND, + COMMAND_PRIORITY_HIGH, + ClearEditorPlugin, + KEY_ENTER_COMMAND, + LexicalEditor, + useLexicalComposerContext, +} from "@twilio-paste/lexical-library"; +import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "../src"; + +export default { + title: "Components/Chat Composer/LogsExperience", + component: ChatComposer, + parameters: { + a11y: { + // no need to a11y check customization + disable: true, + }, + }, +}; + +const EnterKeySubmitPlugin = ({ onKeyDown }: { onKeyDown: () => void }): null => { + const [editor] = useLexicalComposerContext(); + + const handleEnterKey = React.useCallback( + (event: KeyboardEvent) => { + const { shiftKey, ctrlKey } = event; + if (shiftKey || ctrlKey) return false; + event.preventDefault(); + event.stopPropagation(); + onKeyDown(); + editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + return true; + }, + [editor, onKeyDown], + ); + + React.useEffect(() => { + return editor.registerCommand(KEY_ENTER_COMMAND, handleEnterKey, COMMAND_PRIORITY_HIGH); + }, [editor, handleEnterKey]); + return null; +}; + +function getRandomInt(max: number): number { + return Math.floor(Math.random() * max); +} + +const createNewMessage = (message: string): Omit => { + const time = new Date().toLocaleString("en-US", { + hour: "numeric", + minute: "numeric", + hour12: true, + }); + + const messageDirection = getRandomInt(2) === 1 ? "inbound" : "outbound"; + + return { + variant: messageDirection, + content: ( + + {message} + + {time} + + + ), + }; +}; + +export const ChatLogStory: StoryFn = () => { + const { chats, push } = useChatLogger( + { + content: ( + + Today + + Chat Started・3:34 PM + + + ), + }, + { + variant: "inbound", + content: ( + + Quisque ullamcorper ipsum vitae lorem euismod sodales. + + }> + Document-FINAL.doc + 123 MB + + + + Gibby Radki ・ 5:04 PM + + + ), + }, + { + content: ( + + Lauren Gardner has joined the chat ・ 4:26 PM + + ), + }, + { + variant: "inbound", + content: ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + Lauren Gardner ・ 4:30 PM + + + + ), + }, + ); + const [message, setMessage] = React.useState(""); + + const [mounted, setMounted] = React.useState(false); + const loggerRef = React.useRef(null); + const scrollerRef = React.useRef(null); + + React.useEffect(() => { + setMounted(true); + }, []); + + React.useEffect(() => { + if (!mounted || !loggerRef.current) return; + scrollerRef.current?.scrollTo({ top: loggerRef.current.scrollHeight, behavior: "smooth" }); + }, [chats, mounted]); + + const handleComposerChange = (editorState) => { + editorState.read(() => { + const text = $getRoot().getTextContent(); + setMessage(text); + }); + }; + + const submitMessage = () => { + if (message === "") return; + push(createNewMessage(message)); + }; + + const editorRef = React.useRef(null); + + return ( + + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + onChange={handleComposerChange} + editorInstanceRef={editorRef} + > + + + + + + + + + + + ); +}; + +ChatLogStory.storyName = "Chat Log"; + +const BotMessage = (props): JSX.Element => { + const [isLoading, setIsLoading] = React.useState(true); + + setTimeout(() => { + setIsLoading(false); + }, 3000); + return isLoading ? ( + + Good Bot + { + setIsLoading(false); + }} + /> + + ) : ( + + Good Bot + {props.message as string} + + ); +}; + +// eslint-disable-next-line storybook/prefer-pascal-case +const createNewAIMessage = (message: string): Omit => { + const messageDirection = getRandomInt(2) === 1 ? "user" : "bot"; + + return { + variant: messageDirection, + content: + messageDirection === "user" ? ( + + Gibby Radki + {message} + + ) : ( + + + + ), + }; +}; + +export const AIChatLogComposer = (): React.ReactNode => { + const { aiChats, push } = useAIChatLogger( + { + variant: "user", + content: ( + + Gibby Radki + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus eligendi + iure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit nesciunt + impedit repellat assumenda. + + + ), + }, + { + variant: "bot", + content: ( + + Good Bot + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus + eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit + nesciunt impedit repellat assumenda. + + + + + + + + + + + Is this helpful? + + + + + + ), + }, + ); + const [message, setMessage] = React.useState(""); + + const [mounted, setMounted] = React.useState(false); + const loggerRef = React.useRef(null); + const scrollerRef = React.useRef(null); + + React.useEffect(() => { + setMounted(true); + }, []); + + React.useEffect(() => { + if (!mounted || !loggerRef.current) return; + const scrollPosition: any = scrollerRef.current; + const scrollHeight: any = loggerRef.current; + scrollPosition?.scrollTo({ top: scrollHeight.scrollHeight, behavior: "smooth" }); + }, [aiChats, mounted]); + + const handleComposerChange = (editorState): void => { + editorState.read(() => { + const text = $getRoot().getTextContent(); + setMessage(text); + }); + }; + + const submitMessage = (): void => { + if (message === "") return; + push(createNewAIMessage(message)); + }; + + const editorRef = React.useRef(null); + + return ( + + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + onChange={handleComposerChange} + editorInstanceRef={editorRef} + > + + + + + + + + + + ); +}; +AIChatLogComposer.storyName = "AI Chat Log"; +AIChatLogComposer.parameters = { + a11y: { + // no need to a11y check composition of a11y checked components + disable: true, + }, +}; diff --git a/packages/paste-libraries/lexical/src/index.tsx b/packages/paste-libraries/lexical/src/index.tsx index 5880e35649..a2634e7f4b 100644 --- a/packages/paste-libraries/lexical/src/index.tsx +++ b/packages/paste-libraries/lexical/src/index.tsx @@ -32,6 +32,7 @@ export { TablePlugin } from "@lexical/react/LexicalTablePlugin"; export { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin"; export { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin"; export { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin"; +export { EditorRefPlugin } from "@lexical/react/LexicalEditorRefPlugin"; export { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; export type LexicalComposerProps = React.ComponentProps; From 5caf93379428230e370dbea8d8812caf48b48d00 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 28 Jun 2024 13:05:43 -0500 Subject: [PATCH 17/76] feat(composer): fix lint issues --- .../ai-chat-log/stories/composer.stories.tsx | 2 +- .../chat-composer/stories/logs.stories.tsx | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index 0de25e6cfa..a83c0d4194 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -5,6 +5,7 @@ import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { ButtonGroup } from "@twilio-paste/button-group"; import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; @@ -19,7 +20,6 @@ import { } from "@twilio-paste/lexical-library"; import * as React from "react"; -import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { AIChatLog, AIChatLogger, diff --git a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx index 290c3dd469..6002f53697 100644 --- a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx @@ -1,5 +1,6 @@ import type { StoryFn } from "@storybook/react"; import { + AIChat, AIChatLogger, AIChatMessage, AIChatMessageActionCard, @@ -12,6 +13,7 @@ import { import { Avatar } from "@twilio-paste/avatar"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; import { Chat, ChatAttachment, @@ -30,10 +32,6 @@ import { import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; -import * as React from "react"; - -import { AIChat } from "@twilio-paste/ai-chat-log/src"; -import { ButtonGroup } from "@twilio-paste/button-group"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; import { @@ -45,6 +43,8 @@ import { LexicalEditor, useLexicalComposerContext, } from "@twilio-paste/lexical-library"; +import * as React from "react"; + import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "../src"; export default { @@ -172,14 +172,14 @@ export const ChatLogStory: StoryFn = () => { scrollerRef.current?.scrollTo({ top: loggerRef.current.scrollHeight, behavior: "smooth" }); }, [chats, mounted]); - const handleComposerChange = (editorState) => { + const handleComposerChange = (editorState): void => { editorState.read(() => { const text = $getRoot().getTextContent(); setMessage(text); }); }; - const submitMessage = () => { + const submitMessage = (): void => { if (message === "") return; push(createNewMessage(message)); }; From fec0c8448739a9a996b40a0c37d21551a56eaf4e Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 1 Jul 2024 09:19:29 -0500 Subject: [PATCH 18/76] chore(chat-composer): fix spellings --- .../chat-composer/__tests__/index.spec.tsx | 14 +++++++------- .../src/ChatComposerAttachmentGroup.tsx | 2 +- .../chat-composer/src/ChatComposerContainer.tsx | 2 +- .../chat-composer/stories/container.stories.tsx | 14 +++++++------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index 6ec7c5dc2a..098e232226 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -24,7 +24,7 @@ const baseConfig = { }, }; -const attatchments = [ +const attachments = [ { name: "Document-FINAL.doc", size: "123 MB", @@ -56,7 +56,7 @@ const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock } - {attatchments.map((attatchment, index) => ( + {attachments.map((attatchment, index) => ( { attatchmentCloseSpy(attatchment.name); @@ -108,7 +108,7 @@ const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: j data-testid="chat-composer-attachement-group" element="CUSTOM_CHAT_COMPOSER_ATTACHMENT_GROUP" > - {attatchments.map((attatchment, index) => ( + {attachments.map((attatchment, index) => ( { attatchmentCloseSpy(attatchment.name); @@ -150,13 +150,13 @@ describe("ChatComposer", () => { expect(screen.getByText("Type here...")).toBeDefined(); expect(screen.getByRole("button", { name: "Attach" })).toBeDefined(); expect(screen.getByRole("button", { name: "Send" })).toBeDefined(); - attatchments.forEach((attatchment) => { + attachments.forEach((attatchment) => { expect(screen.getByText(attatchment.name)).toBeDefined(); expect(screen.getByText(attatchment.size)).toBeDefined(); }); screen.getAllByRole("button", { name: "Remove attachment" }).forEach((button, index) => { userEvent.click(button); - expect(spy).toHaveBeenCalledWith(attatchments[index].name); + expect(spy).toHaveBeenCalledWith(attachments[index].name); }); }); @@ -176,7 +176,7 @@ describe("ChatComposer", () => { expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( "CHAT_COMPOSER_ATTACHMENT_GROUP", ); - attatchments.forEach((attatchment, index) => { + attachments.forEach((attatchment, index) => { expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( "CHAT_COMPOSER_ATTACHMENT_CARD", ); @@ -207,7 +207,7 @@ describe("ChatComposer", () => { expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( "CUSTOM_CHAT_COMPOSER_ATTACHMENT_GROUP", ); - attatchments.forEach((attatchment, index) => { + attachments.forEach((attatchment, index) => { expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( "CUSTOM_CHAT_COMPOSER_ATTACHMENT_CARD", ); diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 19f99629cb..859746b6b6 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -34,7 +34,7 @@ export const ChatComposerAttachmentGroup = React.forwardRef { ContainedVariant.storyName = "Contained Variant"; -export const ContainedVariantWithAttatchments: StoryFn = () => { +export const ContainedVariantWithAttachments: StoryFn = () => { return ( @@ -123,9 +123,9 @@ export const ContainedVariantWithAttatchments: StoryFn = () => { ); }; -ContainedVariantWithAttatchments.storyName = "Contained Variant with Attatchments"; +ContainedVariantWithAttachments.storyName = "Contained Variant with Attachments"; -export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { +export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { return ( @@ -179,7 +179,7 @@ export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { ); }; -ResponsiveContainedVariantWithAttatchments.storyName = "Responsive Contained Variant with Attatchments"; +ResponsiveContainedVariantWithAttachments.storyName = "Responsive Contained Variant with Attachments"; export const ContainedDisabledVariant: StoryFn = () => { const [isDisabled, setIsDisabled] = React.useState(true); @@ -212,7 +212,7 @@ export const ContainedDisabledVariant: StoryFn = () => { ContainedDisabledVariant.storyName = "Contained Disabled Variant"; -export const CustomizationContainedVariantWithAttatchments: StoryFn = () => { +export const CustomizationContainedVariantWithAttachments: StoryFn = () => { const theme = useTheme(); return ( @@ -274,8 +274,8 @@ export const CustomizationContainedVariantWithAttatchments: StoryFn = () => { ); }; -CustomizationContainedVariantWithAttatchments.storyName = "Customization Contained Variant with Attatchments"; -CustomizationContainedVariantWithAttatchments.parameters = { +CustomizationContainedVariantWithAttachments.storyName = "Customization Contained Variant with Attachments"; +CustomizationContainedVariantWithAttachments.parameters = { a11y: { // no need to a11y check customization disable: true, From 15f7020006dc05c5934cd40e192ac8f7753279c6 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 1 Jul 2024 09:25:08 -0500 Subject: [PATCH 19/76] chore(chat-composer): styling updates from PR comments --- .../chat-composer/src/ChatComposerActionGroup.tsx | 1 + .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 3 +-- .../components/chat-composer/src/ChatComposerContainer.tsx | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx index de5a553a1b..d325ff26f0 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -26,6 +26,7 @@ export const ChatComposerActionGroup = React.forwardRef {children} diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 859746b6b6..189c772b8f 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -40,9 +40,8 @@ export const ChatComposerAttachmentGroup = React.forwardRef {children} diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index bd90faf9d0..f1e9a92792 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -12,7 +12,8 @@ const Styles = { borderStyle: "solid", borderRadius: "borderRadius30" as ThemeShape["radii"], borderColor: "colorBorderWeaker" as ThemeShape["borderColors"], - boxShadow: "shadowBorderLow" as ThemeShape["shadows"], + boxShadow: "shadowLow" as ThemeShape["shadows"], + backgroundColor: "colorBackgroundBody" as ThemeShape["backgroundColors"], }, }; @@ -61,9 +62,10 @@ export const ChatComposerContainer = React.forwardRef {children} From b87b86da7a5b53a08d485c026180b8d771415278 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 2 Jul 2024 10:02:37 -0500 Subject: [PATCH 20/76] chore(chat-composer): udpate typedocs --- packages/paste-core/components/chat-composer/type-docs.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/paste-core/components/chat-composer/type-docs.json b/packages/paste-core/components/chat-composer/type-docs.json index 4e67718a01..8c79c81a13 100644 --- a/packages/paste-core/components/chat-composer/type-docs.json +++ b/packages/paste-core/components/chat-composer/type-docs.json @@ -679,6 +679,12 @@ "required": false, "externalProp": true }, + "editorInstanceRef": { + "type": "MutableRefObject", + "defaultValue": "null", + "required": false, + "externalProp": false + }, "element": { "type": "string", "defaultValue": "CHAT_COMPOSER", From 019f6d5a40ef49160ae26eb968c5c2517af44356 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 2 Jul 2024 10:10:41 -0500 Subject: [PATCH 21/76] chore(lexical-library): added changeset for export --- .changeset/nasty-beans-fetch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nasty-beans-fetch.md diff --git a/.changeset/nasty-beans-fetch.md b/.changeset/nasty-beans-fetch.md new file mode 100644 index 0000000000..41d4b16e79 --- /dev/null +++ b/.changeset/nasty-beans-fetch.md @@ -0,0 +1,5 @@ +--- +"@twilio-paste/lexical-library": patch +--- + +[Lexical] added export for EditorRefPlugin From 6bdf52367724eb77db9865f1f0467ee1b461a073 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 2 Jul 2024 10:53:27 -0500 Subject: [PATCH 22/76] chore(lexical-library): update changeset --- .changeset/nasty-beans-fetch.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/nasty-beans-fetch.md b/.changeset/nasty-beans-fetch.md index 41d4b16e79..40016d5a6c 100644 --- a/.changeset/nasty-beans-fetch.md +++ b/.changeset/nasty-beans-fetch.md @@ -1,5 +1,6 @@ --- "@twilio-paste/lexical-library": patch +"@twilio-paste/core": patch --- [Lexical] added export for EditorRefPlugin From 6dc1f8fac4bd651eedab11bfacea2684c19af0f9 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 8 Jul 2024 07:29:17 -0500 Subject: [PATCH 23/76] chore(chat-composer): naming updates --- .../chat-composer/__tests__/index.spec.tsx | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index 098e232226..d1fd5ac384 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -37,8 +37,8 @@ const attachments = [ }, ]; -const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock }> = ({ - attatchmentCloseSpy = jest.fn(), +const ExampleChatComposerContained: React.FC<{ attachmentCloseSpy?: jest.Mock }> = ({ + attachmentCloseSpy = jest.fn(), }) => ( - {attachments.map((attatchment, index) => ( + {attachments.map((attachment, index) => ( { - attatchmentCloseSpy(attatchment.name); + attachmentCloseSpy(attachment.name); }} key={`attachment=${index}`} data-testid={`chat-composer-attachment-card-${index}`} @@ -68,11 +68,11 @@ const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock } attachmentIcon={} data-testid={`chat-composer-attachment-${index}`} > - - {attatchment.name} + + {attachment.name} - {attatchment.size} + {attachment.size} @@ -81,8 +81,8 @@ const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock } ); -const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock }> = ({ - attatchmentCloseSpy = jest.fn(), +const CustomizedExampleChatComposerContained: React.FC<{ attachmentCloseSpy?: jest.Mock }> = ({ + attachmentCloseSpy = jest.fn(), }) => ( - {attachments.map((attatchment, index) => ( + {attachments.map((attachment, index) => ( { - attatchmentCloseSpy(attatchment.name); + attachmentCloseSpy(attachment.name); }} key={`attachment=${index}`} data-testid={`chat-composer-attachment-card-${index}`} @@ -123,17 +123,17 @@ const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: j element={`CUSTOM_CHAT_COMPOSER_ATTACHMENT-${index}`} > - {attatchment.name} + {attachment.name} - {attatchment.size} + {attachment.size} @@ -145,14 +145,14 @@ const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: j describe("ChatComposer", () => { it("should render", () => { const spy = jest.fn(); - render(); + render(); expect(screen.getByRole("textbox")).toBeDefined(); expect(screen.getByText("Type here...")).toBeDefined(); expect(screen.getByRole("button", { name: "Attach" })).toBeDefined(); expect(screen.getByRole("button", { name: "Send" })).toBeDefined(); - attachments.forEach((attatchment) => { - expect(screen.getByText(attatchment.name)).toBeDefined(); - expect(screen.getByText(attatchment.size)).toBeDefined(); + attachments.forEach((attachment) => { + expect(screen.getByText(attachment.name)).toBeDefined(); + expect(screen.getByText(attachment.size)).toBeDefined(); }); screen.getAllByRole("button", { name: "Remove attachment" }).forEach((button, index) => { userEvent.click(button); @@ -176,7 +176,7 @@ describe("ChatComposer", () => { expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( "CHAT_COMPOSER_ATTACHMENT_GROUP", ); - attachments.forEach((attatchment, index) => { + attachments.forEach((attachment, index) => { expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( "CHAT_COMPOSER_ATTACHMENT_CARD", ); @@ -207,7 +207,7 @@ describe("ChatComposer", () => { expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( "CUSTOM_CHAT_COMPOSER_ATTACHMENT_GROUP", ); - attachments.forEach((attatchment, index) => { + attachments.forEach((attachment, index) => { expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( "CUSTOM_CHAT_COMPOSER_ATTACHMENT_CARD", ); From 8390eb8f9309e6bf8a20e62f129e821f66431f23 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 8 Jul 2024 14:24:14 -0500 Subject: [PATCH 24/76] chore(chat-composer): chnage stlying types --- .../ai-chat-log/src/AIChatMessageBody.tsx | 13 ++++++------- .../components/chat-composer/src/ChatComposer.tsx | 7 +++---- .../chat-composer/src/ChatComposerContainer.tsx | 15 +++++++-------- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx b/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx index d81589c611..ef51fe17df 100644 --- a/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx +++ b/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx @@ -1,19 +1,18 @@ import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; -import type { BoxElementProps } from "@twilio-paste/box"; -import type { ThemeShape } from "@twilio-paste/theme"; +import type { BoxElementProps, BoxStyleProps } from "@twilio-paste/box"; import type { HTMLPasteProps } from "@twilio-paste/types"; import * as React from "react"; import { AIMessageContext } from "./AIMessageContext"; -const Sizes = { +const Sizes: Record = { default: { - fontSize: "fontSize30" as ThemeShape["fontSizes"], - lineHeight: "lineHeight30" as ThemeShape["lineHeights"], + fontSize: "fontSize30", + lineHeight: "lineHeight30", }, fullScreen: { - fontSize: "fontSize40" as ThemeShape["fontSizes"], - lineHeight: "lineHeight40" as ThemeShape["lineHeights"], + fontSize: "fontSize40", + lineHeight: "lineHeight40", }, }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 1e928f8a48..6b32c2b81a 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -38,7 +38,6 @@ import type { OnChangeFunction, } from "@twilio-paste/lexical-library"; import { StylingGlobals } from "@twilio-paste/styling-library"; -import { ThemeShape } from "@twilio-paste/theme"; import merge from "deepmerge"; import * as React from "react"; @@ -144,7 +143,7 @@ export const ChatComposer = React.forwardRef( editorState: initialValue ? () => renderInitialText(initialValue) : undefined, }; - const getDisabledStyling = React.useCallback(() => { + const getDisabledStyling = React.useCallback((): BoxStyleProps => { /** * If setIsDisabled is defined, then the styling will be handled by ChatComposerContainer. * If it is not defined, then the styling will be handled by ChatComposer. Using both causes the diabled style tochange @@ -154,8 +153,8 @@ export const ChatComposer = React.forwardRef( return {}; } return { - color: "colorTextWeaker" as ThemeShape["textColors"], - backgroundColor: "colorBackground" as ThemeShape["backgroundColors"], + color: "colorTextWeaker", + backgroundColor: "colorBackground", }; }, [Boolean(setIsDisabled)]); diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index f1e9a92792..5592c90578 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -1,19 +1,18 @@ -import type { BoxProps } from "@twilio-paste/box"; +import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; -import { ThemeShape } from "@twilio-paste/theme"; import * as React from "react"; import { ChatComposerContext } from "./ChatComposerContext"; -const Styles = { +const Styles: Record = { default: {}, contained: { - borderWidth: "borderWidth10" as ThemeShape["borderWidths"], + borderWidth: "borderWidth10", borderStyle: "solid", - borderRadius: "borderRadius30" as ThemeShape["radii"], - borderColor: "colorBorderWeaker" as ThemeShape["borderColors"], - boxShadow: "shadowLow" as ThemeShape["shadows"], - backgroundColor: "colorBackgroundBody" as ThemeShape["backgroundColors"], + borderRadius: "borderRadius30", + borderColor: "colorBorderWeaker", + boxShadow: "shadowLow", + backgroundColor: "colorBackgroundBody", }, }; From ad6c2b77f5d13447da86e33d1e2e88273e6cdb05 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 8 Jul 2024 15:27:10 -0500 Subject: [PATCH 25/76] chore(ai-chatl-log): added changeset --- .changeset/khaki-boats-help.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/khaki-boats-help.md diff --git a/.changeset/khaki-boats-help.md b/.changeset/khaki-boats-help.md new file mode 100644 index 0000000000..12941a9591 --- /dev/null +++ b/.changeset/khaki-boats-help.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/alert-dialog": patch +"@twilio-paste/core": patch +--- + +[AI Chat Log] Updated internal styling types From d0d5b67d467a0aed61b86637948864b67b8d9599 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 9 Jul 2024 12:54:47 -0500 Subject: [PATCH 26/76] chore(ai-chatl-log): updated changeset --- .changeset/khaki-boats-help.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/khaki-boats-help.md b/.changeset/khaki-boats-help.md index 12941a9591..60a75b1bdc 100644 --- a/.changeset/khaki-boats-help.md +++ b/.changeset/khaki-boats-help.md @@ -1,6 +1,6 @@ --- -"@twilio-paste/alert-dialog": patch +"@twilio-paste/ai-chat-log": patch "@twilio-paste/core": patch --- -[AI Chat Log] Updated internal styling types +[AIChatLog] Updated internal styling types From a0636ef91d6b88429bc84c480d7fb9f4b1f78372 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 9 Jul 2024 15:58:25 -0500 Subject: [PATCH 27/76] chore(chat-composer): pr cleanup --- .../ai-chat-log/stories/composer.stories.tsx | 2 +- .../components/chat-composer/src/ChatComposer.tsx | 4 ++-- .../chat-composer/src/ChatComposerContainer.tsx | 4 ++-- ...leDisabledPlugin.tsx => ToggleEditablePlugin.tsx} | 0 .../chat-composer/stories/container.stories.tsx | 12 ++++++------ .../chat-composer/stories/logs.stories.tsx | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) rename packages/paste-core/components/chat-composer/src/{ToggleDisabledPlugin.tsx => ToggleEditablePlugin.tsx} (100%) diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index a83c0d4194..1daf198a31 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -231,7 +231,7 @@ export const AIChatLogComposer = (): React.ReactNode => { - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB @@ -138,41 +125,29 @@ export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB @@ -222,9 +197,8 @@ export const CustomizationContainedVariantWithAttachments: StoryFn = () => { CHAT_COMPOSER: { color: "colorTextBrandHighlight" }, CHAT_COMPOSER_PLACEHOLDER_WRAPPER: { color: "colorTextBrandHighlight" }, CHAT_COMPOSER_ACTION_GROUP: { columnGap: "space90" }, - CHAT_COMPOSER_ATTACHMENT: { height: "size10" }, - CHAT_COMPOSER_ATTACHMENT_ICON: { color: "colorTextDestructive" }, - CHAT_COMPOSER_ATTACHMENT_BODY: { fontFamily: "fontFamilyCode" }, + CHAT_COMPOSER_ATTACHMENT_CARD_ICON: { color: "colorTextDestructive" }, + CHAT_COMPOSER_ATTACHMENT_CARD_BODY: { fontFamily: "fontFamilyCode" }, CHAT_COMPOSER_ATTACHMENT_CARD: { backgroundColor: "colorBackgroundDecorative10Weakest" }, CHAT_COMPOSER_ATTACHMENT_CARD_REMOVE_BUTTON: { color: "colorTextIconBrandHighlight" }, CHAT_COMPOSER_ATTACHMENT_DESCRIPTION: { @@ -256,17 +230,13 @@ export const CustomizationContainedVariantWithAttachments: StoryFn = () => { - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB diff --git a/packages/paste-core/components/chat-composer/type-docs.json b/packages/paste-core/components/chat-composer/type-docs.json index 8c79c81a13..adf852a591 100644 --- a/packages/paste-core/components/chat-composer/type-docs.json +++ b/packages/paste-core/components/chat-composer/type-docs.json @@ -2344,7 +2344,7 @@ }, "maxHeight": { "type": "| string\n | number\n | (string & {})\n | (MaxHeightOptions | null)[]\n | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }", - "defaultValue": "'size20'", + "defaultValue": "'size30'", "required": false, "externalProp": false, "description": "Sets the maximum height of the composer before scrolling" @@ -2357,7 +2357,7 @@ "description": "Styling of the container" } }, - "ChatComposerAttachment": { + "ChatComposerAttachmentCard": { "attachmentIcon": { "type": "NonNullable", "defaultValue": "null", @@ -2779,1589 +2779,6 @@ "required": false, "externalProp": true }, - "element": { - "type": "string", - "defaultValue": "CHAT_COMPOSER_ATTACHMENT", - "required": false, - "externalProp": false, - "description": "Overrides the default element name to apply unique styles with the Customization Provider" - }, - "hidden": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "id": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "inlist": { - "type": "any", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "inputMode": { - "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" - }, - "is": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Specify that a standard HTML element should behave like a defined custom built-in element" - }, - "itemID": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "itemProp": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "itemRef": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "itemScope": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "itemType": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "key": { - "type": "Key", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "lang": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "nonce": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAbort": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAbortCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationEnd": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationEndCapture": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationIteration": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationIterationCapture": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationStart": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationStartCapture": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAuxClick": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAuxClickCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onBeforeInput": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onBeforeInputCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onBlur": { - "type": "FocusEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onBlurCapture": { - "type": "FocusEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCanPlay": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCanPlayCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCanPlayThrough": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCanPlayThroughCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onChange": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onChangeCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onClick": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onClickCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionEnd": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionEndCapture": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionStart": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionStartCapture": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionUpdate": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionUpdateCapture": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onContextMenu": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onContextMenuCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCopy": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCopyCapture": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCut": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCutCapture": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDoubleClick": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDoubleClickCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDrag": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragEnd": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragEndCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragEnter": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragEnterCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragExit": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragExitCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragLeave": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragLeaveCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragOver": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragOverCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragStart": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragStartCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDrop": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDropCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDurationChange": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDurationChangeCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEmptied": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEmptiedCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEncrypted": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEncryptedCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEnded": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEndedCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onError": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onErrorCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onFocus": { - "type": "FocusEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onFocusCapture": { - "type": "FocusEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onGotPointerCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onGotPointerCaptureCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onInput": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onInputCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onInvalid": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onInvalidCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyDown": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyDownCapture": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyPress": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyPressCapture": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyUp": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyUpCapture": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoad": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadedData": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadedDataCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadedMetadata": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadedMetadataCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadStart": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadStartCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLostPointerCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLostPointerCaptureCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseDown": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseDownCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseEnter": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseLeave": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseMove": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseMoveCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseOut": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseOutCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseOver": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseOverCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseUp": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseUpCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPaste": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPasteCapture": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPause": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPauseCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPlay": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPlayCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPlaying": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPlayingCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerCancel": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerCancelCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerDown": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerDownCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerEnter": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerEnterCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerLeave": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerLeaveCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerMove": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerMoveCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerOut": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerOutCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerOver": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerOverCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerUp": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerUpCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onProgress": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onProgressCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onRateChange": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onRateChangeCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onReset": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onResetCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onResize": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onResizeCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onScroll": { - "type": "UIEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onScrollCapture": { - "type": "UIEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSeeked": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSeekedCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSeeking": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSeekingCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSelect": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSelectCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onStalled": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onStalledCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSubmit": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSubmitCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSuspend": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSuspendCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTimeUpdate": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTimeUpdateCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchCancel": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchCancelCapture": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchEnd": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchEndCapture": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchMove": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchMoveCapture": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchStart": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchStartCapture": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTransitionEnd": { - "type": "TransitionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTransitionEndCapture": { - "type": "TransitionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onVolumeChange": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onVolumeChangeCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onWaiting": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onWaitingCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onWheel": { - "type": "WheelEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onWheelCapture": { - "type": "WheelEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "placeholder": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "prefix": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "property": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "radioGroup": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "resource": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "results": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "role": { - "type": "AriaRole", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "security": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "slot": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "spellCheck": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "suppressContentEditableWarning": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "suppressHydrationWarning": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "tabIndex": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "title": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "translate": { - "type": "\"yes\" | \"no\"", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "typeof": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "unselectable": { - "type": "\"on\" | \"off\"", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "vocab": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - } - }, - "ChatComposerAttachmentCard": { - "about": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "accessKey": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "aria-activedescendant": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." - }, - "aria-atomic": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." - }, - "aria-autocomplete": { - "type": "\"list\" | \"none\" | \"inline\" | \"both\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." - }, - "aria-busy": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." - }, - "aria-checked": { - "type": "boolean | \"true\" | \"false\" | \"mixed\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." - }, - "aria-colcount": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the total number of columns in a table, grid, or treegrid." - }, - "aria-colindex": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." - }, - "aria-colspan": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." - }, - "aria-controls": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." - }, - "aria-current": { - "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the element that represents the current item within a container or set of related elements." - }, - "aria-describedby": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element (or elements) that describes the object." - }, - "aria-details": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element that provides a detailed, extended description for the object." - }, - "aria-disabled": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." - }, - "aria-dropeffect": { - "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates what functions can be performed when a dragged object is released on the drop target." - }, - "aria-errormessage": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element that provides an error message for the object." - }, - "aria-expanded": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." - }, - "aria-flowto": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." - }, - "aria-grabbed": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." - }, - "aria-haspopup": { - "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." - }, - "aria-hidden": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether the element is exposed to an accessibility API." - }, - "aria-invalid": { - "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the entered value does not conform to the format expected by the application." - }, - "aria-keyshortcuts": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." - }, - "aria-label": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines a string value that labels the current element." - }, - "aria-labelledby": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element (or elements) that labels the current element." - }, - "aria-level": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the hierarchical level of an element within a structure." - }, - "aria-live": { - "type": "\"off\" | \"assertive\" | \"polite\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." - }, - "aria-modal": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether an element is modal when displayed." - }, - "aria-multiline": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether a text box accepts multiple lines of input or only a single line." - }, - "aria-multiselectable": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that the user may select more than one item from the current selectable descendants." - }, - "aria-orientation": { - "type": "\"horizontal\" | \"vertical\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." - }, - "aria-owns": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." - }, - "aria-placeholder": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." - }, - "aria-posinset": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." - }, - "aria-pressed": { - "type": "boolean | \"true\" | \"false\" | \"mixed\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the current \"pressed\" state of toggle buttons." - }, - "aria-readonly": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that the element is not editable, but is otherwise operable." - }, - "aria-relevant": { - "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." - }, - "aria-required": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that user input is required on the element before a form may be submitted." - }, - "aria-roledescription": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines a human-readable, author-localized description for the role of an element." - }, - "aria-rowcount": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the total number of rows in a table, grid, or treegrid." - }, - "aria-rowindex": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." - }, - "aria-rowspan": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." - }, - "aria-selected": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the current \"selected\" state of various widgets." - }, - "aria-setsize": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." - }, - "aria-sort": { - "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates if items in a table or grid are sorted in ascending or descending order." - }, - "aria-valuemax": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the maximum allowed value for a range widget." - }, - "aria-valuemin": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the minimum allowed value for a range widget." - }, - "aria-valuenow": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the current value for a range widget." - }, - "aria-valuetext": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the human readable text alternative of aria-valuenow for a range widget." - }, - "autoCapitalize": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "autoCorrect": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "autoSave": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "contentEditable": { - "type": "Booleanish | \"inherit\"", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "contextMenu": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "dangerouslySetInnerHTML": { - "type": "{ __html: string }", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "datatype": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "defaultChecked": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "defaultValue": { - "type": "string | number | readonly string[]", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "dir": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "draggable": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true - }, "element": { "type": "string", "defaultValue": "CHAT_COMPOSER_ATTACHMENT_CARD", From 54d668782adcb2bfa86bacee06f19282fea0f9b2 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 18 Jun 2024 11:07:05 -0500 Subject: [PATCH 29/76] chore(chat-composer): add fontSize and lineHeight to props --- .../chat-composer/src/ChatComposer.tsx | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 6be74a280d..f6957e767a 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -61,6 +61,20 @@ export interface ChatComposerProps extends Omit( placeholder = "", initialValue, config, - maxHeight, + maxHeight = "size30", disabled, + fontSize, + lineHeight, ...props }, ref, @@ -124,6 +140,8 @@ export const ChatComposer = React.forwardRef( color: "colorTextWeaker", backgroundColor: "colorBackground", }} + fontSize={fontSize} + lineHeight={lineHeight} > From 202b839a20e4841a76c19269c3002397a09a86bd Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 12:31:54 -0500 Subject: [PATCH 30/76] feat(composer): wip base elements --- .../chat-composer/src/ChatComposer.tsx | 1 + .../src/ChatComposerActionGroup.tsx | 24 +++++++++++ .../src/ChatComposerAttatchmentGroup.tsx | 32 +++++++++++++++ .../src/ChatComposerContainer.tsx | 39 ++++++++++++++++++ .../components/chat-composer/src/index.tsx | 6 +++ .../stories/container.stories.tsx | 40 +++++++++++++++++++ 6 files changed, 142 insertions(+) create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx create mode 100644 packages/paste-core/components/chat-composer/stories/container.stories.tsx diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index f6957e767a..3f797b4f6b 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -142,6 +142,7 @@ export const ChatComposer = React.forwardRef( }} fontSize={fontSize} lineHeight={lineHeight} + gridArea="composer" > diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx new file mode 100644 index 0000000000..e731641d0f --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -0,0 +1,24 @@ +import type { BoxProps } from "@twilio-paste/box"; +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +export interface ChatComposerActionGroupProps { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'CHAT_COMPOSER_ACTION_GROUP' + * @type {BoxProps['element']} + * @memberof PageHeaderProps + */ + element?: BoxProps["element"]; +} + +export const ChatComposerActionGroup = React.forwardRef( + ({ element = "CHAT_COMPOSER_ACTION_GROUP", children, ...props }, ref) => ( + + {children} + + ), +); + +ChatComposerActionGroup.displayName = "ChatComposerActionGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx new file mode 100644 index 0000000000..957244364c --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx @@ -0,0 +1,32 @@ +import type { BoxProps } from "@twilio-paste/box"; +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +export interface ChatComposerAttatchmentGroupProps { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'CHAT_COMPOSER_ATTATCHMENT_GROUP' + * @type {BoxProps['element']} + * @memberof PageHeaderProps + */ + element?: BoxProps["element"]; +} + +export const ChatComposerAttatchmentGroup = React.forwardRef( + ({ element = "CHAT_COMPOSER_ATTATCHMENT_GROUP", children, ...props }, ref) => ( + + {children} + + ), +); + +ChatComposerAttatchmentGroup.displayName = "ChatComposerAttatchmentGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx new file mode 100644 index 0000000000..ce9737e873 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -0,0 +1,39 @@ +import type { BoxProps } from "@twilio-paste/box"; +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +export interface ChatComposerContainerProps { + children?: React.ReactNode; + /** + * Styling of the container + * @default 'default' + * @type {'default' | 'contained''} + * @memberof PageHeaderProps + */ + variant?: "default" | "contained"; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'CHAT_COMPOSER_CONTAINER' + * @type {BoxProps['element']} + * @memberof PageHeaderProps + */ + element?: BoxProps["element"]; +} + +export const ChatComposerContainer = React.forwardRef( + ({ variant, element = "CHAT_COMPOSER_CONTAINER", children, ...props }, ref) => ( + + {children} + + ), +); + +ChatComposerContainer.displayName = "ChatComposerContainer"; diff --git a/packages/paste-core/components/chat-composer/src/index.tsx b/packages/paste-core/components/chat-composer/src/index.tsx index fccff17913..fee6102b2b 100644 --- a/packages/paste-core/components/chat-composer/src/index.tsx +++ b/packages/paste-core/components/chat-composer/src/index.tsx @@ -1,2 +1,8 @@ export { ChatComposer } from "./ChatComposer"; export type { ChatComposerProps } from "./ChatComposer"; +export { ChatComposerActionGroup } from "./ChatComposerActionGroup"; +export type { ChatComposerActionGroupProps } from "./ChatComposerActionGroup"; +export { ChatComposerAttatchmentGroup } from "./ChatComposerAttatchmentGroup"; +export type { ChatComposerAttatchmentGroupProps } from "./ChatComposerAttatchmentGroup"; +export { ChatComposerContainer } from "./ChatComposerContainer"; +export type { ChatComposerContainerProps } from "./ChatComposerContainer"; diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx new file mode 100644 index 0000000000..65e2ab558a --- /dev/null +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -0,0 +1,40 @@ +import type { StoryFn } from "@storybook/react"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import type { EditorState } from "@twilio-paste/lexical-library"; +import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; +import * as React from "react"; + +import { ChatComposer, ChatComposerActionGroup, ChatComposerAttatchmentGroup, ChatComposerContainer } from "../src"; +import type { ChatComposerProps } from "../src"; + +export default { + title: "Components/Chat Composer/Container", + component: ChatComposer, +}; + +const defaultConfig: ChatComposerProps["config"] = { + namespace: "foo", + onError: (error: Error) => { + throw error; + }, +}; + +export const Default: StoryFn = () => { + return ( + + + + + + + + + ); +}; From d043493b15921351c6748255e240b902c574f98f Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 15:28:35 -0500 Subject: [PATCH 31/76] feat(composer): addition of all attatchment components --- .../chat-composer/src/ChatComposer.tsx | 28 ++++- .../src/ChatComposerActionGroup.tsx | 13 +- .../src/ChatComposerAttachment.tsx | 49 ++++++++ .../src/ChatComposerAttachmentCard.tsx | 113 +++++++++++++++++ .../src/ChatComposerAttachmentDescription.tsx | 38 ++++++ ...up.tsx => ChatComposerAttachmentGroup.tsx} | 20 +-- .../src/ChatComposerAttachmentLink.tsx | 31 +++++ .../src/ChatComposerContainer.tsx | 54 ++++++-- .../chat-composer/src/ChatComposerContext.ts | 12 ++ .../src/ToggleDisabledPlugin.tsx | 19 +++ .../components/chat-composer/src/index.tsx | 12 +- .../stories/container.stories.tsx | 115 +++++++++++++++++- 12 files changed, 469 insertions(+), 35 deletions(-) create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachmentDescription.tsx rename packages/paste-core/components/chat-composer/src/{ChatComposerAttatchmentGroup.tsx => ChatComposerAttachmentGroup.tsx} (50%) create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachmentLink.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerContext.ts create mode 100644 packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 3f797b4f6b..effa04daa0 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -32,9 +32,12 @@ import merge from "deepmerge"; import * as React from "react"; import { AutoLinkPlugin } from "./AutoLinkPlugin"; +import { ChatComposerContext } from "./ChatComposerContext"; import { PlaceholderWrapper } from "./PlaceholderWrapper"; +import { ToggleEditablePlugin } from "./ToggleDisabledPlugin"; import { baseConfig, renderInitialText } from "./helpers"; import { chatComposerLexicalStyles } from "./styles"; +import { ThemeShape } from "@twilio-paste/theme"; export interface ChatComposerProps extends Omit { children?: LexicalComposerProps["children"]; @@ -113,14 +116,31 @@ export const ChatComposer = React.forwardRef( lineHeight, ...props }, - ref, + ref ) => { + const { setIsDisabled } = React.useContext(ChatComposerContext); + const baseConfigWithEditorState = { ...baseConfig, editable: disabled ? false : true, editorState: initialValue ? () => renderInitialText(initialValue) : undefined, }; + const getDisabledStyling = React.useCallback(() => { + /** + * If setIsDisabled is defined, then the styling will be handled by ChatComposerContainer. + * If it is not defined, then the styling will be handled by ChatComposer. Using both causes the diabled style tochange + * from container and then composer. + */ + if (!!setIsDisabled) { + return {}; + } + return { + color: "colorTextWeaker" as ThemeShape["textColors"], + backgroundColor: "colorBackground" as ThemeShape["backgroundColors"], + }; + }, [!!setIsDisabled]); + return ( ( maxHeight={maxHeight} disabled={disabled} aria-disabled={disabled} - _disabled={{ - color: "colorTextWeaker", - backgroundColor: "colorBackground", - }} + _disabled={getDisabledStyling()} fontSize={fontSize} lineHeight={lineHeight} gridArea="composer" @@ -155,6 +172,7 @@ export const ChatComposer = React.forwardRef( {onChange && } + {children} diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx index e731641d0f..6318ae8b2c 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -15,7 +15,18 @@ export interface ChatComposerActionGroupProps { export const ChatComposerActionGroup = React.forwardRef( ({ element = "CHAT_COMPOSER_ACTION_GROUP", children, ...props }, ref) => ( - + {children} ), diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx new file mode 100644 index 0000000000..5f75a602c0 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx @@ -0,0 +1,49 @@ +import type { BoxElementProps } from "@twilio-paste/box"; +import { Box } from "@twilio-paste/box"; +import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object"; +import { Stack } from "@twilio-paste/stack"; +import type { HTMLPasteProps } from "@twilio-paste/types"; +import * as React from "react"; + +export interface ChatComposerAttachmentProps extends HTMLPasteProps<"div"> { + children: NonNullable; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentProps + */ + element?: BoxElementProps["element"]; + /** + * Pass an icon to use for the attachment message. DownloadIcon recommended + * + * @default null + * @type {NonNullable} + * @memberof ChatComposerAttachmentProps + */ + attachmentIcon: NonNullable; +} + +const ChatComposerAttachment = React.forwardRef( + ({ children, element = "CHAT_COMPOSER_ATTACHMENT", attachmentIcon, ...props }, ref) => { + return ( + + + + {attachmentIcon} + + + + + {children} + + + + ); + }, +); + +ChatComposerAttachment.displayName = "ChatComposerAttachment"; + +export { ChatComposerAttachment }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx new file mode 100644 index 0000000000..503ef9b6a8 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentCard.tsx @@ -0,0 +1,113 @@ +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { ClearIcon } from "@twilio-paste/icons/esm/ClearIcon"; +import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only"; +import type { HTMLPasteProps } from "@twilio-paste/types"; +import * as React from "react"; +import { ChatComposerContext } from "./ChatComposerContext"; + +/* + *These style props are specific to our ClearIcon use case in ChatComposerAttachmentCard. + * + *The close button uses ClearIcon and needs the Box behind it to have these styles + *because the inner part of the glyph is transparent (variant="secondary_icon"). + *When more button variants become available, closeButtonBackgroundStyles should + *be reconsidered (and possibly removed). + */ +const closeButtonBackgroundStyles: BoxStyleProps = { + backgroundColor: "colorBackgroundBody", + borderRadius: "borderRadiusCircle", + width: "12px", + height: "12px", + display: "flex", + justifyContent: "center", + alignItems: "center", +}; + +export interface ChatComposerAttachmentCardProps extends HTMLPasteProps<"div"> { + children: NonNullable; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT_CARD" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentCardProps + */ + element?: BoxProps["element"]; + /** + * Accessible label for the dismiss button if dismissable + * + * @default "Remove attachment" + * @type {string} + * @memberof ChatComposerAttachmentCardProps + */ + i18nDismissLabel?: string; + /** + * Function to run when ChatComposerAttachmentCard is dismissed. Adds a close button + * + * @default null + * @memberof ChatComposerAttachmentCardProps + */ + onDismiss?: () => void; +} + +const ChatComposerAttachmentCard = React.forwardRef( + ( + { + children, + onDismiss, + i18nDismissLabel = "Remove attachment", + element = "CHAT_COMPOSER_ATTACHMENT_CARD", + ...props + }, + ref, + ) => { + const { isDisabled } = React.useContext(ChatComposerContext); + + return ( + + {children} + {onDismiss && ( + + + + )} + + ); + }, +); + +ChatComposerAttachmentCard.displayName = "ChatComposerAttachmentCard"; + +export { ChatComposerAttachmentCard }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentDescription.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentDescription.tsx new file mode 100644 index 0000000000..450a30c928 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentDescription.tsx @@ -0,0 +1,38 @@ +import type { BoxElementProps } from "@twilio-paste/box"; +import { Text, safelySpreadTextProps } from "@twilio-paste/text"; +import type { HTMLPasteProps } from "@twilio-paste/types"; +import * as React from "react"; + +export interface ChatComposerAttachmentDescriptionProps extends HTMLPasteProps<"div"> { + children: string; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT_DESCRIPTION" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentDescriptionProps + */ + element?: BoxElementProps["element"]; +} + +const ChatComposerAttachmentDescription = React.forwardRef( + ({ children, element = "CHAT_COMPOSER_ATTACHMENT_DESCRIPTION", ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +ChatComposerAttachmentDescription.displayName = "ChatComposerAttachmentDescription"; + +export { ChatComposerAttachmentDescription }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx similarity index 50% rename from packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx rename to packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 957244364c..a43d8217bc 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -2,31 +2,35 @@ import type { BoxProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; import * as React from "react"; -export interface ChatComposerAttatchmentGroupProps { +export interface ChatComposerAttachmentGroupProps { children?: React.ReactNode; /** * Overrides the default element name to apply unique styles with the Customization Provider - * @default 'CHAT_COMPOSER_ATTATCHMENT_GROUP' + * @default 'CHAT_COMPOSER_ATTACHMENT_GROUP' * @type {BoxProps['element']} * @memberof PageHeaderProps */ element?: BoxProps["element"]; } -export const ChatComposerAttatchmentGroup = React.forwardRef( - ({ element = "CHAT_COMPOSER_ATTATCHMENT_GROUP", children, ...props }, ref) => ( +export const ChatComposerAttachmentGroup = React.forwardRef( + ({ element = "CHAT_COMPOSER_ATTACHMENT_GROUP", children, ...props }, ref) => ( {children} ), ); -ChatComposerAttatchmentGroup.displayName = "ChatComposerAttatchmentGroup"; +ChatComposerAttachmentGroup.displayName = "ChatComposerAttachmentGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentLink.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentLink.tsx new file mode 100644 index 0000000000..7543a3fb73 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentLink.tsx @@ -0,0 +1,31 @@ +import { Anchor } from "@twilio-paste/anchor"; +import type { AnchorProps } from "@twilio-paste/anchor"; +import type { BoxElementProps } from "@twilio-paste/box"; +import { Truncate } from "@twilio-paste/truncate"; +import * as React from "react"; + +export interface ChatComposerAttachmentLinkProps extends AnchorProps { + children: string; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT_LINK" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentLinkProps + */ + element?: BoxElementProps["element"]; +} + +const ChatComposerAttachmentLink = React.forwardRef( + ({ children, href, element = "CHAT_COMPOSER_ATTACHMENT_LINK", ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +ChatComposerAttachmentLink.displayName = "ChatComposerAttachmentLink"; + +export { ChatComposerAttachmentLink }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index ce9737e873..a320edaf08 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -1,7 +1,21 @@ import type { BoxProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import { ThemeShape } from "@twilio-paste/theme"; import * as React from "react"; +import { ChatComposerContext } from "./ChatComposerContext"; + +const Styles = { + default: {}, + contained: { + borderWidth: "borderWidth10" as ThemeShape["borderWidths"], + borderStyle: "solid", + borderRadius: "borderRadius30" as ThemeShape["radii"], + borderColor: "colorBorderWeaker" as ThemeShape["borderColors"], + boxShadow: "shadowBorderLow" as ThemeShape["shadows"], + }, +}; + export interface ChatComposerContainerProps { children?: React.ReactNode; /** @@ -21,19 +35,33 @@ export interface ChatComposerContainerProps { } export const ChatComposerContainer = React.forwardRef( - ({ variant, element = "CHAT_COMPOSER_CONTAINER", children, ...props }, ref) => ( - - {children} - - ), + ({ variant = "default", element = "CHAT_COMPOSER_CONTAINER", children, ...props }, ref) => { + const [isDisabled, setIsDisabled] = React.useState(false); + + return ( + + + {children} + + + ); + }, ); ChatComposerContainer.displayName = "ChatComposerContainer"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContext.ts b/packages/paste-core/components/chat-composer/src/ChatComposerContext.ts new file mode 100644 index 0000000000..aa9d810d5f --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContext.ts @@ -0,0 +1,12 @@ +import * as React from "react"; + +export interface ChatComposerContextProps { + isDisabled: boolean; + setIsDisabled?: (value: boolean) => void; +} + +const ChatComposerContext = React.createContext({ + isDisabled: false, +}); + +export { ChatComposerContext }; diff --git a/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx new file mode 100644 index 0000000000..d996b3c118 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx @@ -0,0 +1,19 @@ +import { useLexicalComposerContext } from "@twilio-paste/lexical-library"; +import * as React from "react"; +import { ChatComposerContext } from "./ChatComposerContext"; + +export const ToggleEditablePlugin: React.FC<{ disabled: boolean | undefined }> = ({ disabled }): null => { + const [editor] = useLexicalComposerContext(); + const { setIsDisabled } = React.useContext(ChatComposerContext); + + React.useEffect(() => { + if (disabled !== undefined) { + !!setIsDisabled && setIsDisabled(disabled); + editor.setEditable(!disabled); + } + }, [disabled]); + + return null; +}; + +ToggleEditablePlugin.displayName = "ToggleEditablePlugin"; diff --git a/packages/paste-core/components/chat-composer/src/index.tsx b/packages/paste-core/components/chat-composer/src/index.tsx index fee6102b2b..a46508410c 100644 --- a/packages/paste-core/components/chat-composer/src/index.tsx +++ b/packages/paste-core/components/chat-composer/src/index.tsx @@ -2,7 +2,15 @@ export { ChatComposer } from "./ChatComposer"; export type { ChatComposerProps } from "./ChatComposer"; export { ChatComposerActionGroup } from "./ChatComposerActionGroup"; export type { ChatComposerActionGroupProps } from "./ChatComposerActionGroup"; -export { ChatComposerAttatchmentGroup } from "./ChatComposerAttatchmentGroup"; -export type { ChatComposerAttatchmentGroupProps } from "./ChatComposerAttatchmentGroup"; +export { ChatComposerAttachmentGroup } from "./ChatComposerAttachmentGroup"; +export type { ChatComposerAttachmentGroupProps } from "./ChatComposerAttachmentGroup"; export { ChatComposerContainer } from "./ChatComposerContainer"; export type { ChatComposerContainerProps } from "./ChatComposerContainer"; +export { ChatComposerAttachment } from "./ChatComposerAttachment"; +export type { ChatComposerAttachmentProps } from "./ChatComposerAttachment"; +export { ChatComposerAttachmentCard } from "./ChatComposerAttachmentCard"; +export type { ChatComposerAttachmentCardProps } from "./ChatComposerAttachmentCard"; +export { ChatComposerAttachmentDescription } from "./ChatComposerAttachmentDescription"; +export type { ChatComposerAttachmentDescriptionProps } from "./ChatComposerAttachmentDescription"; +export { ChatComposerAttachmentLink } from "./ChatComposerAttachmentLink"; +export type { ChatComposerAttachmentLinkProps } from "./ChatComposerAttachmentLink"; diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 65e2ab558a..5350005c1f 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -1,13 +1,22 @@ import type { StoryFn } from "@storybook/react"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; +import { Checkbox } from "@twilio-paste/checkbox"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; -import type { EditorState } from "@twilio-paste/lexical-library"; -import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; import * as React from "react"; -import { ChatComposer, ChatComposerActionGroup, ChatComposerAttatchmentGroup, ChatComposerContainer } from "../src"; +import { + ChatComposer, + ChatComposerActionGroup, + ChatComposerAttachment, + ChatComposerAttachmentCard, + ChatComposerAttachmentDescription, + ChatComposerAttachmentLink, + ChatComposerAttachmentGroup, + ChatComposerContainer, +} from "../src"; import type { ChatComposerProps } from "../src"; export default { @@ -27,14 +36,108 @@ export const Default: StoryFn = () => { - - - ); }; + +Default.storyName = "Default"; + +export const ContainedVariant: StoryFn = () => { + return ( + + + + + + + + ); +}; + +ContainedVariant.storyName = "Contained Variant"; + +export const ContainedVariantWithAttatchments: StoryFn = () => { + return ( + + + + + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + + ); +}; + +ContainedVariantWithAttatchments.storyName = "Contained Variant with Attatchments"; + +export const ContainedDisabledVariant: StoryFn = () => { + const [isDisabled, setIsDisabled] = React.useState(true); + return ( + <> + + setIsDisabled((disabled) => !disabled)}> + Disable Input + + + + + + + + + + + ); +}; + +ContainedDisabledVariant.storyName = "Contained Disabled Variant"; From bfc94a2e7aa5a10861e4f64b58030089027b24c9 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 15:59:54 -0500 Subject: [PATCH 32/76] feat(composer): lint fix --- packages/paste-core/components/chat-composer/package.json | 8 ++++++++ .../components/chat-composer/src/ChatComposer.tsx | 6 +++--- .../chat-composer/src/ChatComposerAttachmentCard.tsx | 1 + .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 2 +- .../components/chat-composer/src/ToggleDisabledPlugin.tsx | 5 ++++- 5 files changed, 17 insertions(+), 5 deletions(-) diff --git a/packages/paste-core/components/chat-composer/package.json b/packages/paste-core/components/chat-composer/package.json index 5137a99eaf..b63526a57f 100644 --- a/packages/paste-core/components/chat-composer/package.json +++ b/packages/paste-core/components/chat-composer/package.json @@ -44,15 +44,23 @@ "react-dom": "^17.0.2 || ^18.0.0" }, "devDependencies": { + "@twilio-paste/anchor": "^12.1.0", "@twilio-paste/animation-library": "^2.0.0", "@twilio-paste/box": "^10.1.0", + "@twilio-paste/button": "^14.1.0", "@twilio-paste/color-contrast-utils": "^5.0.0", "@twilio-paste/customization": "^8.1.0", "@twilio-paste/design-tokens": "^10.2.0", + "@twilio-paste/icons": "^12.2.3", "@twilio-paste/lexical-library": "^4.1.0", + "@twilio-paste/media-object": "^10.1.0", + "@twilio-paste/screen-reader-only": "^13.1.0", + "@twilio-paste/stack": "^8.1.0", "@twilio-paste/style-props": "^9.1.0", "@twilio-paste/styling-library": "^3.0.0", + "@twilio-paste/text": "^10.1.0", "@twilio-paste/theme": "^11.0.0", + "@twilio-paste/truncate": "^14.1.0", "@twilio-paste/types": "^6.0.0", "@types/react": "^18.0.27", "@types/react-dom": "^18.0.10", diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index effa04daa0..c8047bc631 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -28,6 +28,7 @@ import { } from "@twilio-paste/lexical-library"; import type { ContentEditableProps, LexicalComposerProps, OnChangeFunction } from "@twilio-paste/lexical-library"; import { StylingGlobals } from "@twilio-paste/styling-library"; +import { ThemeShape } from "@twilio-paste/theme"; import merge from "deepmerge"; import * as React from "react"; @@ -37,7 +38,6 @@ import { PlaceholderWrapper } from "./PlaceholderWrapper"; import { ToggleEditablePlugin } from "./ToggleDisabledPlugin"; import { baseConfig, renderInitialText } from "./helpers"; import { chatComposerLexicalStyles } from "./styles"; -import { ThemeShape } from "@twilio-paste/theme"; export interface ChatComposerProps extends Omit { children?: LexicalComposerProps["children"]; @@ -132,14 +132,14 @@ export const ChatComposer = React.forwardRef( * If it is not defined, then the styling will be handled by ChatComposer. Using both causes the diabled style tochange * from container and then composer. */ - if (!!setIsDisabled) { + if (setIsDisabled === undefined) { return {}; } return { color: "colorTextWeaker" as ThemeShape["textColors"], backgroundColor: "colorBackground" as ThemeShape["backgroundColors"], }; - }, [!!setIsDisabled]); + }, [Boolean(setIsDisabled)]); return ( = ({ disabled }): null => { @@ -8,7 +9,9 @@ export const ToggleEditablePlugin: React.FC<{ disabled: boolean | undefined }> = React.useEffect(() => { if (disabled !== undefined) { - !!setIsDisabled && setIsDisabled(disabled); + if (setIsDisabled !== undefined) { + setIsDisabled(disabled); + } editor.setEditable(!disabled); } }, [disabled]); From e56b225528718afb8926cc6d7ff96d99454d0ab8 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 21 Jun 2024 09:58:04 -0500 Subject: [PATCH 33/76] feat(composer): fix disabled styling --- .../paste-core/components/chat-composer/src/ChatComposer.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index c8047bc631..b174e1aec8 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -116,7 +116,7 @@ export const ChatComposer = React.forwardRef( lineHeight, ...props }, - ref + ref, ) => { const { setIsDisabled } = React.useContext(ChatComposerContext); @@ -132,7 +132,7 @@ export const ChatComposer = React.forwardRef( * If it is not defined, then the styling will be handled by ChatComposer. Using both causes the diabled style tochange * from container and then composer. */ - if (setIsDisabled === undefined) { + if (setIsDisabled !== undefined) { return {}; } return { From 752362150fbeda04b350b3a12c41d5181378e246 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 21 Jun 2024 11:27:15 -0500 Subject: [PATCH 34/76] feat(composer): customization stories --- .../stories/container.stories.tsx | 94 ++++++++++++++++--- 1 file changed, 81 insertions(+), 13 deletions(-) diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 5350005c1f..62145a8c90 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -2,9 +2,11 @@ import type { StoryFn } from "@storybook/react"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { Checkbox } from "@twilio-paste/checkbox"; +import { CustomizationProvider } from "@twilio-paste/customization"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import { useTheme } from "@twilio-paste/theme"; import * as React from "react"; import { @@ -13,8 +15,8 @@ import { ChatComposerAttachment, ChatComposerAttachmentCard, ChatComposerAttachmentDescription, - ChatComposerAttachmentLink, ChatComposerAttachmentGroup, + ChatComposerAttachmentLink, ChatComposerContainer, } from "../src"; import type { ChatComposerProps } from "../src"; @@ -52,11 +54,7 @@ Default.storyName = "Default"; export const ContainedVariant: StoryFn = () => { return ( - + + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + + + ); +}; + +CustomizationContainedVariantWithAttatchments.storyName = "Customization Contained Variant with Attatchments"; +CustomizationContainedVariantWithAttatchments.parameters = { + a11y: { + // no need to a11y check customization + disable: true, + }, +}; From 8df066bf135aad2fc2817dd6963aaf5b20ccf330 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 21 Jun 2024 12:15:56 -0500 Subject: [PATCH 35/76] feat(composer): testing --- .../__tests__/ChatComposer.spec.tsx | 106 +++++++ .../chat-composer/__tests__/index.spec.tsx | 286 +++++++++++++----- 2 files changed, 311 insertions(+), 81 deletions(-) create mode 100644 packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx diff --git a/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx new file mode 100644 index 0000000000..bc62da9f95 --- /dev/null +++ b/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx @@ -0,0 +1,106 @@ +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; +import { Theme } from "@twilio-paste/theme"; +import * as React from "react"; + +import { ChatComposer } from "../src"; + +const initialText = (): void => { + const root = $getRoot(); + + if (root.getFirstChild() === null) { + const paragraph = $createParagraphNode(); + paragraph.append($createTextNode("Hello")); + + root.append(paragraph); + } +}; + +const baseConfig = { + namespace: "foo", + onError: (error: Error) => { + throw error; + }, +}; + +describe("ChatComposer", () => { + it("should render with placeholder text", () => { + render(); + expect(screen.getByRole("textbox")).toBeDefined(); + expect(screen.getByText("Type here..")).toBeDefined(); + }); + + it("should pass props to the content editable", async () => { + render( + , + ); + + const contentEditable = screen.getByRole("textbox"); + await waitFor(() => { + expect(contentEditable).toHaveAttribute("aria-label", "Feedback"); + expect(contentEditable).toHaveAttribute("aria-activedescendant", "foo"); + expect(contentEditable).toHaveAttribute("aria-owns", "foo"); + expect(contentEditable).toHaveAttribute("aria-describedby", "foo"); + expect(contentEditable.dataset.testid).toEqual("my-composer"); + }); + }); + + it("should render initial value with the initialValue prop", async () => { + render(); + + const contentEditable = screen.getByRole("textbox"); + await waitFor(() => { + expect(contentEditable).toHaveTextContent("Type here.."); + }); + }); + + it("should render custom initial value with the config prop", async () => { + render( + , + ); + + const contentEditable = screen.getByRole("textbox"); + await waitFor(() => { + expect(contentEditable).toHaveTextContent("Hello"); + }); + }); + + it("should set maxHeight with the maxHeight prop", async () => { + render( + + + , + ); + + const wrapper = screen.getByRole("textbox").parentElement; + await waitFor(() => { + expect(wrapper).toHaveStyleRule("max-height", "5.5rem"); + }); + }); + + it("should call onChange function", async () => { + const onChangeMock: jest.Mock = jest.fn(); + + render(); + + const contentEditable = screen.getByRole("textbox"); + + userEvent.type(contentEditable, "foo bar"); + waitFor(() => { + expect(onChangeMock).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index bc62da9f95..5bf4385ee8 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -1,21 +1,25 @@ import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; import { Theme } from "@twilio-paste/theme"; -import * as React from "react"; - -import { ChatComposer } from "../src"; - -const initialText = (): void => { - const root = $getRoot(); - if (root.getFirstChild() === null) { - const paragraph = $createParagraphNode(); - paragraph.append($createTextNode("Hello")); +import * as React from "react"; - root.append(paragraph); - } -}; +import { + ChatComposer, + ChatComposerActionGroup, + ChatComposerAttachment, + ChatComposerAttachmentCard, + ChatComposerAttachmentDescription, + ChatComposerAttachmentGroup, + ChatComposerAttachmentLink, + ChatComposerContainer, +} from "../src"; const baseConfig = { namespace: "foo", @@ -24,83 +28,203 @@ const baseConfig = { }, }; +const attatchments = [ + { + name: "Document-FINAL.doc", + size: "123 MB", + href: "www.google.com", + }, + { + name: "Document-PEDNING.doc", + size: "1328 MB", + href: "www.linux.com", + }, +]; + +const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock }> = ({ + attatchmentCloseSpy = jest.fn(), +}) => ( + + + + + + + + {attatchments.map((attatchment, index) => ( + { + attatchmentCloseSpy(attatchment.name); + }} + key={`attachment=${index}`} + data-testid={`chat-composer-attachment-card-${index}`} + > + } + data-testid={`chat-composer-attachment-${index}`} + > + + {attatchment.name} + + + {attatchment.size} + + + + ))} + + +); + +const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock }> = ({ + attatchmentCloseSpy = jest.fn(), +}) => ( + + + + + + + + {attatchments.map((attatchment, index) => ( + { + attatchmentCloseSpy(attatchment.name); + }} + key={`attachment=${index}`} + data-testid={`chat-composer-attachment-card-${index}`} + element="CUSTOM_CHAT_COMPOSER_ATTACHMENT_CARD" + > + } + data-testid={`chat-composer-attachment-${index}`} + element={`CUSTOM_CHAT_COMPOSER_ATTACHMENT-${index}`} + > + + {attatchment.name} + + + {attatchment.size} + + + + ))} + + +); + describe("ChatComposer", () => { - it("should render with placeholder text", () => { - render(); + it("should render", () => { + const spy = jest.fn(); + render(); expect(screen.getByRole("textbox")).toBeDefined(); - expect(screen.getByText("Type here..")).toBeDefined(); - }); - - it("should pass props to the content editable", async () => { - render( - , - ); - - const contentEditable = screen.getByRole("textbox"); - await waitFor(() => { - expect(contentEditable).toHaveAttribute("aria-label", "Feedback"); - expect(contentEditable).toHaveAttribute("aria-activedescendant", "foo"); - expect(contentEditable).toHaveAttribute("aria-owns", "foo"); - expect(contentEditable).toHaveAttribute("aria-describedby", "foo"); - expect(contentEditable.dataset.testid).toEqual("my-composer"); + expect(screen.getByText("Type here...")).toBeDefined(); + expect(screen.getByRole("button", { name: "Attach" })).toBeDefined(); + expect(screen.getByRole("button", { name: "Send" })).toBeDefined(); + attatchments.forEach((attatchment) => { + expect(screen.getByText(attatchment.name)).toBeDefined(); + expect(screen.getByText(attatchment.size)).toBeDefined(); }); - }); - - it("should render initial value with the initialValue prop", async () => { - render(); - - const contentEditable = screen.getByRole("textbox"); - await waitFor(() => { - expect(contentEditable).toHaveTextContent("Type here.."); + screen.getAllByRole("button", { name: "Remove attachment" }).forEach((button, index) => { + userEvent.click(button); + expect(spy).toHaveBeenCalledWith(attatchments[index].name); }); }); - it("should render custom initial value with the config prop", async () => { - render( - , - ); - - const contentEditable = screen.getByRole("textbox"); - await waitFor(() => { - expect(contentEditable).toHaveTextContent("Hello"); + describe("Customization", () => { + it("should set element data attribute", () => { + render(); + expect(screen.getByTestId("chat-composer-container").getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_CONTAINER", + ); + // data-testid getting set on lexiocal elemnt not the paste wrapper so need to check parent node + expect(screen.getByTestId("my-composer").parentElement?.getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER", + ); + expect(screen.getByTestId("chat-composer-action-group").getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ACTION_GROUP", + ); + expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ATTACHMENT_GROUP", + ); + attatchments.forEach((attatchment, index) => { + expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ATTACHMENT_CARD", + ); + expect(screen.getByTestId(`chat-composer-attachment-${index}`).getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ATTACHMENT", + ); + expect(screen.getByTestId(`chat-composer-attachment-link-${index}`).getAttribute("data-paste-element")).toEqual( + "CHAT_COMPOSER_ATTACHMENT_LINK", + ); + expect( + screen.getByTestId(`chat-composer-attachment-description-${index}`).getAttribute("data-paste-element"), + ).toEqual("CHAT_COMPOSER_ATTACHMENT_DESCRIPTION"); + }); }); - }); - - it("should set maxHeight with the maxHeight prop", async () => { - render( - - - , - ); - - const wrapper = screen.getByRole("textbox").parentElement; - await waitFor(() => { - expect(wrapper).toHaveStyleRule("max-height", "5.5rem"); - }); - }); - - it("should call onChange function", async () => { - const onChangeMock: jest.Mock = jest.fn(); - - render(); - - const contentEditable = screen.getByRole("textbox"); - userEvent.type(contentEditable, "foo bar"); - waitFor(() => { - expect(onChangeMock).toHaveBeenCalledTimes(1); + it("should set custom element data attribute", () => { + render(); + expect(screen.getByTestId("chat-composer-container").getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER_CONTAINER", + ); + // data-testid getting set on lexiocal elemnt not the paste wrapper so need to check parent node + expect(screen.getByTestId("my-composer").parentElement?.getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER", + ); + expect(screen.getByTestId("chat-composer-action-group").getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER_ACTION_GROUP", + ); + expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER_ATTACHMENT_GROUP", + ); + attatchments.forEach((attatchment, index) => { + expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( + "CUSTOM_CHAT_COMPOSER_ATTACHMENT_CARD", + ); + expect(screen.getByTestId(`chat-composer-attachment-${index}`).getAttribute("data-paste-element")).toEqual( + `CUSTOM_CHAT_COMPOSER_ATTACHMENT-${index}`, + ); + expect(screen.getByTestId(`chat-composer-attachment-link-${index}`).getAttribute("data-paste-element")).toEqual( + `CUSTOM_CHAT_COMPOSER_ATTACHMENT_LINK-${index}`, + ); + expect( + screen.getByTestId(`chat-composer-attachment-description-${index}`).getAttribute("data-paste-element"), + ).toEqual(`CUSTOM_CHAT_COMPOSER_ATTACHMENT_DESCRIPTION-${index}`); + }); }); }); }); From 3b5e92d1cafbff5d7b739a9f14c797895d73cd69 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 24 Jun 2024 08:36:07 -0500 Subject: [PATCH 36/76] feat(composer): import cleanup --- .../components/chat-composer/__tests__/ChatComposer.spec.tsx | 2 +- .../components/chat-composer/__tests__/index.spec.tsx | 5 +---- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx index bc62da9f95..7da47f6059 100644 --- a/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/ChatComposer.spec.tsx @@ -1,4 +1,4 @@ -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { render, screen, waitFor } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; import { Theme } from "@twilio-paste/theme"; diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index 5bf4385ee8..bd4c3b23b7 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -1,12 +1,9 @@ -import { fireEvent, render, screen, waitFor } from "@testing-library/react"; +import { render, screen } from "@testing-library/react"; import userEvent from "@testing-library/user-event"; -import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; -import { $createParagraphNode, $createTextNode, $getRoot } from "@twilio-paste/lexical-library"; -import { Theme } from "@twilio-paste/theme"; import * as React from "react"; From a22dda566ecf5c72108a42358db570460034cc66 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 08:19:54 -0500 Subject: [PATCH 37/76] feat(composer): build changes --- packages/paste-codemods/tools/.cache/mappings.json | 7 +++++++ yarn.lock | 8 ++++++++ 2 files changed, 15 insertions(+) diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index 4c1b330799..26c73102ef 100644 --- a/packages/paste-codemods/tools/.cache/mappings.json +++ b/packages/paste-codemods/tools/.cache/mappings.json @@ -46,6 +46,13 @@ "CalloutText": "@twilio-paste/core/callout", "Card": "@twilio-paste/core/card", "ChatComposer": "@twilio-paste/core/chat-composer", + "ChatComposerActionGroup": "@twilio-paste/core/chat-composer", + "ChatComposerAttachment": "@twilio-paste/core/chat-composer", + "ChatComposerAttachmentCard": "@twilio-paste/core/chat-composer", + "ChatComposerAttachmentDescription": "@twilio-paste/core/chat-composer", + "ChatComposerAttachmentGroup": "@twilio-paste/core/chat-composer", + "ChatComposerAttachmentLink": "@twilio-paste/core/chat-composer", + "ChatComposerContainer": "@twilio-paste/core/chat-composer", "ChatAttachment": "@twilio-paste/core/chat-log", "ChatAttachmentDescription": "@twilio-paste/core/chat-log", "ChatAttachmentLink": "@twilio-paste/core/chat-log", diff --git a/yarn.lock b/yarn.lock index 6324d27113..6b20bdd924 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11874,15 +11874,23 @@ __metadata: version: 0.0.0-use.local resolution: "@twilio-paste/chat-composer@workspace:packages/paste-core/components/chat-composer" dependencies: + "@twilio-paste/anchor": ^12.1.0 "@twilio-paste/animation-library": ^2.0.0 "@twilio-paste/box": ^10.1.0 + "@twilio-paste/button": ^14.1.0 "@twilio-paste/color-contrast-utils": ^5.0.0 "@twilio-paste/customization": ^8.1.0 "@twilio-paste/design-tokens": ^10.2.0 + "@twilio-paste/icons": ^12.2.3 "@twilio-paste/lexical-library": ^4.1.0 + "@twilio-paste/media-object": ^10.1.0 + "@twilio-paste/screen-reader-only": ^13.1.0 + "@twilio-paste/stack": ^8.1.0 "@twilio-paste/style-props": ^9.1.0 "@twilio-paste/styling-library": ^3.0.0 + "@twilio-paste/text": ^10.1.0 "@twilio-paste/theme": ^11.0.0 + "@twilio-paste/truncate": ^14.1.0 "@twilio-paste/types": ^6.0.0 "@types/react": ^18.0.27 "@types/react-dom": ^18.0.10 From 535dec82dd3e03250beae9aaa875ab65fabb1d0f Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 13:40:56 -0500 Subject: [PATCH 38/76] feat(composer): responsive columns and JS doc --- .../src/ChatComposerActionGroup.tsx | 2 +- .../src/ChatComposerAttachmentGroup.tsx | 54 ++++--- .../src/ChatComposerContainer.tsx | 15 +- .../stories/container.stories.tsx | 136 +++++++++++++----- 4 files changed, 153 insertions(+), 54 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx index 6318ae8b2c..de5a553a1b 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -8,7 +8,7 @@ export interface ChatComposerActionGroupProps { * Overrides the default element name to apply unique styles with the Customization Provider * @default 'CHAT_COMPOSER_ACTION_GROUP' * @type {BoxProps['element']} - * @memberof PageHeaderProps + * @memberof ChatComposerActionGroupProps */ element?: BoxProps["element"]; } diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 92533e6c61..89eeb3a6db 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -1,5 +1,6 @@ import type { BoxProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import { ResponsiveValue } from "@twilio-paste/styling-library"; import * as React from "react"; export interface ChatComposerAttachmentGroupProps { @@ -8,29 +9,46 @@ export interface ChatComposerAttachmentGroupProps { * Overrides the default element name to apply unique styles with the Customization Provider * @default 'CHAT_COMPOSER_ATTACHMENT_GROUP' * @type {BoxProps['element']} - * @memberof PageHeaderProps + * @memberof ChatComposerAttachmentGroupProps */ element?: BoxProps["element"]; + /** + * Sets the number of columns in the attachement grid + * @default 2 + * @type number + * @memberof ChatComposerAttachmentGroupProps + */ + columns?: ResponsiveValue; } export const ChatComposerAttachmentGroup = React.forwardRef( - ({ element = "CHAT_COMPOSER_ATTACHMENT_GROUP", children, ...props }, ref) => ( - - {children} - - ), + ({ element = "CHAT_COMPOSER_ATTACHMENT_GROUP", columns = 2, children, ...props }, ref) => { + const getColumnStyles = () => { + if (columns instanceof Array) { + return columns.map((column) => `repeat(${column}, minmax(0,1fr))`); + } + return `repeat(${columns}, 1fr)`; + }; + return ( + + {children} + + ); + }, ); ChatComposerAttachmentGroup.displayName = "ChatComposerAttachmentGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index a320edaf08..1bdc2b5c90 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -22,20 +22,27 @@ export interface ChatComposerContainerProps { * Styling of the container * @default 'default' * @type {'default' | 'contained''} - * @memberof PageHeaderProps + * @memberof ChatComposerContainerProps */ variant?: "default" | "contained"; /** * Overrides the default element name to apply unique styles with the Customization Provider * @default 'CHAT_COMPOSER_CONTAINER' * @type {BoxProps['element']} - * @memberof PageHeaderProps + * @memberof ChatComposerContainerProps */ element?: BoxProps["element"]; + /** + * Sets the maximum height of the composer before scrolling + * @default 'size20' + * @type {BoxProps['maxHeight']} + * @memberof ChatComposerContainerProps + */ + maxHeight?: BoxProps["maxHeight"]; } export const ChatComposerContainer = React.forwardRef( - ({ variant = "default", element = "CHAT_COMPOSER_CONTAINER", children, ...props }, ref) => { + ({ variant = "default", element = "CHAT_COMPOSER_CONTAINER", maxHeight = "size30", children, ...props }, ref) => { const [isDisabled, setIsDisabled] = React.useState(false); return ( @@ -55,6 +62,8 @@ export const ChatComposerContainer = React.forwardRef {children} diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 62145a8c90..530337a947 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -82,22 +82,42 @@ export const ContainedVariantWithAttatchments: StoryFn = () => { - - {}}> - }> - Document-FINAL.doc - 123 MB - - - - - {}}> - }> - Document-FINAL.doc - 123 MB - - - + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + ); @@ -105,6 +125,62 @@ export const ContainedVariantWithAttatchments: StoryFn = () => { ContainedVariantWithAttatchments.storyName = "Contained Variant with Attatchments"; +export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { + return ( + + + + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + ); +}; + +ResponsiveContainedVariantWithAttatchments.storyName = "Responsive Contained Variant with Attatchments"; + export const ContainedDisabledVariant: StoryFn = () => { const [isDisabled, setIsDisabled] = React.useState(true); return ( @@ -180,22 +256,18 @@ export const CustomizationContainedVariantWithAttatchments: StoryFn = () => { - - {}}> - }> - Document-FINAL.doc - 123 MB - - - - - {}}> - }> - Document-FINAL.doc - 123 MB - - - + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + From dc003a46498ba214c0d3d297f4df496270be4b08 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 13:49:21 -0500 Subject: [PATCH 39/76] feat(anchor): border radius --- packages/paste-core/components/anchor/src/DefaultAnchor.tsx | 1 + packages/paste-core/components/anchor/src/InverseAnchor.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/paste-core/components/anchor/src/DefaultAnchor.tsx b/packages/paste-core/components/anchor/src/DefaultAnchor.tsx index f12f46648d..db24b5ae6b 100644 --- a/packages/paste-core/components/anchor/src/DefaultAnchor.tsx +++ b/packages/paste-core/components/anchor/src/DefaultAnchor.tsx @@ -22,6 +22,7 @@ const DefaultAnchor = React.forwardRef((props, r boxShadow: "shadowFocus", color: "colorTextLink", textDecoration: "underline", + borderRadius: "borderRadius20", }} _hover={{ color: "colorTextLinkStronger", diff --git a/packages/paste-core/components/anchor/src/InverseAnchor.tsx b/packages/paste-core/components/anchor/src/InverseAnchor.tsx index 3836919de4..f0e532c0f8 100644 --- a/packages/paste-core/components/anchor/src/InverseAnchor.tsx +++ b/packages/paste-core/components/anchor/src/InverseAnchor.tsx @@ -22,6 +22,7 @@ const InverseAnchor = React.forwardRef((props, r boxShadow: "shadowFocusInverse", color: "colorTextInverse", textDecoration: "underline", + borderRadius: "borderRadius20", }} _hover={{ color: "colorTextInverse", From c0e275c8dcfc4c2088500ad0cba77c9f4bd7c18e Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 13:52:08 -0500 Subject: [PATCH 40/76] feat(composer): changesets --- .changeset/great-coins-judge.md | 6 ++++++ .changeset/serious-kings-wink.md | 6 ++++++ 2 files changed, 12 insertions(+) create mode 100644 .changeset/great-coins-judge.md create mode 100644 .changeset/serious-kings-wink.md diff --git a/.changeset/great-coins-judge.md b/.changeset/great-coins-judge.md new file mode 100644 index 0000000000..830483dbc2 --- /dev/null +++ b/.changeset/great-coins-judge.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/chat-composer": minor +"@twilio-paste/core": minor +--- + +[ChatComposer] Added new components to allow contained variants, actions buttons and attachments diff --git a/.changeset/serious-kings-wink.md b/.changeset/serious-kings-wink.md new file mode 100644 index 0000000000..d4ae23ea22 --- /dev/null +++ b/.changeset/serious-kings-wink.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/anchor": patch +"@twilio-paste/core": patch +--- + +[Anchor] Added border radius to focus styling From dff1e1f2ed9de5f4a901b09e43c388e209106b58 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 15:34:33 -0500 Subject: [PATCH 41/76] chore(composer): update typedocs --- .../components/chat-composer/type-docs.json | 6684 +++++++++++++++++ 1 file changed, 6684 insertions(+) diff --git a/packages/paste-core/components/chat-composer/type-docs.json b/packages/paste-core/components/chat-composer/type-docs.json index 8038774c44..4e67718a01 100644 --- a/packages/paste-core/components/chat-composer/type-docs.json +++ b/packages/paste-core/components/chat-composer/type-docs.json @@ -692,6 +692,12 @@ "required": false, "externalProp": true }, + "fontSize": { + "type": "\"inherit\" | \"100%\" | \"fontSize10\" | \"fontSize20\" | \"fontSize30\" | \"fontSize40\" | \"fontSize50\" | \"fontSize60\" | \"fontSize70\" | \"fontSize80\" | \"fontSize90\" | \"fontSize100\" | \"fontSize110\" | ... 5 more ... | { ...; }", + "defaultValue": "null", + "required": false, + "externalProp": false + }, "form": { "type": "string", "defaultValue": null, @@ -880,6 +886,12 @@ "required": false, "externalProp": true }, + "lineHeight": { + "type": "\"inherit\" | \"unset\" | \"lineHeight0\" | \"lineHeight05\" | \"lineHeight10\" | \"lineHeight20\" | \"lineHeight30\" | \"lineHeight40\" | \"lineHeight50\" | \"lineHeight60\" | \"lineHeight70\" | ... 8 more ... | { ...; }", + "defaultValue": "null", + "required": false, + "externalProp": false + }, "list": { "type": "string", "defaultValue": null, @@ -2290,5 +2302,6677 @@ "required": false, "externalProp": true } + }, + "ChatComposerActionGroup": { + "element": { + "type": "string", + "defaultValue": "'CHAT_COMPOSER_ACTION_GROUP'", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + } + }, + "ChatComposerAttachmentGroup": { + "columns": { + "type": "| number\n | (number | null)[]\n | { [x: string]: number | undefined; [x: number]: number | undefined }", + "defaultValue": "2", + "required": false, + "externalProp": false, + "description": "Sets the number of columns in the attachement grid" + }, + "element": { + "type": "string", + "defaultValue": "'CHAT_COMPOSER_ATTACHMENT_GROUP'", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + } + }, + "ChatComposerContainer": { + "element": { + "type": "string", + "defaultValue": "'CHAT_COMPOSER_CONTAINER'", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "maxHeight": { + "type": "| string\n | number\n | (string & {})\n | (MaxHeightOptions | null)[]\n | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }", + "defaultValue": "'size20'", + "required": false, + "externalProp": false, + "description": "Sets the maximum height of the composer before scrolling" + }, + "variant": { + "type": "\"default\" | \"contained\"", + "defaultValue": "'default'", + "required": false, + "externalProp": false, + "description": "Styling of the container" + } + }, + "ChatComposerAttachment": { + "attachmentIcon": { + "type": "NonNullable", + "defaultValue": "null", + "required": true, + "externalProp": false, + "description": "Pass an icon to use for the attachment message. DownloadIcon recommended" + }, + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "CHAT_COMPOSER_ATTACHMENT", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + }, + "ChatComposerAttachmentCard": { + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "CHAT_COMPOSER_ATTACHMENT_CARD", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "i18nDismissLabel": { + "type": "string", + "defaultValue": "Remove attachment", + "required": false, + "externalProp": false, + "description": "Accessible label for the dismiss button if dismissable" + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDismiss": { + "type": "() => void", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "Function to run when ChatComposerAttachmentCard is dismissed. Adds a close button" + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + }, + "ChatComposerAttachmentDescription": { + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "CHAT_COMPOSER_ATTACHMENT_DESCRIPTION", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } + }, + "ChatComposerAttachmentLink": { + "href": { + "type": "string", + "defaultValue": "null", + "required": true, + "externalProp": false, + "description": "A URL to route to." + }, + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "columnGap": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `column-gap` property" + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "display": { + "type": "| Display\n | (Display | null | undefined)[]\n | { [x: string]: Display | undefined; [x: number]: Display | undefined }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop for the CSS `display` property" + }, + "download": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "CHAT_COMPOSER_ATTACHMENT_LINK", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "height": { + "type": "| string\n | number\n | (string & {})\n | (HeightOptions | null)[]\n | { [x: string]: HeightOptions; [x: number]: HeightOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `height` property" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "hrefLang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "i18nExternalLinkLabel": { + "type": "string", + "defaultValue": "'(link takes you to an external page)'", + "required": false, + "externalProp": false, + "description": "Title for `showExternal` icon" + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "margin": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin` property" + }, + "marginBottom": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-bottom` property" + }, + "marginLeft": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-left` property" + }, + "marginRight": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-right` property" + }, + "marginTop": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-top` property" + }, + "marginX": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-left` and `margin-right` properties" + }, + "marginY": { + "type": "\"auto\" | \"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | ... 28 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `margin-top` and `margin-bottom` properties" + }, + "maxHeight": { + "type": "| string\n | number\n | (string & {})\n | (MaxHeightOptions | null)[]\n | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `max-height` property" + }, + "maxWidth": { + "type": "| string\n | number\n | (string & {})\n | (MaxWidthOptions | null)[]\n | { [x: string]: MaxWidthOptions; [x: number]: MaxWidthOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `max-width` property" + }, + "media": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "minHeight": { + "type": "| string\n | number\n | (string & {})\n | (MinHeightOptions | null)[]\n | { [x: string]: MinHeightOptions; [x: number]: MinHeightOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `min-height` property" + }, + "minWidth": { + "type": "| string\n | number\n | (string & {})\n | (MinWidthOptions | null)[]\n | { [x: string]: MinWidthOptions; [x: number]: MinWidthOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `min-width` property" + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "overflow": { + "type": "| Overflow\n | (Overflow | null | undefined)[]\n | { [x: string]: Overflow | undefined; [x: number]: Overflow | undefined }", + "defaultValue": null, + "required": false, + "externalProp": false + }, + "overflowX": { + "type": "| OverflowX\n | (OverflowX | null | undefined)[]\n | { [x: string]: OverflowX | undefined; [x: number]: OverflowX | undefined }", + "defaultValue": null, + "required": false, + "externalProp": false + }, + "overflowY": { + "type": "| OverflowY\n | (OverflowY | null | undefined)[]\n | { [x: string]: OverflowY | undefined; [x: number]: OverflowY | undefined }", + "defaultValue": null, + "required": false, + "externalProp": false + }, + "padding": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding` property" + }, + "paddingBottom": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-bottom` property" + }, + "paddingLeft": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-left` property" + }, + "paddingRight": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-right` property" + }, + "paddingTop": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-top` property" + }, + "paddingX": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-left` and `padding-right` properties" + }, + "paddingY": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive prop of Space tokens for the CSS `padding-top` and `padding-bottom` properties" + }, + "ping": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "referrerPolicy": { + "type": "HTMLAttributeReferrerPolicy", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "rel": { + "type": "string", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "Sets the anchor rel attribute. If external href, defaults to 'noreferrer noopener'. Can be overwritten." + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "rowGap": { + "type": "\"space0\" | \"space10\" | \"space20\" | \"space30\" | \"space40\" | \"space50\" | \"space60\" | \"space70\" | \"space80\" | \"space90\" | \"space100\" | \"space110\" | \"space120\" | \"space130\" | \"space140\" | ... 27 more ... | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "showExternal": { + "type": "boolean", + "defaultValue": false, + "required": false, + "externalProp": false, + "description": "Shows the link external icon." + }, + "size": { + "type": "string | number | (string & {}) | (WidthOptions | null)[] | { [x: string]: WidthOptions; [x: number]: WidthOptions; } | (HeightOptions | null)[] | { ...; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for for the CSS `width` and `height` properties" + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "AnchorTabIndexes", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "Sets the anchor tabIndex attribute." + }, + "target": { + "type": "AnchorTargets", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "If external href, defaults to '_blank'. Can be overwritten." + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "type": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "variant": { + "type": "AnchorVariants", + "defaultValue": "'default'", + "required": false, + "externalProp": false, + "description": "Sets the styled Anchor variant" + }, + "verticalAlign": { + "type": "VerticalAlign<0 | (string & {})> | (VerticalAlign<0 | (string & {})> | null | undefined)[] | { [x: string]: VerticalAlign<0 | (string & {})> | undefined; [x: number]: VerticalAlign<...> | undefined; }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop for the CSS `vertical-align` property" + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "width": { + "type": "| string\n | number\n | (string & {})\n | (WidthOptions | null)[]\n | { [x: string]: WidthOptions; [x: number]: WidthOptions }", + "defaultValue": null, + "required": false, + "externalProp": false, + "description": "Responsive style prop of Size Tokens for the CSS `width` property" + } } } From d9d73ece3277b3cf76c6e6942ec678a797ea60d3 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 16:00:24 -0500 Subject: [PATCH 42/76] chore(composer): fix lint --- .../components/chat-composer/__tests__/index.spec.tsx | 1 - .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 4 ++-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index bd4c3b23b7..6ec7c5dc2a 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -4,7 +4,6 @@ import { Button } from "@twilio-paste/button"; import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; - import * as React from "react"; import { diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 89eeb3a6db..19f99629cb 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -23,8 +23,8 @@ export interface ChatComposerAttachmentGroupProps { export const ChatComposerAttachmentGroup = React.forwardRef( ({ element = "CHAT_COMPOSER_ATTACHMENT_GROUP", columns = 2, children, ...props }, ref) => { - const getColumnStyles = () => { - if (columns instanceof Array) { + const getColumnStyles = (): string | string[] => { + if (Array.isArray(columns)) { return columns.map((column) => `repeat(${column}, minmax(0,1fr))`); } return `repeat(${columns}, 1fr)`; From 587d4f2d40f2f4049213d34795fc85f092364829 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 18:36:52 -0500 Subject: [PATCH 43/76] chore(composer): missing codemod --- .changeset/fair-beds-exist.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fair-beds-exist.md diff --git a/.changeset/fair-beds-exist.md b/.changeset/fair-beds-exist.md new file mode 100644 index 0000000000..e6c4efcd1e --- /dev/null +++ b/.changeset/fair-beds-exist.md @@ -0,0 +1,5 @@ +--- +"@twilio-paste/codemods": minor +--- + +[ChatComposer] Added new components to allow contained variants, actions buttons and attachments From eec0ec1146acd8801fae8d2ce9850803ecdfd9b2 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 28 Jun 2024 12:58:02 -0500 Subject: [PATCH 44/76] feat(composer): add new plugin to access state --- .../ai-chat-log/stories/composer.stories.tsx | 38 +- .../chat-composer/src/ChatComposer.tsx | 21 +- .../chat-composer/stories/logs.stories.tsx | 418 ++++++++++++++++++ .../paste-libraries/lexical/src/index.tsx | 1 + 4 files changed, 463 insertions(+), 15 deletions(-) create mode 100644 packages/paste-core/components/chat-composer/stories/logs.stories.tsx diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index d8d28b6f61..0de25e6cfa 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -4,7 +4,7 @@ import type { AIChat } from "@twilio-paste/ai-chat-log"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { ButtonGroup } from "@twilio-paste/button-group"; -import { ChatComposer } from "@twilio-paste/chat-composer"; +import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; @@ -14,10 +14,12 @@ import { COMMAND_PRIORITY_HIGH, ClearEditorPlugin, KEY_ENTER_COMMAND, + LexicalEditor, useLexicalComposerContext, } from "@twilio-paste/lexical-library"; import * as React from "react"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { AIChatLog, AIChatLogger, @@ -202,22 +204,15 @@ export const AIChatLogComposer = (): React.ReactNode => { if (message === "") return; push(createNewMessage(message)); }; + + const editorRef = React.useRef(null); + return ( - + { ariaLabel="Message" placeholder="Type here..." onChange={handleComposerChange} + editorInstanceRef={editorRef} > - - + + + + + ); }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index b174e1aec8..1e928f8a48 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -3,6 +3,11 @@ import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; import { // The component that renders the content editable div ContentEditable, + /* + * Adds the ability to access the Lexical editor instance from outside of the context + * https://lexical.dev/docs/react/plugins#lexicaleditorrefplugin + */ + EditorRefPlugin, /* * ErrorBoundary catches errors in any of the children * https://reactjs.org/docs/error-boundaries.html @@ -26,7 +31,12 @@ import { */ RichTextPlugin, } from "@twilio-paste/lexical-library"; -import type { ContentEditableProps, LexicalComposerProps, OnChangeFunction } from "@twilio-paste/lexical-library"; +import type { + ContentEditableProps, + LexicalComposerProps, + LexicalEditor, + OnChangeFunction, +} from "@twilio-paste/lexical-library"; import { StylingGlobals } from "@twilio-paste/styling-library"; import { ThemeShape } from "@twilio-paste/theme"; import merge from "deepmerge"; @@ -99,6 +109,13 @@ export interface ChatComposerProps extends Omit} + * @memberof ChatComposerProps + */ + editorInstanceRef?: React.MutableRefObject; } export const ChatComposer = React.forwardRef( @@ -114,6 +131,7 @@ export const ChatComposer = React.forwardRef( disabled, fontSize, lineHeight, + editorInstanceRef, ...props }, ref, @@ -173,6 +191,7 @@ export const ChatComposer = React.forwardRef( + {editorInstanceRef && } {children} diff --git a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx new file mode 100644 index 0000000000..290c3dd469 --- /dev/null +++ b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx @@ -0,0 +1,418 @@ +import type { StoryFn } from "@storybook/react"; +import { + AIChatLogger, + AIChatMessage, + AIChatMessageActionCard, + AIChatMessageActionGroup, + AIChatMessageAuthor, + AIChatMessageBody, + AIChatMessageLoading, + useAIChatLogger, +} from "@twilio-paste/ai-chat-log"; +import { Avatar } from "@twilio-paste/avatar"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { + Chat, + ChatAttachment, + ChatAttachmentDescription, + ChatAttachmentLink, + ChatBookend, + ChatBookendItem, + ChatBubble, + ChatEvent, + ChatLogger, + ChatMessage, + ChatMessageMeta, + ChatMessageMetaItem, + useChatLogger, +} from "@twilio-paste/chat-log"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; +import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; +import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; +import * as React from "react"; + +import { AIChat } from "@twilio-paste/ai-chat-log/src"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; +import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; +import { + $getRoot, + CLEAR_EDITOR_COMMAND, + COMMAND_PRIORITY_HIGH, + ClearEditorPlugin, + KEY_ENTER_COMMAND, + LexicalEditor, + useLexicalComposerContext, +} from "@twilio-paste/lexical-library"; +import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "../src"; + +export default { + title: "Components/Chat Composer/LogsExperience", + component: ChatComposer, + parameters: { + a11y: { + // no need to a11y check customization + disable: true, + }, + }, +}; + +const EnterKeySubmitPlugin = ({ onKeyDown }: { onKeyDown: () => void }): null => { + const [editor] = useLexicalComposerContext(); + + const handleEnterKey = React.useCallback( + (event: KeyboardEvent) => { + const { shiftKey, ctrlKey } = event; + if (shiftKey || ctrlKey) return false; + event.preventDefault(); + event.stopPropagation(); + onKeyDown(); + editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + return true; + }, + [editor, onKeyDown], + ); + + React.useEffect(() => { + return editor.registerCommand(KEY_ENTER_COMMAND, handleEnterKey, COMMAND_PRIORITY_HIGH); + }, [editor, handleEnterKey]); + return null; +}; + +function getRandomInt(max: number): number { + return Math.floor(Math.random() * max); +} + +const createNewMessage = (message: string): Omit => { + const time = new Date().toLocaleString("en-US", { + hour: "numeric", + minute: "numeric", + hour12: true, + }); + + const messageDirection = getRandomInt(2) === 1 ? "inbound" : "outbound"; + + return { + variant: messageDirection, + content: ( + + {message} + + {time} + + + ), + }; +}; + +export const ChatLogStory: StoryFn = () => { + const { chats, push } = useChatLogger( + { + content: ( + + Today + + Chat Started・3:34 PM + + + ), + }, + { + variant: "inbound", + content: ( + + Quisque ullamcorper ipsum vitae lorem euismod sodales. + + }> + Document-FINAL.doc + 123 MB + + + + Gibby Radki ・ 5:04 PM + + + ), + }, + { + content: ( + + Lauren Gardner has joined the chat ・ 4:26 PM + + ), + }, + { + variant: "inbound", + content: ( + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + Lauren Gardner ・ 4:30 PM + + + + ), + }, + ); + const [message, setMessage] = React.useState(""); + + const [mounted, setMounted] = React.useState(false); + const loggerRef = React.useRef(null); + const scrollerRef = React.useRef(null); + + React.useEffect(() => { + setMounted(true); + }, []); + + React.useEffect(() => { + if (!mounted || !loggerRef.current) return; + scrollerRef.current?.scrollTo({ top: loggerRef.current.scrollHeight, behavior: "smooth" }); + }, [chats, mounted]); + + const handleComposerChange = (editorState) => { + editorState.read(() => { + const text = $getRoot().getTextContent(); + setMessage(text); + }); + }; + + const submitMessage = () => { + if (message === "") return; + push(createNewMessage(message)); + }; + + const editorRef = React.useRef(null); + + return ( + + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + onChange={handleComposerChange} + editorInstanceRef={editorRef} + > + + + + + + + + + + + ); +}; + +ChatLogStory.storyName = "Chat Log"; + +const BotMessage = (props): JSX.Element => { + const [isLoading, setIsLoading] = React.useState(true); + + setTimeout(() => { + setIsLoading(false); + }, 3000); + return isLoading ? ( + + Good Bot + { + setIsLoading(false); + }} + /> + + ) : ( + + Good Bot + {props.message as string} + + ); +}; + +// eslint-disable-next-line storybook/prefer-pascal-case +const createNewAIMessage = (message: string): Omit => { + const messageDirection = getRandomInt(2) === 1 ? "user" : "bot"; + + return { + variant: messageDirection, + content: + messageDirection === "user" ? ( + + Gibby Radki + {message} + + ) : ( + + + + ), + }; +}; + +export const AIChatLogComposer = (): React.ReactNode => { + const { aiChats, push } = useAIChatLogger( + { + variant: "user", + content: ( + + Gibby Radki + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus eligendi + iure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit nesciunt + impedit repellat assumenda. + + + ), + }, + { + variant: "bot", + content: ( + + Good Bot + + Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt delectus fuga, necessitatibus + eligendiiure adipisci facilis exercitationem officiis dolorem laborum, ex fugiat quisquam itaque, earum sit + nesciunt impedit repellat assumenda. + + + + + + + + + + + Is this helpful? + + + + + + ), + }, + ); + const [message, setMessage] = React.useState(""); + + const [mounted, setMounted] = React.useState(false); + const loggerRef = React.useRef(null); + const scrollerRef = React.useRef(null); + + React.useEffect(() => { + setMounted(true); + }, []); + + React.useEffect(() => { + if (!mounted || !loggerRef.current) return; + const scrollPosition: any = scrollerRef.current; + const scrollHeight: any = loggerRef.current; + scrollPosition?.scrollTo({ top: scrollHeight.scrollHeight, behavior: "smooth" }); + }, [aiChats, mounted]); + + const handleComposerChange = (editorState): void => { + editorState.read(() => { + const text = $getRoot().getTextContent(); + setMessage(text); + }); + }; + + const submitMessage = (): void => { + if (message === "") return; + push(createNewAIMessage(message)); + }; + + const editorRef = React.useRef(null); + + return ( + + + + + + + { + throw error; + }, + }} + ariaLabel="Message" + placeholder="Type here..." + onChange={handleComposerChange} + editorInstanceRef={editorRef} + > + + + + + + + + + + ); +}; +AIChatLogComposer.storyName = "AI Chat Log"; +AIChatLogComposer.parameters = { + a11y: { + // no need to a11y check composition of a11y checked components + disable: true, + }, +}; diff --git a/packages/paste-libraries/lexical/src/index.tsx b/packages/paste-libraries/lexical/src/index.tsx index 5880e35649..a2634e7f4b 100644 --- a/packages/paste-libraries/lexical/src/index.tsx +++ b/packages/paste-libraries/lexical/src/index.tsx @@ -32,6 +32,7 @@ export { TablePlugin } from "@lexical/react/LexicalTablePlugin"; export { AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin"; export { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin"; export { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin"; +export { EditorRefPlugin } from "@lexical/react/LexicalEditorRefPlugin"; export { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"; export type LexicalComposerProps = React.ComponentProps; From 0e3056055d82cc9bb069dbaf4b4892d04eebdada Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 28 Jun 2024 13:05:43 -0500 Subject: [PATCH 45/76] feat(composer): fix lint issues --- .../ai-chat-log/stories/composer.stories.tsx | 2 +- .../chat-composer/stories/logs.stories.tsx | 12 ++++++------ 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index 0de25e6cfa..a83c0d4194 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -5,6 +5,7 @@ import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; import { ButtonGroup } from "@twilio-paste/button-group"; import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "@twilio-paste/chat-composer"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; @@ -19,7 +20,6 @@ import { } from "@twilio-paste/lexical-library"; import * as React from "react"; -import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { AIChatLog, AIChatLogger, diff --git a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx index 290c3dd469..6002f53697 100644 --- a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx @@ -1,5 +1,6 @@ import type { StoryFn } from "@storybook/react"; import { + AIChat, AIChatLogger, AIChatMessage, AIChatMessageActionCard, @@ -12,6 +13,7 @@ import { import { Avatar } from "@twilio-paste/avatar"; import { Box } from "@twilio-paste/box"; import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; import { Chat, ChatAttachment, @@ -30,10 +32,6 @@ import { import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; import { SendIcon } from "@twilio-paste/icons/esm/SendIcon"; -import * as React from "react"; - -import { AIChat } from "@twilio-paste/ai-chat-log/src"; -import { ButtonGroup } from "@twilio-paste/button-group"; import { ThumbsDownIcon } from "@twilio-paste/icons/esm/ThumbsDownIcon"; import { ThumbsUpIcon } from "@twilio-paste/icons/esm/ThumbsUpIcon"; import { @@ -45,6 +43,8 @@ import { LexicalEditor, useLexicalComposerContext, } from "@twilio-paste/lexical-library"; +import * as React from "react"; + import { ChatComposer, ChatComposerActionGroup, ChatComposerContainer } from "../src"; export default { @@ -172,14 +172,14 @@ export const ChatLogStory: StoryFn = () => { scrollerRef.current?.scrollTo({ top: loggerRef.current.scrollHeight, behavior: "smooth" }); }, [chats, mounted]); - const handleComposerChange = (editorState) => { + const handleComposerChange = (editorState): void => { editorState.read(() => { const text = $getRoot().getTextContent(); setMessage(text); }); }; - const submitMessage = () => { + const submitMessage = (): void => { if (message === "") return; push(createNewMessage(message)); }; From 80f39764660edfce5dca9a49e5d38a422ed77897 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 1 Jul 2024 09:19:29 -0500 Subject: [PATCH 46/76] chore(chat-composer): fix spellings --- .../chat-composer/__tests__/index.spec.tsx | 14 +++++++------- .../src/ChatComposerAttachmentGroup.tsx | 2 +- .../chat-composer/src/ChatComposerContainer.tsx | 2 +- .../chat-composer/stories/container.stories.tsx | 14 +++++++------- 4 files changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index 6ec7c5dc2a..098e232226 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -24,7 +24,7 @@ const baseConfig = { }, }; -const attatchments = [ +const attachments = [ { name: "Document-FINAL.doc", size: "123 MB", @@ -56,7 +56,7 @@ const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock } - {attatchments.map((attatchment, index) => ( + {attachments.map((attatchment, index) => ( { attatchmentCloseSpy(attatchment.name); @@ -108,7 +108,7 @@ const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: j data-testid="chat-composer-attachement-group" element="CUSTOM_CHAT_COMPOSER_ATTACHMENT_GROUP" > - {attatchments.map((attatchment, index) => ( + {attachments.map((attatchment, index) => ( { attatchmentCloseSpy(attatchment.name); @@ -150,13 +150,13 @@ describe("ChatComposer", () => { expect(screen.getByText("Type here...")).toBeDefined(); expect(screen.getByRole("button", { name: "Attach" })).toBeDefined(); expect(screen.getByRole("button", { name: "Send" })).toBeDefined(); - attatchments.forEach((attatchment) => { + attachments.forEach((attatchment) => { expect(screen.getByText(attatchment.name)).toBeDefined(); expect(screen.getByText(attatchment.size)).toBeDefined(); }); screen.getAllByRole("button", { name: "Remove attachment" }).forEach((button, index) => { userEvent.click(button); - expect(spy).toHaveBeenCalledWith(attatchments[index].name); + expect(spy).toHaveBeenCalledWith(attachments[index].name); }); }); @@ -176,7 +176,7 @@ describe("ChatComposer", () => { expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( "CHAT_COMPOSER_ATTACHMENT_GROUP", ); - attatchments.forEach((attatchment, index) => { + attachments.forEach((attatchment, index) => { expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( "CHAT_COMPOSER_ATTACHMENT_CARD", ); @@ -207,7 +207,7 @@ describe("ChatComposer", () => { expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( "CUSTOM_CHAT_COMPOSER_ATTACHMENT_GROUP", ); - attatchments.forEach((attatchment, index) => { + attachments.forEach((attatchment, index) => { expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( "CUSTOM_CHAT_COMPOSER_ATTACHMENT_CARD", ); diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 19f99629cb..859746b6b6 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -34,7 +34,7 @@ export const ChatComposerAttachmentGroup = React.forwardRef { ContainedVariant.storyName = "Contained Variant"; -export const ContainedVariantWithAttatchments: StoryFn = () => { +export const ContainedVariantWithAttachments: StoryFn = () => { return ( @@ -123,9 +123,9 @@ export const ContainedVariantWithAttatchments: StoryFn = () => { ); }; -ContainedVariantWithAttatchments.storyName = "Contained Variant with Attatchments"; +ContainedVariantWithAttachments.storyName = "Contained Variant with Attachments"; -export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { +export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { return ( @@ -179,7 +179,7 @@ export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { ); }; -ResponsiveContainedVariantWithAttatchments.storyName = "Responsive Contained Variant with Attatchments"; +ResponsiveContainedVariantWithAttachments.storyName = "Responsive Contained Variant with Attachments"; export const ContainedDisabledVariant: StoryFn = () => { const [isDisabled, setIsDisabled] = React.useState(true); @@ -212,7 +212,7 @@ export const ContainedDisabledVariant: StoryFn = () => { ContainedDisabledVariant.storyName = "Contained Disabled Variant"; -export const CustomizationContainedVariantWithAttatchments: StoryFn = () => { +export const CustomizationContainedVariantWithAttachments: StoryFn = () => { const theme = useTheme(); return ( @@ -274,8 +274,8 @@ export const CustomizationContainedVariantWithAttatchments: StoryFn = () => { ); }; -CustomizationContainedVariantWithAttatchments.storyName = "Customization Contained Variant with Attatchments"; -CustomizationContainedVariantWithAttatchments.parameters = { +CustomizationContainedVariantWithAttachments.storyName = "Customization Contained Variant with Attachments"; +CustomizationContainedVariantWithAttachments.parameters = { a11y: { // no need to a11y check customization disable: true, From 0f2a1793808d5b276345fad5322924a7a4e1e88d Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 1 Jul 2024 09:25:08 -0500 Subject: [PATCH 47/76] chore(chat-composer): styling updates from PR comments --- .../chat-composer/src/ChatComposerActionGroup.tsx | 1 + .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 3 +-- .../components/chat-composer/src/ChatComposerContainer.tsx | 6 ++++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx index de5a553a1b..d325ff26f0 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -26,6 +26,7 @@ export const ChatComposerActionGroup = React.forwardRef {children} diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index 859746b6b6..189c772b8f 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -40,9 +40,8 @@ export const ChatComposerAttachmentGroup = React.forwardRef {children} diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index bd90faf9d0..f1e9a92792 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -12,7 +12,8 @@ const Styles = { borderStyle: "solid", borderRadius: "borderRadius30" as ThemeShape["radii"], borderColor: "colorBorderWeaker" as ThemeShape["borderColors"], - boxShadow: "shadowBorderLow" as ThemeShape["shadows"], + boxShadow: "shadowLow" as ThemeShape["shadows"], + backgroundColor: "colorBackgroundBody" as ThemeShape["backgroundColors"], }, }; @@ -61,9 +62,10 @@ export const ChatComposerContainer = React.forwardRef {children} From 7fe1db9e9bc299a39f451603f3591f67ba29a38b Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 2 Jul 2024 10:02:37 -0500 Subject: [PATCH 48/76] chore(chat-composer): udpate typedocs --- packages/paste-core/components/chat-composer/type-docs.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/paste-core/components/chat-composer/type-docs.json b/packages/paste-core/components/chat-composer/type-docs.json index 4e67718a01..8c79c81a13 100644 --- a/packages/paste-core/components/chat-composer/type-docs.json +++ b/packages/paste-core/components/chat-composer/type-docs.json @@ -679,6 +679,12 @@ "required": false, "externalProp": true }, + "editorInstanceRef": { + "type": "MutableRefObject", + "defaultValue": "null", + "required": false, + "externalProp": false + }, "element": { "type": "string", "defaultValue": "CHAT_COMPOSER", From b63e78a053306c95c961558023f43c71d649d699 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 2 Jul 2024 10:10:41 -0500 Subject: [PATCH 49/76] chore(lexical-library): added changeset for export --- .changeset/nasty-beans-fetch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/nasty-beans-fetch.md diff --git a/.changeset/nasty-beans-fetch.md b/.changeset/nasty-beans-fetch.md new file mode 100644 index 0000000000..41d4b16e79 --- /dev/null +++ b/.changeset/nasty-beans-fetch.md @@ -0,0 +1,5 @@ +--- +"@twilio-paste/lexical-library": patch +--- + +[Lexical] added export for EditorRefPlugin From 425b802263aa46d088f7e49186df1dcf267c11ab Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 2 Jul 2024 10:53:27 -0500 Subject: [PATCH 50/76] chore(lexical-library): update changeset --- .changeset/nasty-beans-fetch.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/nasty-beans-fetch.md b/.changeset/nasty-beans-fetch.md index 41d4b16e79..40016d5a6c 100644 --- a/.changeset/nasty-beans-fetch.md +++ b/.changeset/nasty-beans-fetch.md @@ -1,5 +1,6 @@ --- "@twilio-paste/lexical-library": patch +"@twilio-paste/core": patch --- [Lexical] added export for EditorRefPlugin From e722acf1161df20ccb616e60e2656b3c1757baf2 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 8 Jul 2024 07:29:17 -0500 Subject: [PATCH 51/76] chore(chat-composer): naming updates --- .../chat-composer/__tests__/index.spec.tsx | 40 +++++++++---------- 1 file changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx index 098e232226..d1fd5ac384 100644 --- a/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx +++ b/packages/paste-core/components/chat-composer/__tests__/index.spec.tsx @@ -37,8 +37,8 @@ const attachments = [ }, ]; -const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock }> = ({ - attatchmentCloseSpy = jest.fn(), +const ExampleChatComposerContained: React.FC<{ attachmentCloseSpy?: jest.Mock }> = ({ + attachmentCloseSpy = jest.fn(), }) => ( - {attachments.map((attatchment, index) => ( + {attachments.map((attachment, index) => ( { - attatchmentCloseSpy(attatchment.name); + attachmentCloseSpy(attachment.name); }} key={`attachment=${index}`} data-testid={`chat-composer-attachment-card-${index}`} @@ -68,11 +68,11 @@ const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock } attachmentIcon={} data-testid={`chat-composer-attachment-${index}`} > - - {attatchment.name} + + {attachment.name} - {attatchment.size} + {attachment.size} @@ -81,8 +81,8 @@ const ExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock } ); -const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: jest.Mock }> = ({ - attatchmentCloseSpy = jest.fn(), +const CustomizedExampleChatComposerContained: React.FC<{ attachmentCloseSpy?: jest.Mock }> = ({ + attachmentCloseSpy = jest.fn(), }) => ( - {attachments.map((attatchment, index) => ( + {attachments.map((attachment, index) => ( { - attatchmentCloseSpy(attatchment.name); + attachmentCloseSpy(attachment.name); }} key={`attachment=${index}`} data-testid={`chat-composer-attachment-card-${index}`} @@ -123,17 +123,17 @@ const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: j element={`CUSTOM_CHAT_COMPOSER_ATTACHMENT-${index}`} > - {attatchment.name} + {attachment.name} - {attatchment.size} + {attachment.size} @@ -145,14 +145,14 @@ const CustomizedExampleChatComposerContained: React.FC<{ attatchmentCloseSpy?: j describe("ChatComposer", () => { it("should render", () => { const spy = jest.fn(); - render(); + render(); expect(screen.getByRole("textbox")).toBeDefined(); expect(screen.getByText("Type here...")).toBeDefined(); expect(screen.getByRole("button", { name: "Attach" })).toBeDefined(); expect(screen.getByRole("button", { name: "Send" })).toBeDefined(); - attachments.forEach((attatchment) => { - expect(screen.getByText(attatchment.name)).toBeDefined(); - expect(screen.getByText(attatchment.size)).toBeDefined(); + attachments.forEach((attachment) => { + expect(screen.getByText(attachment.name)).toBeDefined(); + expect(screen.getByText(attachment.size)).toBeDefined(); }); screen.getAllByRole("button", { name: "Remove attachment" }).forEach((button, index) => { userEvent.click(button); @@ -176,7 +176,7 @@ describe("ChatComposer", () => { expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( "CHAT_COMPOSER_ATTACHMENT_GROUP", ); - attachments.forEach((attatchment, index) => { + attachments.forEach((attachment, index) => { expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( "CHAT_COMPOSER_ATTACHMENT_CARD", ); @@ -207,7 +207,7 @@ describe("ChatComposer", () => { expect(screen.getByTestId("chat-composer-attachement-group").getAttribute("data-paste-element")).toEqual( "CUSTOM_CHAT_COMPOSER_ATTACHMENT_GROUP", ); - attachments.forEach((attatchment, index) => { + attachments.forEach((attachment, index) => { expect(screen.getByTestId(`chat-composer-attachment-card-${index}`).getAttribute("data-paste-element")).toEqual( "CUSTOM_CHAT_COMPOSER_ATTACHMENT_CARD", ); From e84f02ad27131a1ee3d76fa3d39e661a01a36692 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 8 Jul 2024 14:24:14 -0500 Subject: [PATCH 52/76] chore(chat-composer): chnage stlying types --- .../ai-chat-log/src/AIChatMessageBody.tsx | 13 ++++++------- .../components/chat-composer/src/ChatComposer.tsx | 7 +++---- .../chat-composer/src/ChatComposerContainer.tsx | 15 +++++++-------- 3 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx b/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx index d81589c611..ef51fe17df 100644 --- a/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx +++ b/packages/paste-core/components/ai-chat-log/src/AIChatMessageBody.tsx @@ -1,19 +1,18 @@ import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; -import type { BoxElementProps } from "@twilio-paste/box"; -import type { ThemeShape } from "@twilio-paste/theme"; +import type { BoxElementProps, BoxStyleProps } from "@twilio-paste/box"; import type { HTMLPasteProps } from "@twilio-paste/types"; import * as React from "react"; import { AIMessageContext } from "./AIMessageContext"; -const Sizes = { +const Sizes: Record = { default: { - fontSize: "fontSize30" as ThemeShape["fontSizes"], - lineHeight: "lineHeight30" as ThemeShape["lineHeights"], + fontSize: "fontSize30", + lineHeight: "lineHeight30", }, fullScreen: { - fontSize: "fontSize40" as ThemeShape["fontSizes"], - lineHeight: "lineHeight40" as ThemeShape["lineHeights"], + fontSize: "fontSize40", + lineHeight: "lineHeight40", }, }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 1e928f8a48..6b32c2b81a 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -38,7 +38,6 @@ import type { OnChangeFunction, } from "@twilio-paste/lexical-library"; import { StylingGlobals } from "@twilio-paste/styling-library"; -import { ThemeShape } from "@twilio-paste/theme"; import merge from "deepmerge"; import * as React from "react"; @@ -144,7 +143,7 @@ export const ChatComposer = React.forwardRef( editorState: initialValue ? () => renderInitialText(initialValue) : undefined, }; - const getDisabledStyling = React.useCallback(() => { + const getDisabledStyling = React.useCallback((): BoxStyleProps => { /** * If setIsDisabled is defined, then the styling will be handled by ChatComposerContainer. * If it is not defined, then the styling will be handled by ChatComposer. Using both causes the diabled style tochange @@ -154,8 +153,8 @@ export const ChatComposer = React.forwardRef( return {}; } return { - color: "colorTextWeaker" as ThemeShape["textColors"], - backgroundColor: "colorBackground" as ThemeShape["backgroundColors"], + color: "colorTextWeaker", + backgroundColor: "colorBackground", }; }, [Boolean(setIsDisabled)]); diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index f1e9a92792..5592c90578 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -1,19 +1,18 @@ -import type { BoxProps } from "@twilio-paste/box"; +import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; -import { ThemeShape } from "@twilio-paste/theme"; import * as React from "react"; import { ChatComposerContext } from "./ChatComposerContext"; -const Styles = { +const Styles: Record = { default: {}, contained: { - borderWidth: "borderWidth10" as ThemeShape["borderWidths"], + borderWidth: "borderWidth10", borderStyle: "solid", - borderRadius: "borderRadius30" as ThemeShape["radii"], - borderColor: "colorBorderWeaker" as ThemeShape["borderColors"], - boxShadow: "shadowLow" as ThemeShape["shadows"], - backgroundColor: "colorBackgroundBody" as ThemeShape["backgroundColors"], + borderRadius: "borderRadius30", + borderColor: "colorBorderWeaker", + boxShadow: "shadowLow", + backgroundColor: "colorBackgroundBody", }, }; From 9ef9f03fc71381aec19a64c9f957d8a1b9f0e65e Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 8 Jul 2024 15:27:10 -0500 Subject: [PATCH 53/76] chore(ai-chatl-log): added changeset --- .changeset/khaki-boats-help.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/khaki-boats-help.md diff --git a/.changeset/khaki-boats-help.md b/.changeset/khaki-boats-help.md new file mode 100644 index 0000000000..12941a9591 --- /dev/null +++ b/.changeset/khaki-boats-help.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/alert-dialog": patch +"@twilio-paste/core": patch +--- + +[AI Chat Log] Updated internal styling types From 3405cb6d9a23621a46660254bd9d3a8388f30108 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 9 Jul 2024 12:54:47 -0500 Subject: [PATCH 54/76] chore(ai-chatl-log): updated changeset --- .changeset/khaki-boats-help.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/khaki-boats-help.md b/.changeset/khaki-boats-help.md index 12941a9591..60a75b1bdc 100644 --- a/.changeset/khaki-boats-help.md +++ b/.changeset/khaki-boats-help.md @@ -1,6 +1,6 @@ --- -"@twilio-paste/alert-dialog": patch +"@twilio-paste/ai-chat-log": patch "@twilio-paste/core": patch --- -[AI Chat Log] Updated internal styling types +[AIChatLog] Updated internal styling types From 8253df1723e206d8bb1fdb6cbc5e57afaeca73b5 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 9 Jul 2024 15:58:25 -0500 Subject: [PATCH 55/76] chore(chat-composer): pr cleanup --- .../ai-chat-log/stories/composer.stories.tsx | 2 +- .../components/chat-composer/src/ChatComposer.tsx | 4 ++-- .../chat-composer/src/ChatComposerContainer.tsx | 4 ++-- ...leDisabledPlugin.tsx => ToggleEditablePlugin.tsx} | 0 .../chat-composer/stories/container.stories.tsx | 12 ++++++------ .../chat-composer/stories/logs.stories.tsx | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) rename packages/paste-core/components/chat-composer/src/{ToggleDisabledPlugin.tsx => ToggleEditablePlugin.tsx} (100%) diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index a83c0d4194..1daf198a31 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -231,7 +231,7 @@ export const AIChatLogComposer = (): React.ReactNode => { - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB @@ -138,41 +125,29 @@ export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB @@ -222,9 +197,8 @@ export const CustomizationContainedVariantWithAttachments: StoryFn = () => { CHAT_COMPOSER: { color: "colorTextBrandHighlight" }, CHAT_COMPOSER_PLACEHOLDER_WRAPPER: { color: "colorTextBrandHighlight" }, CHAT_COMPOSER_ACTION_GROUP: { columnGap: "space90" }, - CHAT_COMPOSER_ATTACHMENT: { height: "size10" }, - CHAT_COMPOSER_ATTACHMENT_ICON: { color: "colorTextDestructive" }, - CHAT_COMPOSER_ATTACHMENT_BODY: { fontFamily: "fontFamilyCode" }, + CHAT_COMPOSER_ATTACHMENT_CARD_ICON: { color: "colorTextDestructive" }, + CHAT_COMPOSER_ATTACHMENT_CARD_BODY: { fontFamily: "fontFamilyCode" }, CHAT_COMPOSER_ATTACHMENT_CARD: { backgroundColor: "colorBackgroundDecorative10Weakest" }, CHAT_COMPOSER_ATTACHMENT_CARD_REMOVE_BUTTON: { color: "colorTextIconBrandHighlight" }, CHAT_COMPOSER_ATTACHMENT_DESCRIPTION: { @@ -256,17 +230,13 @@ export const CustomizationContainedVariantWithAttachments: StoryFn = () => { - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB diff --git a/packages/paste-core/components/chat-composer/type-docs.json b/packages/paste-core/components/chat-composer/type-docs.json index 8c79c81a13..adf852a591 100644 --- a/packages/paste-core/components/chat-composer/type-docs.json +++ b/packages/paste-core/components/chat-composer/type-docs.json @@ -2344,7 +2344,7 @@ }, "maxHeight": { "type": "| string\n | number\n | (string & {})\n | (MaxHeightOptions | null)[]\n | { [x: string]: MaxHeightOptions; [x: number]: MaxHeightOptions }", - "defaultValue": "'size20'", + "defaultValue": "'size30'", "required": false, "externalProp": false, "description": "Sets the maximum height of the composer before scrolling" @@ -2357,7 +2357,7 @@ "description": "Styling of the container" } }, - "ChatComposerAttachment": { + "ChatComposerAttachmentCard": { "attachmentIcon": { "type": "NonNullable", "defaultValue": "null", @@ -2779,1589 +2779,6 @@ "required": false, "externalProp": true }, - "element": { - "type": "string", - "defaultValue": "CHAT_COMPOSER_ATTACHMENT", - "required": false, - "externalProp": false, - "description": "Overrides the default element name to apply unique styles with the Customization Provider" - }, - "hidden": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "id": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "inlist": { - "type": "any", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "inputMode": { - "type": "| \"none\"\n | \"search\"\n | \"text\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" - }, - "is": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Specify that a standard HTML element should behave like a defined custom built-in element" - }, - "itemID": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "itemProp": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "itemRef": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "itemScope": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "itemType": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "key": { - "type": "Key", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "lang": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "nonce": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAbort": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAbortCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationEnd": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationEndCapture": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationIteration": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationIterationCapture": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationStart": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAnimationStartCapture": { - "type": "AnimationEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAuxClick": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onAuxClickCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onBeforeInput": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onBeforeInputCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onBlur": { - "type": "FocusEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onBlurCapture": { - "type": "FocusEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCanPlay": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCanPlayCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCanPlayThrough": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCanPlayThroughCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onChange": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onChangeCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onClick": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onClickCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionEnd": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionEndCapture": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionStart": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionStartCapture": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionUpdate": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCompositionUpdateCapture": { - "type": "CompositionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onContextMenu": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onContextMenuCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCopy": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCopyCapture": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCut": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onCutCapture": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDoubleClick": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDoubleClickCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDrag": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragEnd": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragEndCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragEnter": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragEnterCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragExit": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragExitCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragLeave": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragLeaveCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragOver": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragOverCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragStart": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDragStartCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDrop": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDropCapture": { - "type": "DragEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDurationChange": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onDurationChangeCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEmptied": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEmptiedCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEncrypted": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEncryptedCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEnded": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onEndedCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onError": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onErrorCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onFocus": { - "type": "FocusEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onFocusCapture": { - "type": "FocusEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onGotPointerCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onGotPointerCaptureCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onInput": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onInputCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onInvalid": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onInvalidCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyDown": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyDownCapture": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyPress": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyPressCapture": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyUp": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onKeyUpCapture": { - "type": "KeyboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoad": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadedData": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadedDataCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadedMetadata": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadedMetadataCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadStart": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLoadStartCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLostPointerCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onLostPointerCaptureCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseDown": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseDownCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseEnter": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseLeave": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseMove": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseMoveCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseOut": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseOutCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseOver": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseOverCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseUp": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onMouseUpCapture": { - "type": "MouseEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPaste": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPasteCapture": { - "type": "ClipboardEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPause": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPauseCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPlay": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPlayCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPlaying": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPlayingCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerCancel": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerCancelCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerDown": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerDownCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerEnter": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerEnterCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerLeave": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerLeaveCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerMove": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerMoveCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerOut": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerOutCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerOver": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerOverCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerUp": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onPointerUpCapture": { - "type": "PointerEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onProgress": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onProgressCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onRateChange": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onRateChangeCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onReset": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onResetCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onResize": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onResizeCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onScroll": { - "type": "UIEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onScrollCapture": { - "type": "UIEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSeeked": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSeekedCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSeeking": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSeekingCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSelect": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSelectCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onStalled": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onStalledCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSubmit": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSubmitCapture": { - "type": "FormEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSuspend": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onSuspendCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTimeUpdate": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTimeUpdateCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchCancel": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchCancelCapture": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchEnd": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchEndCapture": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchMove": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchMoveCapture": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchStart": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTouchStartCapture": { - "type": "TouchEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTransitionEnd": { - "type": "TransitionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onTransitionEndCapture": { - "type": "TransitionEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onVolumeChange": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onVolumeChangeCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onWaiting": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onWaitingCapture": { - "type": "ReactEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onWheel": { - "type": "WheelEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "onWheelCapture": { - "type": "WheelEventHandler", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "placeholder": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "prefix": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "property": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "radioGroup": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "resource": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "results": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "role": { - "type": "AriaRole", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "security": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "slot": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "spellCheck": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "suppressContentEditableWarning": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "suppressHydrationWarning": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "tabIndex": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "title": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "translate": { - "type": "\"yes\" | \"no\"", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "typeof": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "unselectable": { - "type": "\"on\" | \"off\"", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "vocab": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - } - }, - "ChatComposerAttachmentCard": { - "about": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "accessKey": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "aria-activedescendant": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." - }, - "aria-atomic": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." - }, - "aria-autocomplete": { - "type": "\"list\" | \"none\" | \"inline\" | \"both\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." - }, - "aria-busy": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." - }, - "aria-checked": { - "type": "boolean | \"true\" | \"false\" | \"mixed\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." - }, - "aria-colcount": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the total number of columns in a table, grid, or treegrid." - }, - "aria-colindex": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." - }, - "aria-colspan": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." - }, - "aria-controls": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." - }, - "aria-current": { - "type": "| boolean\n | \"true\"\n | \"false\"\n | \"step\"\n | \"page\"\n | \"location\"\n | \"date\"\n | \"time\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the element that represents the current item within a container or set of related elements." - }, - "aria-describedby": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element (or elements) that describes the object." - }, - "aria-details": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element that provides a detailed, extended description for the object." - }, - "aria-disabled": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." - }, - "aria-dropeffect": { - "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates what functions can be performed when a dragged object is released on the drop target." - }, - "aria-errormessage": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element that provides an error message for the object." - }, - "aria-expanded": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." - }, - "aria-flowto": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." - }, - "aria-grabbed": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." - }, - "aria-haspopup": { - "type": "| boolean\n | \"true\"\n | \"false\"\n | \"dialog\"\n | \"grid\"\n | \"listbox\"\n | \"menu\"\n | \"tree\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." - }, - "aria-hidden": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether the element is exposed to an accessibility API." - }, - "aria-invalid": { - "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the entered value does not conform to the format expected by the application." - }, - "aria-keyshortcuts": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." - }, - "aria-label": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines a string value that labels the current element." - }, - "aria-labelledby": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies the element (or elements) that labels the current element." - }, - "aria-level": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the hierarchical level of an element within a structure." - }, - "aria-live": { - "type": "\"off\" | \"assertive\" | \"polite\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." - }, - "aria-modal": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether an element is modal when displayed." - }, - "aria-multiline": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether a text box accepts multiple lines of input or only a single line." - }, - "aria-multiselectable": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that the user may select more than one item from the current selectable descendants." - }, - "aria-orientation": { - "type": "\"horizontal\" | \"vertical\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." - }, - "aria-owns": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." - }, - "aria-placeholder": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." - }, - "aria-posinset": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." - }, - "aria-pressed": { - "type": "boolean | \"true\" | \"false\" | \"mixed\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the current \"pressed\" state of toggle buttons." - }, - "aria-readonly": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that the element is not editable, but is otherwise operable." - }, - "aria-relevant": { - "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." - }, - "aria-required": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates that user input is required on the element before a form may be submitted." - }, - "aria-roledescription": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines a human-readable, author-localized description for the role of an element." - }, - "aria-rowcount": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the total number of rows in a table, grid, or treegrid." - }, - "aria-rowindex": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." - }, - "aria-rowspan": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." - }, - "aria-selected": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates the current \"selected\" state of various widgets." - }, - "aria-setsize": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." - }, - "aria-sort": { - "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Indicates if items in a table or grid are sorted in ascending or descending order." - }, - "aria-valuemax": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the maximum allowed value for a range widget." - }, - "aria-valuemin": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the minimum allowed value for a range widget." - }, - "aria-valuenow": { - "type": "number", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the current value for a range widget." - }, - "aria-valuetext": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true, - "description": "Defines the human readable text alternative of aria-valuenow for a range widget." - }, - "autoCapitalize": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "autoCorrect": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "autoSave": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "contentEditable": { - "type": "Booleanish | \"inherit\"", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "contextMenu": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "dangerouslySetInnerHTML": { - "type": "{ __html: string }", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "datatype": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "defaultChecked": { - "type": "boolean", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "defaultValue": { - "type": "string | number | readonly string[]", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "dir": { - "type": "string", - "defaultValue": null, - "required": false, - "externalProp": true - }, - "draggable": { - "type": "Booleanish", - "defaultValue": null, - "required": false, - "externalProp": true - }, "element": { "type": "string", "defaultValue": "CHAT_COMPOSER_ATTACHMENT_CARD", From c975bc66489f158d7cb6cd840f2b6caa18cfbaae Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 10 Jul 2024 09:20:58 -0500 Subject: [PATCH 57/76] chore(chat-composer): rename editorRef in stories --- .../ai-chat-log/stories/composer.stories.tsx | 6 +++--- .../chat-composer/stories/logs.stories.tsx | 12 ++++++------ 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index 1daf198a31..12b15ddb3e 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -205,7 +205,7 @@ export const AIChatLogComposer = (): React.ReactNode => { push(createNewMessage(message)); }; - const editorRef = React.useRef(null); + const editorInstanceRef = React.useRef(null); return ( @@ -224,7 +224,7 @@ export const AIChatLogComposer = (): React.ReactNode => { ariaLabel="Message" placeholder="Type here..." onChange={handleComposerChange} - editorInstanceRef={editorRef} + editorInstanceRef={editorInstanceRef} > @@ -238,7 +238,7 @@ export const AIChatLogComposer = (): React.ReactNode => { size="reset" onClick={() => { submitMessage(); - editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + editorInstanceRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); }} > diff --git a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx index aad38c9b1b..30c13c006d 100644 --- a/packages/paste-core/components/chat-composer/stories/logs.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/logs.stories.tsx @@ -184,7 +184,7 @@ export const ChatLogStory: StoryFn = () => { push(createNewMessage(message)); }; - const editorRef = React.useRef(null); + const editorInstanceRef = React.useRef(null); return ( @@ -212,7 +212,7 @@ export const ChatLogStory: StoryFn = () => { ariaLabel="Message" placeholder="Type here..." onChange={handleComposerChange} - editorInstanceRef={editorRef} + editorInstanceRef={editorInstanceRef} > @@ -226,7 +226,7 @@ export const ChatLogStory: StoryFn = () => { size="reset" onClick={() => { submitMessage(); - editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + editorInstanceRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); }} > @@ -365,7 +365,7 @@ export const AIChatLogComposer = (): React.ReactNode => { push(createNewAIMessage(message)); }; - const editorRef = React.useRef(null); + const editorInstanceRef = React.useRef(null); return ( @@ -385,7 +385,7 @@ export const AIChatLogComposer = (): React.ReactNode => { ariaLabel="Message" placeholder="Type here..." onChange={handleComposerChange} - editorInstanceRef={editorRef} + editorInstanceRef={editorInstanceRef} > @@ -399,7 +399,7 @@ export const AIChatLogComposer = (): React.ReactNode => { size="reset" onClick={() => { submitMessage(); - editorRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); + editorInstanceRef.current?.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined); }} > From 97a1759e043155080bef68ea66d72a275516f645 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 10 Jul 2024 09:32:44 -0500 Subject: [PATCH 58/76] chore(chat-composer): change CSS grid so rowGap conditionally applied if attachemnt group present --- .../paste-core/components/chat-composer/src/ChatComposer.tsx | 2 +- .../components/chat-composer/src/ChatComposerActionGroup.tsx | 2 +- .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 2 +- .../components/chat-composer/src/ChatComposerContainer.tsx | 3 +-- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index b08db9eda8..331fec1ee9 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -176,7 +176,7 @@ export const ChatComposer = React.forwardRef( _disabled={getDisabledStyling()} fontSize={fontSize} lineHeight={lineHeight} - gridArea="composer" + gridArea="1/1" > diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx index d325ff26f0..202ff4b99e 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -19,7 +19,7 @@ export const ChatComposerActionGroup = React.forwardRef Date: Tue, 18 Jun 2024 11:07:05 -0500 Subject: [PATCH 59/76] chore(chat-composer): add fontSize and lineHeight to props --- .../paste-core/components/chat-composer/src/ChatComposer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index b08db9eda8..331fec1ee9 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -176,7 +176,7 @@ export const ChatComposer = React.forwardRef( _disabled={getDisabledStyling()} fontSize={fontSize} lineHeight={lineHeight} - gridArea="composer" + gridArea="1/1" > From 096614b4a016240b571eedf44624764ed869070e Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 12:31:54 -0500 Subject: [PATCH 60/76] feat(composer): wip base elements --- .../src/ChatComposerAttatchmentGroup.tsx | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx new file mode 100644 index 0000000000..957244364c --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx @@ -0,0 +1,32 @@ +import type { BoxProps } from "@twilio-paste/box"; +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +export interface ChatComposerAttatchmentGroupProps { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'CHAT_COMPOSER_ATTATCHMENT_GROUP' + * @type {BoxProps['element']} + * @memberof PageHeaderProps + */ + element?: BoxProps["element"]; +} + +export const ChatComposerAttatchmentGroup = React.forwardRef( + ({ element = "CHAT_COMPOSER_ATTATCHMENT_GROUP", children, ...props }, ref) => ( + + {children} + + ), +); + +ChatComposerAttatchmentGroup.displayName = "ChatComposerAttatchmentGroup"; From 6b270dba435407ffb782e69e57ab8fb8c9943782 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 15:28:35 -0500 Subject: [PATCH 61/76] feat(composer): addition of all attatchment components --- .../chat-composer/src/ChatComposer.tsx | 3 +- .../src/ChatComposerAttachment.tsx | 49 +++++++++++++++++++ .../src/ChatComposerAttatchmentGroup.tsx | 32 ------------ .../src/ChatComposerContainer.tsx | 1 + .../src/ToggleDisabledPlugin.tsx | 19 +++++++ 5 files changed, 71 insertions(+), 33 deletions(-) create mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx delete mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx create mode 100644 packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 331fec1ee9..082b2d6cf6 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -47,6 +47,7 @@ import { PlaceholderWrapper } from "./PlaceholderWrapper"; import { ToggleEditablePlugin } from "./ToggleEditablePlugin"; import { baseConfig, renderInitialText } from "./helpers"; import { chatComposerLexicalStyles } from "./styles"; +import { ThemeShape } from "@twilio-paste/theme"; export interface ChatComposerProps extends Omit { children?: LexicalComposerProps["children"]; @@ -133,7 +134,7 @@ export const ChatComposer = React.forwardRef( editorInstanceRef, ...props }, - ref, + ref ) => { const { setIsDisabled } = React.useContext(ChatComposerContext); diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx new file mode 100644 index 0000000000..5f75a602c0 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx @@ -0,0 +1,49 @@ +import type { BoxElementProps } from "@twilio-paste/box"; +import { Box } from "@twilio-paste/box"; +import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object"; +import { Stack } from "@twilio-paste/stack"; +import type { HTMLPasteProps } from "@twilio-paste/types"; +import * as React from "react"; + +export interface ChatComposerAttachmentProps extends HTMLPasteProps<"div"> { + children: NonNullable; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * + * @default "CHAT_COMPOSER_ATTACHMENT" + * @type {BoxProps["element"]} + * @memberof ChatComposerAttachmentProps + */ + element?: BoxElementProps["element"]; + /** + * Pass an icon to use for the attachment message. DownloadIcon recommended + * + * @default null + * @type {NonNullable} + * @memberof ChatComposerAttachmentProps + */ + attachmentIcon: NonNullable; +} + +const ChatComposerAttachment = React.forwardRef( + ({ children, element = "CHAT_COMPOSER_ATTACHMENT", attachmentIcon, ...props }, ref) => { + return ( + + + + {attachmentIcon} + + + + + {children} + + + + ); + }, +); + +ChatComposerAttachment.displayName = "ChatComposerAttachment"; + +export { ChatComposerAttachment }; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx deleted file mode 100644 index 957244364c..0000000000 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttatchmentGroup.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import type { BoxProps } from "@twilio-paste/box"; -import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; -import * as React from "react"; - -export interface ChatComposerAttatchmentGroupProps { - children?: React.ReactNode; - /** - * Overrides the default element name to apply unique styles with the Customization Provider - * @default 'CHAT_COMPOSER_ATTATCHMENT_GROUP' - * @type {BoxProps['element']} - * @memberof PageHeaderProps - */ - element?: BoxProps["element"]; -} - -export const ChatComposerAttatchmentGroup = React.forwardRef( - ({ element = "CHAT_COMPOSER_ATTATCHMENT_GROUP", children, ...props }, ref) => ( - - {children} - - ), -); - -ChatComposerAttatchmentGroup.displayName = "ChatComposerAttatchmentGroup"; diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index 9d935b2099..5503316ff4 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -1,5 +1,6 @@ import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import { ThemeShape } from "@twilio-paste/theme"; import * as React from "react"; import { ChatComposerContext } from "./ChatComposerContext"; diff --git a/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx new file mode 100644 index 0000000000..d996b3c118 --- /dev/null +++ b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx @@ -0,0 +1,19 @@ +import { useLexicalComposerContext } from "@twilio-paste/lexical-library"; +import * as React from "react"; +import { ChatComposerContext } from "./ChatComposerContext"; + +export const ToggleEditablePlugin: React.FC<{ disabled: boolean | undefined }> = ({ disabled }): null => { + const [editor] = useLexicalComposerContext(); + const { setIsDisabled } = React.useContext(ChatComposerContext); + + React.useEffect(() => { + if (disabled !== undefined) { + !!setIsDisabled && setIsDisabled(disabled); + editor.setEditable(!disabled); + } + }, [disabled]); + + return null; +}; + +ToggleEditablePlugin.displayName = "ToggleEditablePlugin"; From 15810130cd165872ed2c0391a277c8ea88b03463 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Thu, 20 Jun 2024 15:59:54 -0500 Subject: [PATCH 62/76] feat(composer): lint fix --- .../paste-core/components/chat-composer/src/ChatComposer.tsx | 2 +- .../components/chat-composer/src/ToggleDisabledPlugin.tsx | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 082b2d6cf6..608170689a 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -38,6 +38,7 @@ import type { OnChangeFunction, } from "@twilio-paste/lexical-library"; import { StylingGlobals } from "@twilio-paste/styling-library"; +import { ThemeShape } from "@twilio-paste/theme"; import merge from "deepmerge"; import * as React from "react"; @@ -47,7 +48,6 @@ import { PlaceholderWrapper } from "./PlaceholderWrapper"; import { ToggleEditablePlugin } from "./ToggleEditablePlugin"; import { baseConfig, renderInitialText } from "./helpers"; import { chatComposerLexicalStyles } from "./styles"; -import { ThemeShape } from "@twilio-paste/theme"; export interface ChatComposerProps extends Omit { children?: LexicalComposerProps["children"]; diff --git a/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx index d996b3c118..7fdaaafe81 100644 --- a/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx +++ b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx @@ -1,5 +1,6 @@ import { useLexicalComposerContext } from "@twilio-paste/lexical-library"; import * as React from "react"; + import { ChatComposerContext } from "./ChatComposerContext"; export const ToggleEditablePlugin: React.FC<{ disabled: boolean | undefined }> = ({ disabled }): null => { @@ -8,7 +9,9 @@ export const ToggleEditablePlugin: React.FC<{ disabled: boolean | undefined }> = React.useEffect(() => { if (disabled !== undefined) { - !!setIsDisabled && setIsDisabled(disabled); + if (setIsDisabled !== undefined) { + setIsDisabled(disabled); + } editor.setEditable(!disabled); } }, [disabled]); From 51dbff40b85fff54632534b0a15e86b4b02dab33 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 21 Jun 2024 09:58:04 -0500 Subject: [PATCH 63/76] feat(composer): fix disabled styling --- .../paste-core/components/chat-composer/src/ChatComposer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index 608170689a..cbfa0a31b0 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -134,7 +134,7 @@ export const ChatComposer = React.forwardRef( editorInstanceRef, ...props }, - ref + ref, ) => { const { setIsDisabled } = React.useContext(ChatComposerContext); From d17b5088e8f759b4d6c936824bb57a0023264e6a Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 25 Jun 2024 13:40:56 -0500 Subject: [PATCH 64/76] feat(composer): responsive columns and JS doc --- .../stories/container.stories.tsx | 56 +++++++++++++++++++ 1 file changed, 56 insertions(+) diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 399dbb7a46..dc75854fae 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -156,6 +156,62 @@ export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { ResponsiveContainedVariantWithAttachments.storyName = "Responsive Contained Variant with Attachments"; +export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { + return ( + + + + + + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + {}}> + }> + Document-FINAL.doc + 123 MB + + + + + ); +}; + +ResponsiveContainedVariantWithAttatchments.storyName = "Responsive Contained Variant with Attatchments"; + export const ContainedDisabledVariant: StoryFn = () => { const [isDisabled, setIsDisabled] = React.useState(true); return ( From e305b2d01f27d5d4e62672a2ac0e5b55ea5e0323 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 28 Jun 2024 12:58:02 -0500 Subject: [PATCH 65/76] feat(composer): add new plugin to access state --- .../components/ai-chat-log/stories/composer.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index 12b15ddb3e..5f39e24205 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -20,6 +20,7 @@ import { } from "@twilio-paste/lexical-library"; import * as React from "react"; +import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { AIChatLog, AIChatLogger, From 9fa1d7faab48cb5ae0c744366ddfad2b9c62b184 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Fri, 28 Jun 2024 13:05:43 -0500 Subject: [PATCH 66/76] feat(composer): fix lint issues --- .../components/ai-chat-log/stories/composer.stories.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx index 5f39e24205..12b15ddb3e 100644 --- a/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx +++ b/packages/paste-core/components/ai-chat-log/stories/composer.stories.tsx @@ -20,7 +20,6 @@ import { } from "@twilio-paste/lexical-library"; import * as React from "react"; -import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon"; import { AIChatLog, AIChatLogger, From f6dc5a1649925e5c523f7fcc1af9656a6cb79e6f Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 1 Jul 2024 09:19:29 -0500 Subject: [PATCH 67/76] chore(chat-composer): fix spellings --- .../components/chat-composer/stories/container.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index dc75854fae..79ed873f5e 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -156,7 +156,7 @@ export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { ResponsiveContainedVariantWithAttachments.storyName = "Responsive Contained Variant with Attachments"; -export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { +export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { return ( @@ -210,7 +210,7 @@ export const ResponsiveContainedVariantWithAttatchments: StoryFn = () => { ); }; -ResponsiveContainedVariantWithAttatchments.storyName = "Responsive Contained Variant with Attatchments"; +ResponsiveContainedVariantWithAttachments.storyName = "Responsive Contained Variant with Attachments"; export const ContainedDisabledVariant: StoryFn = () => { const [isDisabled, setIsDisabled] = React.useState(true); From 4769daee34ca21568ab6bbffec0c1f614e1db4f5 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 1 Jul 2024 09:25:08 -0500 Subject: [PATCH 68/76] chore(chat-composer): styling updates from PR comments --- .../components/chat-composer/src/ChatComposerContainer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx index 5503316ff4..9d935b2099 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerContainer.tsx @@ -1,6 +1,5 @@ import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; -import { ThemeShape } from "@twilio-paste/theme"; import * as React from "react"; import { ChatComposerContext } from "./ChatComposerContext"; From fe959e36f64ecb4f9eefc1db2644253ef11d6292 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Mon, 8 Jul 2024 14:24:14 -0500 Subject: [PATCH 69/76] chore(chat-composer): chnage stlying types --- .../paste-core/components/chat-composer/src/ChatComposer.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx index cbfa0a31b0..331fec1ee9 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposer.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposer.tsx @@ -38,7 +38,6 @@ import type { OnChangeFunction, } from "@twilio-paste/lexical-library"; import { StylingGlobals } from "@twilio-paste/styling-library"; -import { ThemeShape } from "@twilio-paste/theme"; import merge from "deepmerge"; import * as React from "react"; From 4d8cde592c834da2daa93e27fe7376a7c0afa56e Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Tue, 9 Jul 2024 15:58:25 -0500 Subject: [PATCH 70/76] chore(chat-composer): pr cleanup --- .../src/ToggleDisabledPlugin.tsx | 22 ------------------- 1 file changed, 22 deletions(-) delete mode 100644 packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx diff --git a/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx b/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx deleted file mode 100644 index 7fdaaafe81..0000000000 --- a/packages/paste-core/components/chat-composer/src/ToggleDisabledPlugin.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { useLexicalComposerContext } from "@twilio-paste/lexical-library"; -import * as React from "react"; - -import { ChatComposerContext } from "./ChatComposerContext"; - -export const ToggleEditablePlugin: React.FC<{ disabled: boolean | undefined }> = ({ disabled }): null => { - const [editor] = useLexicalComposerContext(); - const { setIsDisabled } = React.useContext(ChatComposerContext); - - React.useEffect(() => { - if (disabled !== undefined) { - if (setIsDisabled !== undefined) { - setIsDisabled(disabled); - } - editor.setEditable(!disabled); - } - }, [disabled]); - - return null; -}; - -ToggleEditablePlugin.displayName = "ToggleEditablePlugin"; From 330e6441c4fce52fdbb2e1644f34c235631731a1 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 10 Jul 2024 09:06:03 -0500 Subject: [PATCH 71/76] chore(chat-composer): refactor ChatCompaserAttachment --- .../src/ChatComposerAttachment.tsx | 49 ------------------- .../stories/container.stories.tsx | 40 ++++++--------- 2 files changed, 15 insertions(+), 74 deletions(-) delete mode 100644 packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx deleted file mode 100644 index 5f75a602c0..0000000000 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachment.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import type { BoxElementProps } from "@twilio-paste/box"; -import { Box } from "@twilio-paste/box"; -import { MediaBody, MediaFigure, MediaObject } from "@twilio-paste/media-object"; -import { Stack } from "@twilio-paste/stack"; -import type { HTMLPasteProps } from "@twilio-paste/types"; -import * as React from "react"; - -export interface ChatComposerAttachmentProps extends HTMLPasteProps<"div"> { - children: NonNullable; - /** - * Overrides the default element name to apply unique styles with the Customization Provider - * - * @default "CHAT_COMPOSER_ATTACHMENT" - * @type {BoxProps["element"]} - * @memberof ChatComposerAttachmentProps - */ - element?: BoxElementProps["element"]; - /** - * Pass an icon to use for the attachment message. DownloadIcon recommended - * - * @default null - * @type {NonNullable} - * @memberof ChatComposerAttachmentProps - */ - attachmentIcon: NonNullable; -} - -const ChatComposerAttachment = React.forwardRef( - ({ children, element = "CHAT_COMPOSER_ATTACHMENT", attachmentIcon, ...props }, ref) => { - return ( - - - - {attachmentIcon} - - - - - {children} - - - - ); - }, -); - -ChatComposerAttachment.displayName = "ChatComposerAttachment"; - -export { ChatComposerAttachment }; diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 79ed873f5e..7c133e8035 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -175,35 +175,25 @@ export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB - {}}> - }> - Document-FINAL.doc - 123 MB - + {}} attachmentIcon={}> + Document-FINAL.doc + 123 MB From d03b03898b7c32487aabbae9dc9977a15836a5e2 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 10 Jul 2024 09:32:44 -0500 Subject: [PATCH 72/76] chore(chat-composer): change CSS grid so rowGap conditionally applied if attachemnt group present --- .../components/chat-composer/src/ChatComposerActionGroup.tsx | 2 +- .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 2 +- .../components/chat-composer/src/ChatComposerContainer.tsx | 3 +-- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx index d325ff26f0..202ff4b99e 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerActionGroup.tsx @@ -19,7 +19,7 @@ export const ChatComposerActionGroup = React.forwardRef Date: Wed, 10 Jul 2024 13:04:22 -0500 Subject: [PATCH 73/76] chore(chat-composer): changeset update --- .changeset/nasty-beans-fetch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nasty-beans-fetch.md b/.changeset/nasty-beans-fetch.md index 40016d5a6c..bdd0e84d04 100644 --- a/.changeset/nasty-beans-fetch.md +++ b/.changeset/nasty-beans-fetch.md @@ -1,6 +1,6 @@ --- "@twilio-paste/lexical-library": patch -"@twilio-paste/core": patch +"@twilio-paste/core": minor --- [Lexical] added export for EditorRefPlugin From 8acef8f879696c8d9d5939bf7a5baed3f2aee355 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 10 Jul 2024 13:41:40 -0500 Subject: [PATCH 74/76] chore(chat-composer): codemods& lint --- .../paste-codemods/tools/.cache/mappings.json | 1 - .../stories/container.stories.tsx | 46 ------------------- 2 files changed, 47 deletions(-) diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index 26c73102ef..71f732680f 100644 --- a/packages/paste-codemods/tools/.cache/mappings.json +++ b/packages/paste-codemods/tools/.cache/mappings.json @@ -47,7 +47,6 @@ "Card": "@twilio-paste/core/card", "ChatComposer": "@twilio-paste/core/chat-composer", "ChatComposerActionGroup": "@twilio-paste/core/chat-composer", - "ChatComposerAttachment": "@twilio-paste/core/chat-composer", "ChatComposerAttachmentCard": "@twilio-paste/core/chat-composer", "ChatComposerAttachmentDescription": "@twilio-paste/core/chat-composer", "ChatComposerAttachmentGroup": "@twilio-paste/core/chat-composer", diff --git a/packages/paste-core/components/chat-composer/stories/container.stories.tsx b/packages/paste-core/components/chat-composer/stories/container.stories.tsx index 7c133e8035..399dbb7a46 100644 --- a/packages/paste-core/components/chat-composer/stories/container.stories.tsx +++ b/packages/paste-core/components/chat-composer/stories/container.stories.tsx @@ -156,52 +156,6 @@ export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { ResponsiveContainedVariantWithAttachments.storyName = "Responsive Contained Variant with Attachments"; -export const ResponsiveContainedVariantWithAttachments: StoryFn = () => { - return ( - - - - - - - - {}}> - }> - Document-FINAL.doc - 123 MB - - - {}} attachmentIcon={}> - Document-FINAL.doc - 123 MB - - {}} attachmentIcon={}> - Document-FINAL.doc - 123 MB - - {}} attachmentIcon={}> - Document-FINAL.doc - 123 MB - - {}} attachmentIcon={}> - Document-FINAL.doc - 123 MB - - {}} attachmentIcon={}> - Document-FINAL.doc - 123 MB - - - - ); -}; - -ResponsiveContainedVariantWithAttachments.storyName = "Responsive Contained Variant with Attachments"; - export const ContainedDisabledVariant: StoryFn = () => { const [isDisabled, setIsDisabled] = React.useState(true); return ( From a1a20ab3d08e37519018088925b837b4952e3576 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 10 Jul 2024 14:04:09 -0500 Subject: [PATCH 75/76] chore(lexical): changeset --- .changeset/nasty-beans-fetch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/nasty-beans-fetch.md b/.changeset/nasty-beans-fetch.md index bdd0e84d04..7127e5900c 100644 --- a/.changeset/nasty-beans-fetch.md +++ b/.changeset/nasty-beans-fetch.md @@ -1,5 +1,5 @@ --- -"@twilio-paste/lexical-library": patch +"@twilio-paste/lexical-library": minor "@twilio-paste/core": minor --- From e5c74fe37b4844a582387ebba834a549004dfbe5 Mon Sep 17 00:00:00 2001 From: Kristian Antrobus Date: Wed, 10 Jul 2024 15:59:17 -0500 Subject: [PATCH 76/76] chore(chat-composer): flex attachments group to full width --- .../chat-composer/src/ChatComposerAttachmentGroup.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx index f9d109778f..a66114777b 100644 --- a/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx +++ b/packages/paste-core/components/chat-composer/src/ChatComposerAttachmentGroup.tsx @@ -34,7 +34,7 @@ export const ChatComposerAttachmentGroup = React.forwardRef