#  ReactControls (version: 0.2.158)
## Main Changes
- UpSelect : fix disable click on label if the component is disabled o readOnly

#  ReactControls (version: 0.2.157)
## Main Changes
- UpDataGrid : fix delay tooltip
- Improve responsivity


#  ReactControls (version: 0.2.156)
## Main Changes
- UpDate and UpSelect fix sizing
- UpSelect : Make the label not clickable if readOnly is true
- UpInput : Enable to pass a className
- Improve responsivity of UpDataGrid and UpMenu
- UpDataGrid : Fix arrow order
- UpNumber : Enable to define the decimal separator

#  ReactControls (version: 0.2.155)
## Main Changes
- Update cookies consent manager

#  ReactControls (version: 0.2.151)
## Bugs Fixes
- UpTooltip : fix re-render
- UpInput : fix clear action

#  ReactControls (version: 0.2.148)
## Main Changes
- UpCurrency : update behaviour adding animation and style props

  #  ReactControls (version: 0.2.147)
## Bug Fixes
- UpDate : Fix uncontrolled value

#  ReactControls (version: 0.2.145)
## Main Changes
- UpSvgIcon : Add profile3 | group2 | padlock icons

#  ReactControls (version: 0.2.140)
## Main Changes
- UpSvgIcon : Add nfc icon

#  ReactControls (version: 0.2.137)
## Bug Fixes
- UpSelect : Remove the transparent background when hovering selected option, to prevent a text below from appearing

#  ReactControls (version: 0.2.136)
## Main Changes
- Add new component UpCookiesConsent
## Bug Fixes
- UpDataGrid : Fix auto-hide menu af action if none checkbox selected

#  ReactControls (version: 0.2.135)
## Main Changes
  - UpSvgIcon : Add new illustrations :
  "search-glass",
  "card-orange-add",
  "card-orange-trans"

  - UpSvgIcon : Add new mentors :
   "sorry-orange"

#  ReactControls (version: 0.2.134)
## Main Changes
  - UpDataPanel : Add props to define custom class on column
#  ReactControls (version: 0.2.133)
## Bug Fixes
  - UpDataGrid : Fix selected row after fetching data
#  ReactControls (version: 0.2.132)
## Main Changes
  - UpModal : Fix testable component props

#  ReactControls (version: 0.2.131)
## Main Changes
  - UpSvgIcon : Add warning icon

#  ReactControls (version: 0.2.130)

## Main Changes
  - UpDataGrid : Change status of select all in case only one row can be selected


#  ReactControls (version: 0.2.129)
## Main Changes
  - UpDataGrid : Change the behaviour for the mode only one row selectable
  - Storybook : Upgrade to 6.1.17 
#  ReactControls (version: 0.2.127)

## Bug Fixes
  - UpSelect : Fix No text message

#  ReactControls (version: 0.2.126)

## Main Changes
  - UpText : Add max xharacters handling.

#  ReactControls (version: 0.2.125)

## Bug Fixes
  - UpMenu : onClick on sub menu items

#  ReactControls (version: 0.2.124)

## Bug Fixes
  - UpMenu : onClick throws error if no children

#  ReactControls (version: 0.2.123)

## Bug Fixes
  - UpToast : Fix IntentType import

#  ReactControls (version: 0.2.122)

## Main Changes
  - UpNavTab : Reduce selected item sizing

#  ReactControls (version: 0.2.121)

## Bug Fixes
  - UpSelect : Fix returnType id in multiple case

#  ReactControls (version: 0.2.120)

## Bug Fixes
- UpVerticalTimeLine : Fix checkmark alignment 

#  ReactControls (version: 0.2.119)

## Bug Fixes
- UpDate : Fix height

#  ReactControls (version: 0.2.118)
## Main Changes
- UpDataGrid : allow to select only one row

#  ReactControls (version: 0.2.116)

## Bug Fixes
- UpDataGrid : Fix row clickable

#  ReactControls (version: 0.2.113)

## Main Changes
- UpEntityView : Add new component for displaying data 
- UpVerticalTimeLine : Add new component for displaying vertical timeline 

#  ReactControls (version: 0.2.112)

## Main Changes
- UpDataGrid : Allow select text even if row clickable

#  ReactControls (version: 0.2.111)

## Main Changes
- UpMenu : display menu if minified and have children

#  ReactControls (version: 0.2.110)

## Main Changes
- UpDataGrid : onSelection change now return also all selected data

#  ReactControls (version: 0.2.109)

## Bug Fixes
- UpDataGrid : Fix enabling group action

#  ReactControls (version: 0.2.108)

