Skip to content

Commit 4582088

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 12-13-2024 4:30:17 PM
1 parent fd25b69 commit 4582088

File tree

530 files changed

+65432
-279
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

530 files changed

+65432
-279
lines changed

‎ej2-react-toc.html

Lines changed: 32 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -422,7 +422,7 @@
422422
<li><a href="/ej2-react/carousel/styles-and-appearance">Styles and Appearances</a></li>
423423
<li>How To
424424
<ul>
425-
<li><a href="/ej2-react/carousel/how-to/load-images-in-webp-format.md">Load images in webp format</a></li>
425+
<li><a href="/ej2-react/carousel/how-to/load-images-in-webp-format">Load images in webp format</a></li>
426426
</ul>
427427
</li>
428428
</ul>
@@ -526,6 +526,24 @@
526526
</li>
527527
<li><a href="https://ej2.syncfusion.com/react/documentation/api/chart/">API Reference</a></li>
528528
</ul>
529+
</li><li>
530+
Chat UI
531+
<ul>
532+
<li><a href="/ej2-react/chat-ui/getting-started">Getting Started</a></li>
533+
<li><a href="/ej2-react/chat-ui/messages">Messages</a></li>
534+
<li><a href="/ej2-react/chat-ui/timebreaks">Time break</a></li>
535+
<li><a href="/ej2-react/chat-ui/timestamp">Timestamp</a></li>
536+
<li><a href="/ej2-react/chat-ui/typing-indicator">Typing indicator</a></li>
537+
<li><a href="/ej2-react/chat-ui/load-on-demand">Load on-demand</a></li>
538+
<li><a href="/ej2-react/chat-ui/header">Header</a></li>
539+
<li><a href="/ej2-react/chat-ui/footer">Footer</a></li>
540+
<li><a href="/ej2-react/chat-ui/templates">Templates</a></li>
541+
<li><a href="/ej2-react/chat-ui/appearance">Appearance</a></li>
542+
<li><a href="/ej2-react/chat-ui/globalization">Globalization</a></li>
543+
<li><a href="/ej2-react/chat-ui/accessibility">Accessibility</a></li>
544+
<li><a href="/ej2-react/chat-ui/methods">Methods</a></li>
545+
<li><a href="/ej2-react/chat-ui/events">Events</a></li>
546+
</ul>
529547
</li><li>
530548
Check box
531549
<ul>
@@ -639,7 +657,7 @@
639657
<ul>
640658
<li><a href="/ej2-react/context-menu/getting-started">Getting Started</a></li>
641659
<li><a href="/ej2-react/context-menu/icons-and-navigation">Icons and Navigation</a></li>
642-
<li><a href="/ej2-react/context-menu/template">Template</a></li>
660+
<li><a href="/ej2-react/context-menu/template-and-multilevel-nesting">Template and multilevel nesting</a></li>
643661
<li><a href="/ej2-react/context-menu/accessibility">Accessibility</a></li>
644662
<li><a href="/ej2-react/context-menu/style-and-appearance">Styles and Appearances</a></li>
645663
<li>How To
@@ -648,13 +666,14 @@
648666
<li><a href="/ej2-react/context-menu/how-to/render-with-separator">Render with Separator</a></li>
649667
<li><a href="/ej2-react/context-menu/how-to/open-and-close-contextmenu">Open and close ContextMenu</a></li>
650668
<li><a href="/ej2-react/context-menu/how-to/change-menu-items-dynamically">Change menu items dynamically</a></li>
651-
<li><a href="/ej2-react/context-menu/how-to/scrollable-contextmenu">Scrollable ContextMenu</a></li>
669+
<li><a href="/ej2-react/context-menu/how-to/overflow-scrollable-contextmenu">Overflow Scrollable ContextMenu</a></li>
652670
<li><a href="/ej2-react/context-menu/how-to/template">Template</a></li>
653671
<li><a href="/ej2-react/context-menu/how-to/underline-a-character-in-the-item-text">Underline a character in the item text</a></li>
654672
<li><a href="/ej2-react/context-menu/how-to/open-a-dialog-on-contextmenu-item-click">Open a dialog on ContextMenu item click</a></li>
655673
<li><a href="/ej2-react/context-menu/how-to/change-animation-settings">Change animation settings</a></li>
656674
<li><a href="/ej2-react/context-menu/how-to/add-or-remove-context-menu-items">Add or remove context menu items</a></li>
657675
<li><a href="/ej2-react/context-menu/how-to/enable-or-disable-context-menu-items">Enable or disable context menu items</a></li>
676+
<li><a href="/ej2-react/context-menu/how-to/scrollable-context-menu">Render Scrollable Context Menu</a></li>
658677
</ul>
659678
</li>
660679
</ul>
@@ -1063,6 +1082,8 @@
10631082
<li><a href="/ej2-react/drop-down-button/popup-items">Popup Items</a></li>
10641083
<li><a href="/ej2-react/drop-down-button/accessibility">Accessibility</a></li>
10651084
<li><a href="/ej2-react/drop-down-button/style-and-appearance">Styles and Appearances</a></li>
1085+
<li><a href="/ej2-react/drop-down-button/item-template">Item template</a></li>
1086+
<li><a href="/ej2-react/drop-down-button/animation">Animation</a></li>
10661087
<li>How To
10671088
<ul>
10681089
<li><a href="/ej2-react/drop-down-button/how-to/change-caret-icon">Change caret icon</a></li>
@@ -1075,6 +1096,7 @@
10751096
<li><a href="/ej2-react/drop-down-button/how-to/open-a-dialog-on-popup-item-click">Open a dialog on popup item click</a></li>
10761097
<li><a href="/ej2-react/drop-down-button/how-to/position-popup-open">Position popup open</a></li>
10771098
<li><a href="/ej2-react/drop-down-button/how-to/underline-a-character-in-the-item-text">Underline a character in the item text</a></li>
1099+
<li><a href="/ej2-react/drop-down-button/how-to/customize-popup-width">Customize popup width</a></li>
10781100
</ul>
10791101
</li>
10801102
<li><a href="https://ej2.syncfusion.com/react/documentation/api/drop-down-button/">API Reference</a></li>
@@ -1776,6 +1798,7 @@
17761798
<li><a href="/ej2-react/menu/how-to/right-to-left">Right to left</a></li>
17771799
<li><a href="/ej2-react/menu/how-to/set-title">Set title for Menu items</a></li>
17781800
<li><a href="/ej2-react/menu/how-to/menu-item-click">Open menu and sub menu on click only</a></li>
1801+
<li><a href="/ej2-react/menu/how-to/custom-attributes-menu-items">Set custom attributes for Menu items</a></li>
17791802
</ul>
17801803
</li>
17811804
<li><a href="/ej2-react/menu/ej1-api-migration">Migration from Essential JS 1</a></li>
@@ -1971,6 +1994,9 @@
19711994
<li><a href="/ej2-react/pdfviewer/how-to/export-as-image">Export As Image in React Pdfviewer component</a></li>
19721995
<li><a href="/ej2-react/pdfviewer/how-to/custom-fonts">Add custom fonts to the PDF Viewer using the PDF document</a></li>
19731996
<li><a href="/ej2-react/pdfviewer/how-to/add-save-button">Add a Save button in the built-in Toolbar</a></li>
1997+
<li><a href="/ej2-react/pdfviewer/how-to/configure-annotation-selector-setting">Configure annotationSelector setting</a></li>
1998+
<li><a href="/ej2-react/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds">Convert Pdf Library Bounds to Pdf viewer bounds</a></li>
1999+
<li><a href="/ej2-react/pdfviewer/how-to/show-custom-stamp-item">Display Custom stamp items in custom stamp</a></li>
19742000
</ul>
19752001
</li>
19762002
<li>Troubleshooting
@@ -2007,6 +2033,7 @@
20072033
<li><a href="/ej2-react/pivotview/olap">OLAP</a></li>
20082034
<li><a href="/ej2-react/pivotview/server-side-pivot-engine">Server-side Engine</a></li>
20092035
<li><a href="/ej2-react/pivotview/pivot-chart">Pivot Chart</a></li>
2036+
<li><a href="/ej2-react/pivotview/classic-layout">Classic Layout</a></li>
20102037
<li><a href="/ej2-react/pivotview/drill-down">Drill Down/Up</a></li>
20112038
<li>Data Shaping
20122039
<ul>
@@ -2628,6 +2655,7 @@ <h1>Summary of Predefined Dialogs component</h1>
26282655
<li><a href="/ej2-react/switch/how-to/set-disabled-state">Set disabled state</a></li>
26292656
<li><a href="/ej2-react/switch/how-to/submit-name-and-value-in-form">Submit name and value in form</a></li>
26302657
<li><a href="/ej2-react/switch/how-to/change-switch-state-using-toggle-method">Change switch state using toggle method</a></li>
2658+
<li><a href="/ej2-react/switch/how-to/prevent-state-change">Prevent State Change</a></li>
26312659
</ul>
26322660
</li>
26332661
<li><a href="https://ej2.syncfusion.com/react/documentation/api/switch/">API Reference</a></li>
@@ -2637,6 +2665,7 @@ <h1>Summary of Predefined Dialogs component</h1>
26372665
<ul>
26382666
<li><a href="/ej2-react/tab/getting-started">Getting Started</a></li>
26392667
<li><a href="/ej2-react/tab/adaptive">Responsive Modes</a></li>
2668+
<li><a href="/ej2-react/tab/content-render-modes">Content Render Modes</a></li>
26402669
<li><a href="/ej2-react/tab/header">Header</a></li>
26412670
<li><a href="/ej2-react/tab/localization">Localization</a></li>
26422671
<li><a href="/ej2-react/tab/orientation">Orientation</a></li>

