# WidgetDrawer

Widget drawer modal wrapper component that handles widget initialization internally

## Installation

```tsx
import { WidgetDrawer } from 'uxp/components';
```

## Signature

```tsx
const WidgetDrawer: React.FunctionComponent<WidgetDrawerProps>
```

## Examples

```tsx
tsx
<WidgetDrawer
  show={showDrawer}
  onClose={() => setShowDrawer(false)}
  widgets={dashboardWidgets}
  layouts={dashboardLayouts}
  onChange={(event) => {
    if (event.action === 'select') {
      // Raw selection (no layout processing)
      handleRawSelection(event.items)
    } else {
      // Add or delete (with layout processing)
      setWidgets(event.widgets!)
      setLayouts(event.layouts!)
    }
    return true
  }}
  config={{ mode: 'multi' }}
/>
```

## Properties

| Name       | Type                                                                                              | Mandatory | Default Value | Example Value |
| ---------- | ------------------------------------------------------------------------------------------------- | --------- | ------------- | ------------- |
| show       | boolean                                                                                           | Yes       | -             | -             |
| onClose    | () => void                                                                                        | Yes       | -             | -             |
| widgets    | [IWidgetInstance\[\]](https://help.iviva.com/uxp/v5/additional-resources/types/iwidgetinstance)   | Yes       | -             | -             |
| layouts    | [ResponsiveLayouts](https://help.iviva.com/uxp/v5/additional-resources/types/responsivelayouts)   | Yes       | -             | -             |
| onChange   | (event: WidgetDrawerChangeEvent) => boolean \| Promise                                            | Yes       | -             | -             |
| isBounded  | boolean                                                                                           | No        | -             | -             |
| maxColumns | number                                                                                            | No        | -             | -             |
| config     | [WidgetDrawerConfig](https://help.iviva.com/uxp/v5/additional-resources/types/widgetdrawerconfig) | No        | -             | -             |

## Related Types

* [WidgetDrawerProps](https://help.iviva.com/uxp/v5/additional-resources/types/widgetdrawerprops)
* [IWidgetInstance](https://help.iviva.com/uxp/v5/additional-resources/types/iwidgetinstance)
* [ILayout](https://help.iviva.com/uxp/v5/additional-resources/types/ilayout)
* [IWidgetConfigs](https://help.iviva.com/uxp/v5/additional-resources/types/iwidgetconfigs)
* [DynamicFormFieldProps](https://help.iviva.com/uxp/v5/additional-resources/types/dynamicformfieldprops)
* [FormValue](https://help.iviva.com/uxp/v5/additional-resources/types/formvalue)
* [IFormData](https://help.iviva.com/uxp/v5/additional-resources/types/iformdata)
* [CustomValidateResponse](https://help.iviva.com/uxp/v5/additional-resources/types/customvalidateresponse)
* [FormSectionProps](https://help.iviva.com/uxp/v5/additional-resources/types/formsectionprops)
* [IConfigPanelProps](https://help.iviva.com/uxp/v5/additional-resources/types/iconfigpanelprops)
* [IContextProvider](https://help.iviva.com/uxp/v5/additional-resources/types/icontextprovider)
* [IPartialContextProvider](https://help.iviva.com/uxp/v5/additional-resources/types/ipartialcontextprovider)
* [Language](https://help.iviva.com/uxp/v5/additional-resources/types/language)
* [ICustomThemes](https://help.iviva.com/uxp/v5/additional-resources/types/icustomthemes)
* [IThemeProps](https://help.iviva.com/uxp/v5/additional-resources/types/ithemeprops)
* [ThemeType](https://help.iviva.com/uxp/v5/additional-resources/types/themetype)
* [UserDetails](https://help.iviva.com/uxp/v5/additional-resources/types/userdetails)
* [NavigationLink](https://help.iviva.com/uxp/v5/additional-resources/types/navigationlink)
* [Routes](https://help.iviva.com/uxp/v5/additional-resources/types/routes)
* [ConfiguredPage](https://help.iviva.com/uxp/v5/additional-resources/types/configuredpage)
* [ComponentType](https://help.iviva.com/uxp/v5/additional-resources/types/componenttype)
* [IUXPFunctions](https://help.iviva.com/uxp/v5/additional-resources/types/iuxpfunctions)
* [ViewOverride](https://help.iviva.com/uxp/v5/additional-resources/types/viewoverride)
* [Environment](https://help.iviva.com/uxp/v5/additional-resources/types/environment)
* [ExecutionOptions](https://help.iviva.com/uxp/v5/additional-resources/types/executionoptions)
* [CachingOptions](https://help.iviva.com/uxp/v5/additional-resources/types/cachingoptions)
* [IDataFunction](https://help.iviva.com/uxp/v5/additional-resources/types/idatafunction)
* [QueryParams](https://help.iviva.com/uxp/v5/additional-resources/types/queryparams)
* [ExecutionResult](https://help.iviva.com/uxp/v5/additional-resources/types/executionresult)
* [ExecuteMicroserviceConfig](https://help.iviva.com/uxp/v5/additional-resources/types/executemicroserviceconfig)
* [ExecuteConfigBase](https://help.iviva.com/uxp/v5/additional-resources/types/executeconfigbase)
* [LucyQueryResult](https://help.iviva.com/uxp/v5/additional-resources/types/lucyqueryresult)
* [IWidgetPreloader](https://help.iviva.com/uxp/v5/additional-resources/types/iwidgetpreloader)
* [ResponsiveLayouts](https://help.iviva.com/uxp/v5/additional-resources/types/responsivelayouts)
* [WidgetDrawerChangeEvent](https://help.iviva.com/uxp/v5/additional-resources/types/widgetdrawerchangeevent)
* [IWidget](https://help.iviva.com/uxp/v5/additional-resources/types/iwidget)
* [IRenderUIItemProps](https://help.iviva.com/uxp/v5/additional-resources/types/irenderuiitemprops)
* [WidgetDrawerType](https://help.iviva.com/uxp/v5/additional-resources/types/widgetdrawertype)
* [WidgetDrawerConfig](https://help.iviva.com/uxp/v5/additional-resources/types/widgetdrawerconfig)
* [WidgetDrawerMode](https://help.iviva.com/uxp/v5/additional-resources/types/widgetdrawermode)
* [WidgetDrawerStatus](https://help.iviva.com/uxp/v5/additional-resources/types/widgetdrawerstatus)