## Main Changes
- UpDataGrid : Fix UpRow enable full width layout

#  ReactControls (version: 0.2.107)

## Bug Fixes
- UpDataGrid : Fix selected data on group action

#  ReactControls (version: 0.2.106)

## Main Changes
- UpDate : add more denied characters
## Bug Fixes
- UpDropFile : Fix reset error notification on change

#  ReactControls (version: 0.2.105)

## Bug Fixes
- UpDropFile : Reset error notification on change

#  ReactControls (version: 0.2.104)

## Main Changes
- UpDate : only allow valid characters

#  ReactControls (version: 0.2.103)

## Bug Fixes
- SvgIcon : add icons eye-open2 file3 and invoice

#  ReactControls (version: 0.2.102)

## Bug Fixes
- UpDataGrid : Fix Select all through pages

#  ReactControls (version: 0.2.101)

## Bug Fixes
- UpDataGrid : Fix selection through pages and align checkbox

#  ReactControls (version: 0.2.100)

## Main Changes
- UpDataPanelItem : Not show column if field is null or undefined

#  ReactControls (version: 0.2.98)

## Main Changes
- UpModal : Add prop to center the modal

#  ReactControls (version: 0.2.94)

## Bug Fixes
- UpDataGrid : Fix handling action cells

#  ReactControls (version: 0.2.93)

## Main Changes
- UpDataGrid : Manage selection multi-page

#  ReactControls (version: 0.2.92)

## Main Changes
- UpDate : Allow to set full width

## Bug Fixes
- UpDate : Compare only date without time

#  ReactControls (version: 0.2.91)

## Main Changes
- UpNumber : fix min and max handling

#  ReactControls (version: 0.2.90)

## Main Changes
- UpNavTab : Add selected tab props

## Bug Fixes
- UpTooltip : fix hover behaviour

#  ReactControls (version: 0.2.89)

## Main Changes
- UpDate : Add date outside range check props

#  ReactControls (version: 0.2.88)

## Main Changes
- Input : Increase floating label size

#  ReactControls (version: 0.2.87)

## Bug Fixes
- UpNumber : fix button design to increase/decrease value

#  ReactControls (version: 0.2.86)

## Bug Fixes
- UpDate : isOutsideRange

#  ReactControls (version: 0.2.85)

## Main Changes
- UpMenu : Add CustomStyles props

#  ReactControls (version: 0.2.84)

## Bug Fixes
- UpDataGrid : Fix getRowAction 

#  ReactControls (version: 0.2.83)

## Main Changes
- UpSvgIcon : Add new SVG icon

#  ReactControls (version: 0.2.82)

## Main Changes
- UpSvgIcon : Add new SVG icon

#  ReactControls (version: 0.2.81)

## Main Changes
- UpDataGrid : Add text-align left props

#  ReactControls (version: 0.2.80)

## Main Changes
- Add auto read action bound to the row if none onClick specified and only one action defined

#  ReactControls (version: 0.2.79)

## Main Changes
- Add new props to UpRadio in order to provide better rendering of options

#  ReactControls (version: 0.2.78)

## Bugs Fixes
- Fix default props for UpBox

#  ReactControls (version: 0.2.77)

## Bugs Fixes
- Fix removed prop className on UpPanel

#  ReactControls (version: 0.2.76)

## Bugs Fixes
- Fix alignement UpDate in form

#  ReactControls (version: 0.2.75)

## Main Changes
- Upgrade to storybook 6

#  ReactControls (version: 0.2.74)

## Main Changes
- UpCalendar : upgrade to FullCalendar 5.3.x

#  ReactControls (version: 0.2.73)

## Main Changes
- UpCalendar : clean code and exports

#  ReactControls (version: 0.2.72)

## Main Changes
- UpCalendar : improve design and add tooltip props

#  ReactControls (version: 0.2.71)

## Bug Fixes
- UpDataGrid : fix error when action null

#  ReactControls (version: 0.2.70)

## Main Changes
- Improve UpContextMenu closing behaviour
- Add className props to UpCalendar mapped to the viewClassName property of Fullcalendar

#  ReactControls (version: 0.2.69)

## Main Changes
- Add isVisble and getProps on row action of an UpDataGrid

#  ReactControls (version: 0.2.68)

## Bug Fixes
- Fix null action in a UpDataGridRow

#  ReactControls (version: 0.2.67)

## Main changes
- Clean UpToast and UpNotification
- Add readonly on UpCheckbox
- Add documentation on UpToast
- Add arrow back icon

#  ReactControls (version: 0.2.66)

## Main changes
- Enable to pass JSX element as title of an UpDataGrid