‎ej2-react/ai-assistview/getting-started.md

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ domainurl: ##DomainURL##
1212

1313
This section explains how to create a simple **AI AssistView** component and configure its available functionalities in React.
1414

15+
To get started quickly with React AI AssistView component, you can check out this video:
16+
{% youtube "https://www.youtube.com/watch?v=rwXanLEHdFU" %}
17+
1518
## Dependencies
1619

1720
The list of dependencies required to use the `AI AssistView` component in your application is given as follows:

‎ej2-react/carousel/accessibility.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,9 @@ The Carousel component is designed by considering [WAI-ARIA](https://www.w3.org/
5454

5555
## Keyboard interaction
5656

57-
By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the WAI-ARIA practices. Once focused on the active Carousel element, you can use the following key combination for interacting with the Carousel.
57+
All Carousel actions can be controlled using keyboard keys through the [`allowKeyboardInteraction`](https://ej2.syncfusion.com/react/documentation/api/carousel/#allowkeyboardinteraction) property, which is enabled by default. If you wish to disable the default keyboard interactions, you can set this property to `false`. This is particularly useful if the carousel contains input elements, as pressing the arrow keys might cause the carousel to move unexpectedly. By disabling keyboard interaction, the carousel remains static, allowing the user to focus on the input fields without any interruptions.
58+
59+
This control implements keyboard navigation support by following WAI-ARIA practices. Once focused on the active Carousel element, you can use the following key combinations to interact with the Carousel.
5860

5961
| Key | Description |
6062
| ------------------ | --------------------------------------------------------------- |

‎ej2-react/chat-ui/accessibility.md

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
---
2+
layout: post
3+
title: Accessibility in React Chat UI component | Syncfusion
4+
description: Learn here all about Accessibility in Syncfusion React Chat UI component of Syncfusion Essential JS 2 and more.
5+
platform: ej2-react
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Accessibility in React Chat UI component
12+
13+
The Chat UI component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
14+
15+
The accessibility compliance for the Chat UI component is outlined below.
16+
17+
| Accessibility Criteria | Compatibility |
18+
| -- | -- |
19+
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
20+
| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
21+
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
22+
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
23+
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
24+
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
25+
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
26+
| [Accessibility Checker Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
27+
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
28+
29+
<style>
30+
.post .post-content img {
31+
display: inline-block;
32+
margin: 0.5em 0;
33+
}
34+
</style>
35+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
36+
37+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
38+
39+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
40+
41+
## WAI-ARIA attributes
42+
43+
The following ARIA attributes are used in the Chat UI component:
44+
45+
| Attributes | Purpose |
46+
| ------------ | ----------------------- |
47+
| `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. |
48+
| `role=toolbar` | Specifies that the element is a toolbar. |
49+
| `aria-label` | Defines a string value that labels an interactive element for accessibility. |
50+
| `aria-orientation` | Specifies the orientation of the toolbar. |
51+
| `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. |
52+
| `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. |
53+
54+
## Keyboard interaction
55+
56+
The following keyboard shortcuts are supported by the Chat UI component.
57+
58+
| **Press** | **To do this** |
59+
| --- | --- |
60+
| <kbd>Enter</kbd> | Select the focused item or send a message when the input is focused. |
61+
| <kbd>Tab</kbd> | Moves focus forward through the interactive elements. |
62+
| <kbd>Shift + Tab</kbd> | Moves focus backward through the interactive elements. |
63+
| <kbd>Page Up</kbd> | Scroll up through chat history. |
64+
| <kbd>Page Down</kbd> | Scroll down through chat history. |
65+
| <kbd>Ctrl + Home</kbd> | Scroll to the first message. |
66+
| <kbd>Ctrl + End</kbd> | Scroll to the most recent message. |
67+
<b>Chat UI Toolbars</b>||
68+
| <kbd>Left Arrow</kbd> | Focuses the previous toolbar element. |
69+
| <kbd>Right Arrow</kbd> | Focuses the next toolbar element. |
70+
| <kbd>Enter / Space</kbd> | Select the focused item or activate the selected option. |
71+
| <kbd>Home</kbd> | Moves focus to the first toolbar element. |
72+
| <kbd>End</kbd> | Moves focus to the last toolbar element. |
73+
74+
## Ensuring accessibility
75+
76+
The Chat UI component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
77+
78+
## See also
79+
80+
* [Accessibility in Syncfusion components](../common/accessibility)

‎ej2-react/chat-ui/appearance.md

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
layout: post
3+
title: Appearance in React Chat UI component | Syncfusion
4+
description: Checkout and learn about Appearance with React Chat UI component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-react
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Appearance in React Chat UI component
12+
13+
## Setting placeholder
14+
15+
You can use the `placeholder` property to display the placeholder text that appears in the message input field to guide users on what to type. The default is `Type your message…`.
16+
17+
{% tabs %}
18+
{% highlight js tabtitle="index.jsx" %}
19+
{% include code-snippet/chat-ui/appearance/placeholder/app/index.jsx %}
20+
{% endhighlight %}
21+
{% highlight ts tabtitle="index.tsx" %}
22+
{% include code-snippet/chat-ui/appearance/placeholder/app/index.tsx %}
23+
{% endhighlight %}
24+
{% endtabs %}
25+
26+
{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/placeholder" %}
27+
28+
## Setting width
29+
30+
You can use the `width` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
31+
32+
{% tabs %}
33+
{% highlight js tabtitle="index.jsx" %}
34+
{% include code-snippet/chat-ui/appearance/width/app/index.jsx %}
35+
{% endhighlight %}
36+
{% highlight ts tabtitle="index.tsx" %}
37+
{% include code-snippet/chat-ui/appearance/width/app/index.tsx %}
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/width" %}
42+
43+
## Setting height
44+
45+
You can use the `height` property to specify the dimensions of the Chat UI within the application layout. By default, the value is `100%`.
46+
47+
{% tabs %}
48+
{% highlight js tabtitle="index.jsx" %}
49+
{% include code-snippet/chat-ui/appearance/height/app/index.jsx %}
50+
{% endhighlight %}
51+
{% highlight ts tabtitle="index.tsx" %}
52+
{% include code-snippet/chat-ui/appearance/height/app/index.tsx %}
53+
{% endhighlight %}
54+
{% endtabs %}
55+
56+
{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/height" %}
57+
58+
## CSS Class
59+
60+
You can use the `cssClass` property to customize the appearance of the chat UI component.
61+
62+
{% tabs %}
63+
{% highlight js tabtitle="index.jsx" %}
64+
{% include code-snippet/chat-ui/appearance/cssClass/app/index.jsx %}
65+
{% endhighlight %}
66+
{% highlight ts tabtitle="index.tsx" %}
67+
{% include code-snippet/chat-ui/appearance/cssClass/app/index.tsx %}
68+
{% endhighlight %}
69+
{% highlight ts tabtitle="index.css" %}
70+
{% include code-snippet/chat-ui/appearance/cssClass/index.css %}
71+
{% endhighlight %}
72+
{% endtabs %}
73+
74+
{% previewsample "page.domainurl/code-snippet/chat-ui/appearance/cssClass" %}

‎ej2-react/chat-ui/events.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
layout: post
3+
title: Events in React Chat UI component | Syncfusion
4+
description: Checkout and learn about Events with React Chat UI component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-react
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Events in React Chat UI component
12+
13+
This section describes the Chat UI events that will be triggered when appropriate actions are performed. The following events are available in the Chat UI component.
14+
15+
## Created
16+
17+
The Chat UI component triggers the `created` event when the component rendering is completed.
18+
19+
{% tabs %}
20+
{% highlight js tabtitle="index.jsx" %}
21+
{% include code-snippet/chat-ui/events/created/app/index.jsx %}
22+
{% endhighlight %}
23+
{% highlight ts tabtitle="index.tsx" %}
24+
{% include code-snippet/chat-ui/events/created/app/index.tsx %}
25+
{% endhighlight %}
26+
{% endtabs %}
27+
28+
## Sending message
29+
30+
The `messageSend` event is triggered before sending a message in the Chat UI component.
31+
32+
{% tabs %}
33+
{% highlight js tabtitle="index.jsx" %}
34+
{% include code-snippet/chat-ui/events/messageSend/app/index.jsx %}
35+
{% endhighlight %}
36+
{% highlight ts tabtitle="index.tsx" %}
37+
{% include code-snippet/chat-ui/events/messageSend/app/index.tsx %}
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
## User typing
42+
43+
The `userTyping` event is triggered when the user is typing a message in the Chat UI component.
44+
45+
{% tabs %}
46+
{% highlight js tabtitle="index.jsx" %}
47+
{% include code-snippet/chat-ui/events/userTyping/app/index.jsx %}
48+
{% endhighlight %}
49+
{% highlight ts tabtitle="index.tsx" %}
50+
{% include code-snippet/chat-ui/events/userTyping/app/index.tsx %}
51+
{% endhighlight %}
52+
{% endtabs %}

‎ej2-react/chat-ui/footer.md

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
layout: post
3+
title: Footer in React Chat UI component | Syncfusion
4+
description: Checkout and learn about Footer with React Chat UI component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-react
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Footer in React Chat UI component
12+
13+
## Show or hide footer
14+
15+
You can use showFooter property to enable or disable the chat footer.
16+
17+
{% tabs %}
18+
{% highlight js tabtitle="index.jsx" %}
19+
{% include code-snippet/chat-ui/footer/app/index.jsx %}
20+
{% endhighlight %}
21+
{% highlight ts tabtitle="index.tsx" %}
22+
{% include code-snippet/chat-ui/footer/app/index.tsx %}
23+
{% endhighlight %}
24+
{% endtabs %}
25+
26+
{% previewsample "page.domainurl/code-snippet/chat-ui/footer" %}
27+
28+
## Footer template
29+
30+
> Refer to the [Templates](./templates#footer-template) section for more details about the Footer template.

0 commit comments

Comments
 (0)