[React] Adding all combo topics for React

doc/en/components/inputs/combo/features.md

@@ -43,8 +43,38 @@ You will also need to link an additional CSS file to apply the styling to the `S
 
 <!-- end: Blazor -->
 
+<!-- React -->
+
+```tsx
+import { IgrComboModule, IgrCombo, IgrSwitchModule, IgrSwitch  } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrComboModule.register();
+IgrSwitchModule.register();
+```
+
+<!-- end: React -->
+
 Then, we will add event handlers to all switch components so that we can control the combo features by toggling the switches:
 
+```tsx
+const comboRef = useRef<IgrCombo>(null);
+const switchCaseSensitiveRef = useRef<IgrSwitch>(null);
+
+const disableFiltering = (switchComponent: IgrSwitch) => {
+    comboRef.current.disableFiltering =
+    switchCaseSensitiveRef.current.disabled = switchComponent.checked;
+};
+
+const showCaseSencitiveIcon = (switchComponent: IgrSwitch) => {
+    comboRef.current.caseSensitiveIcon = switchComponent.checked;
+};
+
+const disableCombo = (switchComponent: IgrSwitch) => {
+    comboRef.current.disabled = switchComponent.checked;
+};
+```
+
 ```ts
 let combo = document.getElementById('combo') as IgcComboComponent<City>;
 