#  ReactControls (version: 0.2.65)

## Bug Fixes
- Fix values for UpDataPanel

#  ReactControls (version: 0.2.64)

## Main changes
- Change Header and CloseIcon position for UpModal

# ReactControls (version: 0.2.64)

## Bug Fixes
- Fix null theme in UpLigne

# ReactControls (version: 0.2.63)

## Bug Fixes
- Fix UpModal showing

# ReactControls (version: 0.2.62)

## Main Changes
- Improve UpTooltip closing behaviour

# ReactControls (version: 0.2.61)

## Main Changes
- Enable action factory on UpDataGrid

# ReactControls (version: 0.2.60)

## Main Changes
- Enable to render icon in UpMenu

# ReactControls (version: 0.2.59)

## Bug Fixes

- Avoid UpModal to appear during mount
- Allow to close modal on outside click
- Fix readonly on UpRadio, UpDate and UpText 

# ReactControls (version: 0.2.58)

## Main Changes

- Fix title handling for UpDataPanel


# ReactControls (version: 0.2.57)

## Main Changes

- Add get formatter pros on UpDataPanel


# ReactControls (version: 0.2.56)

## Main Changes

- Fix close button on UpModal


# ReactControls (version: 0.2.55)

## Main Changes

- Add new UpModal display mode


# ReactControls (version: 0.2.54)

## Main Changes

- Fix form fields alignment
- Add stories for complex form layout
- Fix margin bottom for DataGrid

# ReactControls (version: 0.2.53)

## Main Changes

- Add placeholder to Textarea

# ReactControls (version: 0.2.52)

## Main Changes

- Improve UI tooltip display
- Improve UpButton borderless display mode

# ReactControls (version: 0.2.51)

## Bug Fixes

- Fix tabindex on RadioButton
  
# ReactControls (version: 0.2.50)

## Main Changes

- Add UpButton borderless prop

# ReactControls (version: 0.2.49)

## Main Changes

- Upgrade Fullcalendar to v5

# ReactControls (version: 0.2.48)

## Main Changes

- Add tabIndex on all "Input"

# ReactControls (version: 0.2.46)

## Main Changes

- Add component UpDataPanel

# ReactControls (version: 0.2.45)

## Main Changes

UpDataGrid CellFormatter
- Add getter props for cell formatter

# ReactControls (version: 0.2.44)

## Main Changes

UpDataGrid
- Add props for tooltip for Header

# ReactControls (version: 0.2.43)

## Bug Fixes

UpSelect 
- fix min height in multiselect mode

# ReactControls (version: 0.2.42)

## Bug Fixes

UpText 
- fix style conflict with UpInput

# ReactControls (version: 0.2.41)

## Main changes

UpText 
- set full border

# ReactControls (version: 0.2.40)

## Main changes

UpNavTab 
- add onSelectedTabChanged handler

# ReactControls (version: 0.2.37)

## Main changes

Improve UpIcon stories
- enable to change color and size

# ReactControls (version: 0.2.36)

## Bug Fixes

Fix setting value in case of using mode returntype "id" UpSelect

# ReactControls (version: 0.2.35)

## Bug Fixes

Fix props autoload for UpSelect

# ReactControls (version: 0.2.33)

## Bug Fixes

Fix props passed to UpPhone and UpEmail

# ReactControls (version: 0.2.32)

## Bug Fixes

Fix UpRadio background color when display as button

# ReactControls (version: 0.2.31)

## Bug Fixes

Fix UpRadio layout in display mode button

# ReactControls (version: 0.2.30)

## Bug Fixes

Fix ok-sign icon
  
# ReactControls (version: 0.2.29)

## Main changes

Export custom hooks :
- useMountedRef : keep mount and unmount reference
- useSafeState : avoid setState after unmount
- useHoverIntent : enable mouse enter and leave logic

# ReactControls (version: 0.2.28)

## Main changes

Add props onClick, onMouseEnter and onMouseLeave for UpBadge

# React-Controls (version: 0.2.26)

## Bug Fixes
Clean UpBadge

# React-Controls (version: 0.2.25)

## Bug Fixes
Fix svg icon notification

# React-Controls (version: 0.2.24)

## Bug Fixes
Fix icon color when UpButon is disabled

# React-Controls (version: 0.2.23)

## Main changes
- Add new component UpPicture

# React-Controls (version: 0.2.22)

## Bug Fixes
- Fix floating label prop on UpNumber

## Main changes
- Add new prop to UpDataGrid in order to customize the style of a row

# React-Controls (version: 0.2.21)

## Main changes
- Add new prop to UpDataGrid in order to customize the style of a row

