Merge branch 'main' into evshi/execute-code

.changeset/breezy-hornets-run.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+hotfix screen level style support

.changeset/cyan-bananas-live.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+modernize PopupMenu widget

.changeset/gold-spies-sort.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Added support to customize nooption in search widget

.changeset/great-pigs-attend.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+Remove navigation glitch from sidebar menu

.changeset/healthy-readers-promise.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-framework": patch
+---
+
+ensure user atom overwrite keys

.changeset/metal-pugs-try.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+Fix datagrid rows deselected issue

.changeset/neat-wasps-doubt.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+fix required field validation with form.validate

.changeset/popular-dryers-fold.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+fix Datagrid's defaultSelectedRowKeys

.changeset/rare-meals-shave.md

@@ -0,0 +1,5 @@
+---
+"@ensembleui/react-runtime": patch
+---
+
+Added support of form.onChange

.changeset/swift-elephants-mate.md

@@ -0,0 +1,6 @@
+---
+"@ensembleui/react-kitchen-sink": patch
+"@ensembleui/react-runtime": patch
+---
+
+added support for screen lavel font colour support

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

@@ -18,7 +18,7 @@ View:
  onResponse:
  executeCode: |
  console.log('getData', response.body);
- 
+
  header:
  title:
  Header:
@@ -45,7 +45,7 @@ View:
  options:
  height: 50px
  width: 80px
- 
+
  - Icon:
  - Text:
  styles:
@@ -67,6 +67,9 @@ View:
  styles:
  gap: 8px
  labelPosition: top
+ onChange:
+ executeCode: |
+ console.log({fields})
  onSubmit:
  executeCode:
  body: |
@@ -151,7 +154,6 @@ View:
  maxLength: 2
  validator:
  required: true
- minLength: 4
  maxLength: 2
  label: Text input with min and max length
  - TextInput:
@@ -231,6 +233,12 @@ View:
  label: submit form by id
  onTap:
  executeCode: myForm.submit()
+ - Button:
+ label: Validate form
+ onTap:
+ executeCode: myForm.validate()
+ - Text:
+ text: Validation result ${myForm.isValid}
 
  - Text:
  styles:

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

@@ -12,6 +12,7 @@ View:
  Header:
 
  styles:
+ className: topView
  scrollableView: true
  backgroundColor: ${colors.primary['200']}
 
@@ -103,7 +104,7 @@ View:
  name: Settings
  onItemSelect:
  executeCode: |
- ensemble.setTheme(theme)
+ ensemble.setTheme(value.theme)
 
  - Text:
  styles:

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

@@ -1,19 +1,20 @@
 View:
+ styles:
+ scrollableView: true
  onLoad:
  executeCode:
  body: |-
  ensemble.storage.set('activeIndex',3);
  ensemble.storage.set('loaderStat', false);
  ensemble.storage.set("skip", 10)
  ensemble.storage.set("iconSize", 40)
- ensemble.storage.set("iconName", "Abc")
-
+ ensemble.storage.set("iconName", "MoreHoriz")
  onComplete:
  invokeApi:
  name: getDummyProductsByPaginate
  inputs:
  skip: 0
- limit: 10
+ limit: 17
  onResponse:
  executeCode: |
  const res = response.body.products;
@@ -25,20 +26,78 @@ View:
  inputs:
  message: "Inputs to header widget"
 
- styles:
- scrollableView: true
-
  body:
  Column:
  crossAxis: stretch
  gap: 12px
  styles:
  names: page
  children:
- - Icon:
- name: ArrowBack
- onTap:
- navigateBack:
+ - Row:
+ styles:
+ crossAxis: center
+ mainAxis: spaceBetween
+ children:
+ - Icon:
+ name: ArrowBack
+ onTap:
+ navigateBack:
+ - PopupMenu:
+ showDivider: true
+ enabled: ${ensemble.storage.get("dummyProducts")?.at(0)?.id === 1}
+ trigger: hover
+ styles:
+ height: 200px
+ onItemSelect:
+ showToast:
+ message: Your selected brand's ${value?.product ? "rating" :"price"} is ${value?.product?.rating || value?.value}
+ item-template:
+ data:
+ [
+ '${ensemble.storage.get("dummyProducts")[0]}',
+ '${ensemble.storage.get("dummyProducts")[2]}',
+ '${ensemble.storage.get("dummyProducts")[4]}',
+ ]
+ name: product
+ template:
+ Text:
+ text: ${product.rating} stars
+ items:
+ - label: All Clients
+ value: all clients
+ - label: Client Name
+ value: client name
+ - label: Location Group
+ type: group
+ items:
+ - label: Location Name 1
+ value: location name 1
+ visible: false
+ - label: Location Name 2
+ value: location name 2
+ enabled: false
+ - label: Location Name 3
+ value: location name 3
+ - label: Client Menu
+ items:
+ - label: Sub Client 1
+ value: sub client 1
+ - label: Child Client Menu
+ items: "${getDummyProductsByPaginate.body.products.map(p => ({label: p.title, value: p.price, visible: p.price > 10, enabled: p.rating < 4})) ?? []}"
+ - label: Sub Client 2
+ value: sub client 2
+ widget:
+ Icon:
+ name: ${ensemble.storage.get("iconName")}
+ color: "#365898"
+ styles:
+ padding: 5
+ borderWidth: 1
+ borderRadius: 6
+ cursor: pointer
+ borderColor: "#DFE1E6"
+ backgroundColor: white
+
  - Row:
  gap: 4px
  children:
@@ -75,32 +134,62 @@ View:
  - Avatar:
  name: " 4Dr. cabin4 i "
 
- - Lottie:
- id: MyLottie
- source: https://lottie.host/3568da34-6083-42fc-a254-74d9c1e15b2f/wcVmO2igxm.json
- repeat: false
- autoPlay: true
+ - Row:
  styles:
- margin: 20px
- height: 200px
- backgroundColor: "#f0f0f0"
- width: 200px
- transform: rotate(1deg)
- onTap:
- executeCode: |-
- console.log("Tapped");
- onForward:
- executeCode: |-
- console.log("Forwarded");
- onReverse:
- executeCode: |-
- console.log("Reversed");
- onPause:
- executeCode: |-
- console.log("Paused");
- onComplete:
- executeCode: |-
- console.log("Completed");
+ mainAxis: spaceBetween
+ crossAxis: center
+ children:
+ - Lottie:
+ id: MyLottie
+ source: https://lottie.host/3568da34-6083-42fc-a254-74d9c1e15b2f/wcVmO2igxm.json
+ repeat: false
+ autoPlay: true
+ styles:
+ margin: 20px
+ height: 200px
+ backgroundColor: "#f0f0f0"
+ width: 200px
+ transform: rotate(1deg)
+ onTap:
+ executeCode: |-
+ console.log("Tapped");
+ onForward:
+ executeCode: |-
+ console.log("Forwarded");
+ onReverse:
+ executeCode: |-
+ console.log("Reversed");
+ onPause:
+ executeCode: |-
+ console.log("Paused");
+ onComplete:
+ executeCode: |-
+ console.log("Completed");
+ - PopupMenu:
+ trigger: contextMenu
+ styles:
+ backgroundColor: ${colors.gray['50']}
+ onItemSelect:
+ showToast:
+ message: navigated to ${value.str}
+ item-template:
+ data: ["File", "Edit", "View", "Settings", "Help"]
+ name: str
+ template:
+ Row:
+ children:
+ - Icon:
+ name: NavigateNext
+ - Text:
+ text: ${str}
+ widget:
+ Text:
+ text: Right Click here
+ styles:
+ color: ${colors.gray['700']}
+ backgroundColor: ${colors.gray['100']}
+ padding: 100px
+ borderRadius: 12px
 
  - Row:
  styles:
@@ -287,6 +376,8 @@ View:
  widget:
  DataGrid:
  id: "myDataGridExample2"
+ allowSelection: true
+ defaultSelectedRowKeys: [5, 6]
  styles:
  headerStyle:
  backgroundColor: "white"
@@ -295,23 +386,30 @@ View:
  hasDivider: true
  borderBottom: false
  DataColumns: ["id", "title", "description"]
- pageSize: 10
+ pageSize: 17
  totalRows: 100
+ onRowsSelected:
+ executeCode: |
+ console.log(selectedRowKeys, selectedRows)
  onPageChange:
- invokeAPI:
- name: getDummyProductsByPaginate
- inputs:
- skip: ${ensemble.storage.get('skip') * (page - 1)}
- limit: ${pageSize}
- onResponse:
- executeCode: |
- const prevItem = ensemble.storage.get("dummyProducts")
- const res = response.body.products;
- ensemble.storage.set("dummyProducts", [...res])
+ executeCode:
+ body: |
+ myDataGridExample2.setRowsSelected([]);
+ onComplete:
+ invokeAPI:
+ name: getDummyProductsByPaginate
+ inputs:
+ skip: ${ensemble.storage.get('skip') * (page - 1)}
+ limit: ${pageSize}
+ onResponse:
+ executeCode: |
+ const prevItem = ensemble.storage.get("dummyProducts")
+ const res = response.body.products;
+ ensemble.storage.set("dummyProducts", [...res])
  item-template:
  data: ${ensemble.storage.get('dummyProducts')}
  name: dummyData
- key: ${dummyData.key}
+ key: ${dummyData.id}
  template:
  DataRow:
  item-template:
@@ -320,7 +418,17 @@ View:
  template:
  Text:
  text: ${value}
-
+ - Button:
+ label: get selected rows
+ onTap:
+ executeCode: |
+ console.log(myDataGridExample2.rowsSelected)
+ - Button:
+ label: select first 3 rows
+ onTap:
+ executeCode: |
+ const keys = ensemble.storage.get('dummyProducts').map(dp => dp.id);
+ myDataGridExample2.setRowsSelected(keys.slice(0, 3));
  - Card:
  styles:
  maxWidth: unset