@@ -126,6 +156,12 @@ switchGroup.addEventListener("igcChange", () => {
 }
 ```
 
+```tsx
+const enableGrouping = (switchComponent: IgrSwitch) => {
+    comboRef.current.groupKey = switchComponent.checked ? "country" : undefined;
+};
+```
+
 ## Features
 
 ### Filtering
@@ -142,12 +178,17 @@ Filtering options can be further enhanced by enabling the search case sensitivit
 <IgbCombo DisableFiltering="true" CaseSensitiveIcon="true" />
 ```
 
+```tsx
+<IgrCombo disableFiltering="true" caseSensitiveIcon="true"></IgrCombo>
+```
+
 #### Filtering Options
 
 The {ProductName} `ComboBox` component exposes one more filtering property that allows passing configuration of both `FilterKey` and `CaseSensitive` options. The `FilterKey` indicates which data source field should be used for filtering the list of options. The `CaseSensitive` option indicates if the filtering should be case-sensitive or not.
 
 The following code snippet shows how to filter the cities from our data source by country instead of name. We are also making the filtering case-sensitive by default:
 
+<!-- WebComponents -->
 ```ts
 const options = {
     filterKey: 'country',
@@ -156,6 +197,18 @@ const options = {
 
 combo.filteringOptions = options;
 ```
+<!-- end: WebComponents -->
+
+<!-- React -->
+```tsx
+const options = {
+    filterKey: 'country',
+    caseSensitive: true
+};
+
+comboRef.current.filteringOptions = options;
+```
+<!-- end: React -->
 
 ### Grouping
 
@@ -169,6 +222,10 @@ Defining a `GroupKey` option will group the items, according to the provided key
 <IgbCombo GroupKey="region" />
 ```
 
+```tsx
+<IgrCombo groupKey="region" />
+```
+
 > [!Note]
 > The `GroupKey` property will only have effect if your data source consists of complex objects.
 
@@ -184,6 +241,10 @@ The ComboBox component also exposes an option for setting whether groups should
 <IgbCombo GroupSorting="desc" />
 ```
 
+```tsx
+<IgrCombo groupSorting="desc" />
+```
+
 ### Label
 
 The `Combo` label can be set easily using the `Label` property:
@@ -196,6 +257,10 @@ The `Combo` label can be set easily using the `Label` property:
 <IgbCombo Label="Cities" />
 ```
 
+```tsx
+<IgrCombo label="Cities" />
+```
+
 ### Placeholder
 
 A placeholder text can be specified for both the ComboBox component input and the search input placed inside the dropdown menu:
@@ -208,6 +273,10 @@ A placeholder text can be specified for both the ComboBox component input and th
 <IgbCombo Placeholder="Pick a city" PlaceholderSearch="Search for a city" />
 ```
 
+```tsx
+<IgrCombo placeholder="Pick a city" placeholderSearch="Search for a city" />
+```
+
 ### Autofocus
 
 If you want your ComboBox to be automatically focused on page load you can use the following code:
@@ -220,6 +289,10 @@ If you want your ComboBox to be automatically focused on page load you can use t
 <IgbCombo Autofocus="true" />
 ```
 
+```tsx
+<IgrCombo autofocus="true" />
+```
+
 ### Search Input Focus
 
 The ComboBox search input is focused by default. To disable this feature and move the focus to the list of options use the `AutofocusList` property as shown below:
@@ -232,6 +305,10 @@ The ComboBox search input is focused by default. To disable this feature and mov
 <IgbCombo AutofocusList="true" />
 ```
 
+```tsx
+<IgrCombo autofocusList="true" />
+```
+
 ### Required
 
 The ComboBox can be marked as required by setting the required property.
@@ -244,6 +321,10 @@ The ComboBox can be marked as required by setting the required property.
 <IgbCombo Required="true" />
 ```
 
+```tsx
+<IgrCombo required="true" />
+```
+
 ### Disable ComboBox
 
 You can disable the ComboBox using the `Disabled` property:
@@ -256,6 +337,10 @@ You can disable the ComboBox using the `Disabled` property:
 <IgbCombo Disabled="true" />
 ```
 
+```tsx
+<IgrCombo disabled="true" />
+```
+
 <!-- WebComponents -->
 ## API Reference
 

doc/en/components/inputs/combo/overview.md

@@ -58,6 +58,25 @@ You will also need to link an additional CSS file to apply the styling to the `C
 ```
 <!-- end: Blazor -->
 
+<!-- React -->
+
+First, you need to the install the corresponding {ProductName} npm package by running the following command:
+
+```cmd
+npm install igniteui-react
+```
+
+You will then need to import the {Platform} `ComboBox`, its necessary CSS, and register its module, like so:
+
+```tsx
+import { IgrComboModule, IgrCombo } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
+
+IgrComboModule.register();
+```
+
+<!-- end: React -->
+
 >[!WARNING]
 > The `Combo` component doesn't work with the standard `<form>` element. Use `Form` instead.
 
@@ -119,6 +138,26 @@ export class Sample {
 }
 ```
 
+```tsx
+interface City {
+  id: string;
+  name: string;
+}
+
+const cities: City[] = [
+  { name: "London", id: "UK01" },
+  { name: "Sofia", id: "BG01" },
+  { name: "New York", id: "NY01" },
+];
+
+<IgrCombo
+    valueKey="id"
+    displayKey="name"
+    data={cities}
+    value={["BG01"]}
+></IgrCombo>
+```
+
 ### Data value and display properties
 
 When the combo is bound to a list of complex data (i.e. objects), we need to specify a property that the control will use to handle item selection. The component exposes the following properties:
@@ -148,18 +187,30 @@ console.log(combo.value);
 combo.value = ['NY01', 'UK01'];
 ```
 
+```tsx
+const comboRef = useRef<IgrCombo>(null);
+
+// Given the overview example from above this will return ['BG01']
+console.log(comboRef.current.value);
+
+// Change the selected items to New York and London
+comboRef.current.value = ['NY01', 'UK01'];
+```
+
 ### Selection API
 
 The combo component exposes APIs that allow you to change the currently selected items.
 
 Besides selecting items from the list of options by user interaction, you can select items programmatically. This is done via the `select` and `deselect` methods. You can pass an array of items to both methods. If the methods are called with no arguments all items will be selected/deselected depending on which method is called. If you have specified a `ValueKey` for your combo component, then you should pass the value keys of the items you would like to select/deselect:
 
 #### Select/deselect some items:
+<!-- WebComponents -->
 ```ts
 // Select/deselect items by their IDs as valueKey is set to 'id'
 combo.select(['BG01', 'BG02', 'BG03', 'BG04']);
 combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']);
 ```
+<!-- end: WebComponents -->
 
 ```razor
 <IgbCombo
@@ -191,12 +242,22 @@ combo.deselect(['BG01', 'BG02', 'BG03', 'BG04']);
 }
 ```
 
+<!-- React -->
+```tsx
+// Select/deselect items by their IDs as valueKey is set to 'id'
+comboRef.current.select(["UK01", "UK02", "UK03", "UK04", "UK05"]);
+comboRef.current.deselect(["UK01", "UK02", "UK03", "UK04", "UK05"]);
+```
+<!-- end: React -->
+
 #### Select/deselect all items:
+<!-- WebComponents -->
 ```ts
 // Select/deselect all items
 combo.select();
 combo.deselect();
 ```
+<!-- end: WebComponents -->
 
 ```razor
 @code {
@@ -210,13 +271,31 @@ combo.deselect();
 }
 ```
 
+<!-- React -->
+```tsx
+// Select/deselect all items
+comboRef.current.select([]);
+comboRef.current.deselect([]);
+```
+<!-- end: React -->
+
 If the `ValueKey` property is omitted, you will have to list the items you wish to select/deselect as objects references:
 
+<!-- WebComponents -->
 ```ts
 // Select/deselect values by object references when no valueKey is provided
 combo.select([cities[1], cities[5]]);
 combo.deselect([cities[1], cities[5]]);
 ```
+<!-- end: WebComponents -->
+
+<!-- React -->
+```tsx
+// Select/deselect values by object references when no valueKey is provided
+comboRef.current.select([cities[1], cities[5]]);
+comboRef.current.deselect([cities[1], cities[5]]);
+```
+<!-- end: React -->
 
 `sample="/inputs/combo/selection", height="380", alt="{Platform} Combo Selection Example"`
 

doc/en/components/inputs/combo/single-selection.md

@@ -21,6 +21,10 @@ To enable single-selection and quick filtering, set the `SingleSelect` property
 <IgbCombo SingleSelect></IgbCombo>
 ```
 
+```tsx
+<IgrCombo singleSelect></IgrCombo>
+```
+
 `sample="/inputs/combo/simplified", height="400", alt="{Platform} Single Selection Combo Example"`
 
 <div class="divider--half"></div>
@@ -35,10 +39,12 @@ Here's how to select/deselect an item programmatically in a single selection com
 
 #### Selecting items:
 
+<!-- WebComponents -->
 ```ts
 // select the item matching the 'BG01' value of the value key field.
 combo.select('BG01');
 ```
+<!-- end: WebComponents -->
 
 ```razor
 <IgbCombo SingleSelect @ref="Combo"></IgbCombo>
@@ -50,14 +56,23 @@ combo.select('BG01');
 }
 ```
 
+<!-- React -->
+```tsx
+// select the item matching the 'BG01' value of the value key field.
+comboRef.current.select('BG01');
+```
+<!-- end: React -->
+
 To deselect an item without making a new selection, call the `deselect` method.
 
 #### Deselecting items:
 
+<!-- WebComponents -->
 ```ts
 // deselect the item matching the 'BG01' value of the value key field.
 combo.deselect('BG01');
 ```
+<!-- end: WebComponents -->
 
 ```razor
 <IgbCombo SingleSelect @ref="Combo"></IgbCombo>
@@ -69,6 +84,13 @@ combo.deselect('BG01');
 }
 ```
 
+<!-- React -->
+```tsx
+// deselect the item matching the 'BG01' value of the value key field.
+comboRef.current.deselect('BG01');
+```
+<!-- end: React -->
+
 ## Disabled features
 
 Naturally, some configuration options will have no effect in a single selection ComboBox.