# React-Controls (version: 0.2.20)

## Main changes
- Add new prop to UpNotification to define the duration of the animation

# React-Controls (version: 0.2.19)

## Main changes
- Add new props disabled to UpCheckbox

## Bug Fixes
- Fix icon position for UpPaswword with floating label
- In case of using the floating label, the select get now the focus when click on the label

# React-Controls (version: 0.2.16)

## Main changes

- Add floating label to UpSelect
- Improve animation UpNavTab

## Bug Fixes

- Validation phone number of UpPhone

# React-Controls (version: 0.2.13)

## Main changes

- UpCarousel
- Add new props className to UpButton 

## UpCarousel

Add new component built with framer in order to dipslay a carousel layout

### General usage
```
 <div className={wrapperBoxesStyle}>
        <UpCarousel items={["#22cc88", "#ffcc00", "#0099ff", "#ff0055"].map(color => ({key: color, title: 'Title', color}))} />
 </div>
```

### With render item
```
   <div className={wrapperBoxesStyle}>
     <UpCarousel renderItem={(isOpen, item) => {
       return <div style={{display: 'flex', height : '100%', 
        flexDirection: 'column', 
        alignItems: 'center', 
        justifyContent: 'space-between'}}>
          <em style={{ fontWeight : isOpen ? 700 : 500}}>{item.title}</em>
          <UpButton intent={'secondary'} className={style({$nest : {'& .up-btn' : {
            border: '0 !important', color : 'white !important', background: 'transparent'
          }
        }})} onClick={(e) => item.action(item) }>...</UpButton>
         </div>
     }} items={["#22cc88", "#ffcc00", "#0099ff", "#ff0055"].map(color => (
        { key: color,
          action: (item) => new Promise((resolve, reject) => resolve(console.log(item))), 
          title: 'Title',
          color}))
        } />
   </div>
```

# React-Controls (version: 0.2.0)

## Background Info

We are working on a new version of react-controls 

## Main changes

- UpPassword
- UpInput 
- UpNotification
- UpButton (style update when dropDown === 'down')
- UpTogglen (style update)
- UpDate (style update)
- UpDataGrid
- UpCheckbox (style update)
- UpLoadingIndicator (style update)


## Components
 - UpPassword new props : 
    - ``rules?:array`` array of objects with the text and and a regex expression
```
const rules = [
    { text: 'Au moins 8 caractères', regex: /^.{8,}$/ },
    { text: 'Au moins une majuscule', regex: /.*[A-Z]/ },
    { text: 'Au moins une minuscule', regex: /.*[a-z]/ },
    { text: 'Au moins 1 chiffre', regex: /.*[0-9].*/ }
  ]
  const rulesAreValid = rulesMatch(value,rules) // function impoted from utils

  <UpPassword
      value={value}
      onChange={(e, v) => setValue(v)}
      showPasswordOnClick={false}
      rules={rules}
      onFocus={(e)=>{
        setFocused(true)
        setTouched(true)
      }}
      onBlur={(e)=> setFocused(false)}
      focused={focused}
      showError={touched && !rulesAreValid}
      hasError={touched && !rulesAreValid}
      touched={touched}
    />
```
 - UpInput new props :
    - ``hasClearOption ?:boolean`` a bolean to show a an icon to clear the input value
    - ``onClear?:function``  fuction to clear the input value if you use the input as a controlledInput

 ```
 const ControlledSeacrhInput = props => {
  const [value,setValue] = React.useState('')
  const [isLoading,setIsLoading] = React.useState(false);
  
  return (
    <UpInput
      type='search' 
      value={value} 
      onChange={(event,value)=>{
        setIsLoading(true)
        setValue(value)
        setTimeout(() => {
          setIsLoading(false)
        }, 2000);
      }} 
      onClear={()=>setValue('')} 
      placeholder='placeholder ...'   
      iconPosition={'left'} 
      hasClearOption
      isLoading={isLoading}
     />
  )
}
```

- UpNotification new props : 
    - ``duration?:number ``the duration in seconds of the notification before it disappear 
    - ``withCancelIcon?:boolean`` a boolean to add the possibility to cancel a notification


