feat: add option to allow clearing selection in dropdown (#1040)

Author: justEhmadSaeed

.changeset/serious-wasps-agree.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Add option to allow clear input for dropdown

apps/kitchen-sink/src/ensemble/screens/widgets.yaml

@@ -869,6 +869,17 @@ View:
                         Text:
                           text: Here is my label 2
                       value: 222
+              - Dropdown:
+                  label: Ability to stop clearing selection
+                  hintText: Hint Text
+                  allowClear: ${false}
+                  styles:
+                    dropdownBorderWidth: 3px
+                  items:
+                    - label: Option 1
+                      value: 1
+                    - label: Option 2
+                      value: 2
         - Card:
             styles:
               maxWidth: unset

packages/runtime/src/widgets/Form/Dropdown.tsx

@@ -48,6 +48,7 @@ export interface SelectOption {
 }
 
 export type DropdownProps = {
+  allowClear?: boolean;
   items?: SelectOption[];
   /* deprecated, use onChange */
   onItemSelect: EnsembleAction;
@@ -302,6 +303,7 @@ const Dropdown: React.FC<DropdownProps> = (props) => {
       <div ref={rootRef} style={{ flex: 1, ...formItemStyles }}>
         <EnsembleFormItem values={values}>
           <Select
+            allowClear={values?.allowClear ?? true}
             className={`${values?.styles?.names || ""} ${id}_input`}
             defaultValue={values?.value}
             disabled={values?.enabled === false}