> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/new-releases/2.0.1-sds-react-component-is-here.md).

# 2.0.1 SDS React Component Is Here!!!!

{% hint style="warning" %}
These notes are taking as reference the last stable version **1.51.4** to list the new changes and required refactors.
{% endhint %}

## :warning: NEWS

1.:red\_circle:<mark style="color:purple;">**`Checkbox`**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**Component styles corrected**</mark><mark style="color:purple;">:</mark> Previously, because of the internal structure of the `Checkbox` component, there were some styles' problems at the moment of centering the indeterminate icon inside the input checkbox itself. So to solve that, the `Checkbox` structure was refactored together its styles to offer a more consistent experience.<br>

2\.  <mark style="color:purple;">**New**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**`CheckboxRaw`**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**and**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**`RadioRaw`**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**components**</mark><mark style="color:purple;">:</mark> This integration of new components was done to facilitate developers experience at the moment of creating custom components and needing to use only the checkbox or radio inputs. Internally, what it does is removing the div container that surrounds the standard sds `Checkbox` and `Radio` components, and leaving expose the input itself, so developers can use it as reference at the moment of creating styles like the following.

```css
.sds_CheckboxRaw_Input:checked + .box {
	background: var(--sds_theme_color_primary_tint_1);
	border: 1px solid var(--sds_theme_color_primary);
}
```

3\.  :orange\_circle: <mark style="color:purple;">**AppMenu now is called AppNavbar**</mark><mark style="color:purple;">:</mark> To have a better coherence between the Design Kits and the components naming convention, the `AppMenu` commland components was renamed, besides getting some new CSS styles improvements.<br>

**4. &#x20;**<mark style="color:purple;">**Optimized code**</mark><mark style="color:purple;">:</mark> For `sds-react-components` internal usage, there were created two new custom hooks: `useUpdate` and `useMenu`. These new hooks have allowed to refactor most of the components on sds, having a less code, cleaner structure and a more optimized and controlled interactions with internal states.<br>

~~5.  <mark style="color:purple;">**React Portals**</mark><mark style="color:purple;">:</mark> This is a `React` feature that allows us to separate from the main `react` root `div` certain elements to create a floating effect easily and without any `z-index` style limitation. Some components that have been benefited from this feature are: `MiniWizard`, `Alert`, `Modal` and `Tooltip` components.~~

{% hint style="danger" %}
React portals was removed in version 2.0.2 because it was generating an undesirebled global re-renders at interacting with certain components.
{% endhint %}

6\.  :orange\_circle: <mark style="color:purple;">**Removing Extra Props**</mark>: Because we're using a *compound components* patter to create most of the `sds` React components, there is the need in some scenarios to identify correctly the component that's been inserted inside a parent component to locate correctly the information. Previously, to identify correctly these components it was used some extra props in certain component, but thanks to Guillermo this practice is no longer needed, so all these extra props have been removed from the following components: `MiniWizard`, `Wizard`, `WizardStepActions`, `WizardStepContent`, `WizardStepReview`, `AppPage`, `AppPageActions`, `AppPageContent` and `AppPageNav`<br>

7\.  <mark style="color:purple;">**`DualList`**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**Component**</mark><mark style="color:purple;">:</mark> New component joins the battle. Look for the example [here](https://github.com/2600hz/sds-react-components-examples/tree/main/GeneralComponents/DualList).<br>

8\.  :orange\_circle: <mark style="color:purple;">**`Menu`**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**Component Improvements**</mark><mark style="color:purple;">:</mark> Now the `Menu` components has two new features: *checkSelectedItems* and *removeSelectedItem*. You can check them on [here on storybook](https://sipster-react-component-storybook.netlify.app/?path=/story/general-components-menu--basic-menu).<br>

9\.  :orange\_circle: <mark style="color:purple;">**`Dropdown`**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**Component Improvements**</mark><mark style="color:purple;">:</mark> beside having a complete internal restructure, Dropdowns now also have a new prop called *showVisual*, that's going to allow to display on the dropdown input box the `Avatar` or `Icon` elements next to the selection, giving a more complete visual feedback. This is an optional feature that has to be consulted with Josh before implementing it on mockups. Also, *checkSelectedItems* and *removeSelectedItem* features now available (Just like in the `Menu` component)<br>

10\.  <mark style="color:purple;">**`Avatar`**</mark><mark style="color:purple;">**&#x20;**</mark><mark style="color:purple;">**Component Refactored**</mark><mark style="color:purple;">:</mark> There were some problems at the moment of re-rendering children elements in real-time, but that is now completely solved.<br>

11\. <mark style="color:purple;">**New Release Workflow**</mark><mark style="color:purple;">:</mark> To keep a better order at the moment of adding new features and patches, SDS is going to be delivering monthly official releases with all the new features and changes. Anyway the last minute support for a specific component or bugs, is always going to be available, but this patches only are going to be displayed if they are considered small and don't affect others components. If that's not the case, these new features/refactors are going to be released by the end of the month or for the next Sprint.

> :orange\_circle: Means that it might require a small refactor, renaming the component props or just removing them.

> :red\_circle:  Means that there have been some css styles changes that could generate conflicts with older versions of `sds-react-components`