```
<UpNotification 
    intent="success" 
    duration={6} 
    withCancelIcon={boolean('showCancelIcon',true)}
>
    <p>Votre opération a été enregistré avec succès !</p>
</UpNotification>

```

 - UpDataGrid new props : 
    - ``displayRowActionsWithinCell?:boolean`` a bolean to diplay the actions in the first cell  
    - ``rowActions?:array`` array of actions (it replaces the  `actions` props in the previous version)
    - ``footerProps?:objectOf`` : 
        - `isPaginationEnabled?:boolean` a props to display the pagination in the footer
        - `actionsButtonText?:string` the text of the button that group all the actions
        - `actionsDataGrid?:objectOf`:
          - `label:string`: label of the validation button
          - `intent?:string`: intent of the validation button
          - `actions?:ArrayOf`:
            - `action:ObjectOf`: 
              - `label:string`: label of the selected action
              - `actionType:string`: the actionType of the selected action
              - `onClick:function`: a function that takes an array of the selected rows and return a promise
    - ``headerProps?:objectOf``: 
        - `title:?string` : title of the DataGrid
        - `buttons:?ReactElement`: it could be anything you want to diplay on the right of the header

```
 <UpDataGrid
        dataSource={{
          query: "https://jsonplaceholder.typicode.com/posts"
        }}
        displayRowActionsWithinCell={true}
        isSelectionEnabled={true}
        onSelectionChange={(a, b) => {
          console.log(a, b);
        }}
        
        className={style({
          $nest: {
            "&.up-data-grid-container .up-pagination-nav li a": {
              border: 0,
              fontSize: "10pt"
            },
            "&.up-data-grid-container .up-pagination-result-message": {
              border: 0,
              color: "black",
              fontSize: "10pt"
            },
            "& .up-pagination-takes": {
              display: "none"
            },
            "& .up-pagination-page a": {
              textDecoration: "underline",
              color: "black",
              minWidth: "auto",
              padding: "4px"
            },
            "& .up-pagination-page:hover a, & .up-pagination-page.active:hover a, & .up-pagination-page:hover span": {
              background: "transparent",
              color: UpDefaultTheme.colorMap.primary
            },
            "& .up-pagination-page.disabled a": {
              textDecoration: "none"
            },
            "& .up-pagination-page.disabled:hover a, & .up-pagination-page.disabled:hover span": {
              color: UpDefaultTheme.colorMap.disabledFg
            },
            "& .up-pagination-page.active a": {
              background: "transparent",
              color: UpDefaultTheme.colorMap.primary
            },
            "& .up-row-flex": {
              textAlign: "end",
              flexDirection: "row-reverse"
            }
          }
        })}
        paginationProps={{
          paginationNavigationSeparator: "...",
          previousLabel: "Précédent",
          nextLabel: "Suivant",
          renderResultMessage: (
            theme: UpThemeInterface,
            from: number,
            to: number,
            total: number
          ) => (
            <span
              className={classnames(
                "up-pagination-result-message",
                paginationCounterStyle({ theme })
              )}
            >
              {total == 0 && <span>Aucun résultat</span>}
              {total != 0 && (
                <span>
                  <span>R&eacute;sultat(s)&nbsp;</span>
                  <span>{from}</span>
                  <span> &agrave; </span>
                  <span>{to}</span>
                  <span> sur </span>
                  <span>{total}</span>
                </span>
              )}
            </span>
          )
        }}
        rowActions={[
          {
            action: (values) => {
              console.log(values)
            },
            type: "add",
            description: "Ajouter un lien"
          },
          {
            action: () => {},
            type: "edit",
            description: "Modifier"
          },
          {
            action: () => {},
            type: "delete",
            description: "Supprimer"
          }
        ]}
       
        paginationPosition="bottom"
        isPaginationEnabled={true}
        columns={[
          {
            label: "Titre",
            field: "title",
            isSortable: true
          },
          {
            label: "Texte",
            field: "body",
            isSortable: true
          },
          {
            label: "Auteur",
            field: "userId",
            isSortable: true
          }
        ]}
        footerProps={{
             isPaginationEnabled: true,
             actionsButtonText: 'Groupe actions',
             actionsDataGrid: {
               label: 'Valider',
               intent: 'secondary',
               actions: [
                 {
                   actionType: 'add',
                   label: 'Ajouter un lien',
                   onClick: rows => {
                     console.log('add', rows);
                     return new Promise(() => {});
                   },
                 },
                 {
                   actionType: 'edit',
                   label: 'Mofifier',
                   onClick: rows => {
                     console.log('edit', rows);
                     return new Promise(() => {});
                   },
                 },
                 {
                   actionType: 'delete',
                   label: 'Supprimer',
                   onClick: rows => {
                     console.log('delete', rows);
                     return new Promise(() => {});
                   },
                 },
               ],
             },
           }}
        headerProps={{
          title: 'Titre du tableau',
          buttons: <><UpButton intent='secondary'>Bouton 1</UpButton><UpButton intent='secondary'>Bouton 2</UpButton></>
        }}
      />
```