diff --git a/404.html b/404.html index 69fb5c87..c92ae10b 100644 --- a/404.html +++ b/404.html @@ -41,7 +41,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/CONTRIBUTING.html b/CONTRIBUTING.html index 99e7d8d4..8bb3e9ca 100644 --- a/CONTRIBUTING.html +++ b/CONTRIBUTING.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/PULL_REQUEST_TEMPLATE.html b/PULL_REQUEST_TEMPLATE.html index 4d881458..4e1c8127 100644 --- a/PULL_REQUEST_TEMPLATE.html +++ b/PULL_REQUEST_TEMPLATE.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/articles/index.html b/articles/index.html index 6494e935..b9e2b2c7 100644 --- a/articles/index.html +++ b/articles/index.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/articles/shiny-fluent.html b/articles/shiny-fluent.html index 77fb3e38..9f1294fb 100644 --- a/articles/shiny-fluent.html +++ b/articles/shiny-fluent.html @@ -43,7 +43,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/articles/st-sales-reps-dashboard.html b/articles/st-sales-reps-dashboard.html index 8fe664d8..1905e28a 100644 --- a/articles/st-sales-reps-dashboard.html +++ b/articles/st-sales-reps-dashboard.html @@ -43,7 +43,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/articles/st-shiny-fluent-and-rhino.html b/articles/st-shiny-fluent-and-rhino.html index b78e8460..57805a43 100644 --- a/articles/st-shiny-fluent-and-rhino.html +++ b/articles/st-shiny-fluent-and-rhino.html @@ -43,7 +43,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/articles/sz-how-to-shiny-modules.html b/articles/sz-how-to-shiny-modules.html index dc6dfd97..4622d738 100644 --- a/articles/sz-how-to-shiny-modules.html +++ b/articles/sz-how-to-shiny-modules.html @@ -43,7 +43,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/articles/sz-how-to-troubleshoot.html b/articles/sz-how-to-troubleshoot.html index 2645e203..a15086fe 100644 --- a/articles/sz-how-to-troubleshoot.html +++ b/articles/sz-how-to-troubleshoot.html @@ -43,7 +43,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/articles/sz-how-to-use-fluent-docs.html b/articles/sz-how-to-use-fluent-docs.html index 24e1daec..660bec9b 100644 --- a/articles/sz-how-to-use-fluent-docs.html +++ b/articles/sz-how-to-use-fluent-docs.html @@ -43,7 +43,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/articles/topic_react-in-shiny.html b/articles/topic_react-in-shiny.html index 131ecb96..6aac3638 100644 --- a/articles/topic_react-in-shiny.html +++ b/articles/topic_react-in-shiny.html @@ -43,7 +43,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/authors.html b/authors.html index 53f39245..46276a7b 100644 --- a/authors.html +++ b/authors.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 @@ -107,13 +107,13 @@

Citation

Sobolewski J, Żyła K, Rogala M (2024). shiny.fluent: Microsoft Fluent UI for Shiny Apps. -R package version 0.3.0.900, https://github.com/appsilon/shiny.fluent, https://appsilon.github.io/shiny.fluent/. +R package version 0.4.0, https://github.com/appsilon/shiny.fluent, https://appsilon.github.io/shiny.fluent/. 

@Manual{,
   title = {shiny.fluent: Microsoft Fluent UI for Shiny Apps},
   author = {Jakub Sobolewski and Kamil Żyła and Marek Rogala},
   year = {2024},
-  note = {R package version 0.3.0.900, https://github.com/appsilon/shiny.fluent},
+  note = {R package version 0.4.0, https://github.com/appsilon/shiny.fluent},
   url = {https://appsilon.github.io/shiny.fluent/},
 }
diff --git a/index.html b/index.html index 39f2480f..a6510c65 100644 --- a/index.html +++ b/index.html @@ -43,7 +43,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/news/index.html b/news/index.html index 3efa8046..c8616a0c 100644 --- a/news/index.html +++ b/news/index.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 @@ -81,6 +81,11 @@ Source: NEWS.md +
+

shiny.fluent 0.4.0

+
  1. Upgraded @fluentui/react to 8.118.2.
    2. +
  2. Upgraded shiny.react dependency to 0.4.0 that uses React 18.3.1.
    3. +

shiny.fluent 0.3.0

CRAN release: 2023-01-24

  1. Added ThemeProvider component (#47).
    2. diff --git a/pkgdown.yml b/pkgdown.yml index 135d22f6..8c1fdec2 100644 --- a/pkgdown.yml +++ b/pkgdown.yml @@ -9,7 +9,7 @@ articles: sz-how-to-troubleshoot: sz-how-to-troubleshoot.html sz-how-to-use-fluent-docs: sz-how-to-use-fluent-docs.html topic_react-in-shiny: topic_react-in-shiny.html -last_built: 2024-05-20T15:01Z +last_built: 2024-05-21T07:10Z urls: reference: https://appsilon.github.io/shiny.fluent/reference article: https://appsilon.github.io/shiny.fluent/articles diff --git a/reference/ActivityItem.html b/reference/ActivityItem.html index d22fc0af..7ec8c9c8 100644 --- a/reference/ActivityItem.html +++ b/reference/ActivityItem.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Announced.html b/reference/Announced.html index c7451ff2..9d46142e 100644 --- a/reference/Announced.html +++ b/reference/Announced.html @@ -48,7 +48,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Breadcrumb.html b/reference/Breadcrumb.html index 3b23bf8a..e942f7ff 100644 --- a/reference/Breadcrumb.html +++ b/reference/Breadcrumb.html @@ -28,7 +28,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Button.html b/reference/Button.html index bdf9c2f3..02046f6c 100644 --- a/reference/Button.html +++ b/reference/Button.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Calendar.html b/reference/Calendar.html index cb076640..92628b24 100644 --- a/reference/Calendar.html +++ b/reference/Calendar.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Callout.html b/reference/Callout.html index 97ad1728..829eb1af 100644 --- a/reference/Callout.html +++ b/reference/Callout.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Checkbox.html b/reference/Checkbox.html index 4a6bd88f..e2f6d31a 100644 --- a/reference/Checkbox.html +++ b/reference/Checkbox.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/ChoiceGroup.html b/reference/ChoiceGroup.html index edf9564d..2205fe8a 100644 --- a/reference/ChoiceGroup.html +++ b/reference/ChoiceGroup.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Coachmark.html b/reference/Coachmark.html index 7ab0076e..3a8c1013 100644 --- a/reference/Coachmark.html +++ b/reference/Coachmark.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/ColorPicker.html b/reference/ColorPicker.html index 10672346..bafe5a84 100644 --- a/reference/ColorPicker.html +++ b/reference/ColorPicker.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/ComboBox.html b/reference/ComboBox.html index 304b465f..682deba0 100644 --- a/reference/ComboBox.html +++ b/reference/ComboBox.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/CommandBar.html b/reference/CommandBar.html index 6afbae97..24601607 100644 --- a/reference/CommandBar.html +++ b/reference/CommandBar.html @@ -64,7 +64,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/CommandBarItem.html b/reference/CommandBarItem.html index 497cdad5..283079c2 100644 --- a/reference/CommandBarItem.html +++ b/reference/CommandBarItem.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/ContextualMenu.html b/reference/ContextualMenu.html index 9da71688..e251339d 100644 --- a/reference/ContextualMenu.html +++ b/reference/ContextualMenu.html @@ -30,7 +30,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/DatePicker.html b/reference/DatePicker.html index f58ac540..1e600b10 100644 --- a/reference/DatePicker.html +++ b/reference/DatePicker.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/DetailsList.html b/reference/DetailsList.html index 8daf67c9..93f8dbc5 100644 --- a/reference/DetailsList.html +++ b/reference/DetailsList.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Dialog.html b/reference/Dialog.html index d572193c..5cd06863 100644 --- a/reference/Dialog.html +++ b/reference/Dialog.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Divider.html b/reference/Divider.html index 37448c72..10b85794 100644 --- a/reference/Divider.html +++ b/reference/Divider.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/DocumentCard.html b/reference/DocumentCard.html index 317d26a6..467246a2 100644 --- a/reference/DocumentCard.html +++ b/reference/DocumentCard.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Dropdown.html b/reference/Dropdown.html index d542d20f..580bd77d 100644 --- a/reference/Dropdown.html +++ b/reference/Dropdown.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Facepile.html b/reference/Facepile.html index c5bc0cb7..d3299504 100644 --- a/reference/Facepile.html +++ b/reference/Facepile.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/FocusTrapZone.html b/reference/FocusTrapZone.html index b42c28d9..be458bb7 100644 --- a/reference/FocusTrapZone.html +++ b/reference/FocusTrapZone.html @@ -28,7 +28,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/FocusZone.html b/reference/FocusZone.html index 05c26e04..0416988d 100644 --- a/reference/FocusZone.html +++ b/reference/FocusZone.html @@ -28,7 +28,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/GroupedList.html b/reference/GroupedList.html index 982bdc0a..088788d0 100644 --- a/reference/GroupedList.html +++ b/reference/GroupedList.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/HoverCard.html b/reference/HoverCard.html index e52d4d19..5b548325 100644 --- a/reference/HoverCard.html +++ b/reference/HoverCard.html @@ -34,7 +34,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Icon.html b/reference/Icon.html index 7aaf79c0..c7eeea0a 100644 --- a/reference/Icon.html +++ b/reference/Icon.html @@ -30,7 +30,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Image.html b/reference/Image.html index 1d1837ad..3eeae325 100644 --- a/reference/Image.html +++ b/reference/Image.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Keytip.html b/reference/Keytip.html index 44217e61..5867aae1 100644 --- a/reference/Keytip.html +++ b/reference/Keytip.html @@ -32,7 +32,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Keytips.html b/reference/Keytips.html index 02480c58..2f0d4be0 100644 --- a/reference/Keytips.html +++ b/reference/Keytips.html @@ -24,7 +24,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Label.html b/reference/Label.html index 878856b9..44e4cd98 100644 --- a/reference/Label.html +++ b/reference/Label.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Layer.html b/reference/Layer.html index 8616614a..1235e796 100644 --- a/reference/Layer.html +++ b/reference/Layer.html @@ -30,7 +30,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Link.html b/reference/Link.html index 7b448510..0d7c67f8 100644 --- a/reference/Link.html +++ b/reference/Link.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/List.html b/reference/List.html index c1ef59cd..9ccef08a 100644 --- a/reference/List.html +++ b/reference/List.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/MarqueeSelection.html b/reference/MarqueeSelection.html index 477f57f9..851db920 100644 --- a/reference/MarqueeSelection.html +++ b/reference/MarqueeSelection.html @@ -36,7 +36,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/MessageBar.html b/reference/MessageBar.html index 268b781b..f857f27b 100644 --- a/reference/MessageBar.html +++ b/reference/MessageBar.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Modal.html b/reference/Modal.html index 3973c62a..81fd1110 100644 --- a/reference/Modal.html +++ b/reference/Modal.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Nav.html b/reference/Nav.html index 4755b082..0cd4a09c 100644 --- a/reference/Nav.html +++ b/reference/Nav.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/OverflowSet.html b/reference/OverflowSet.html index db814584..783cb73f 100644 --- a/reference/OverflowSet.html +++ b/reference/OverflowSet.html @@ -38,7 +38,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Overlay.html b/reference/Overlay.html index 46b5501a..8fa0319d 100644 --- a/reference/Overlay.html +++ b/reference/Overlay.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Panel.html b/reference/Panel.html index dd87f5c9..b87598c7 100644 --- a/reference/Panel.html +++ b/reference/Panel.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/PeoplePicker.html b/reference/PeoplePicker.html index 21e14e93..99f85750 100644 --- a/reference/PeoplePicker.html +++ b/reference/PeoplePicker.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Persona.html b/reference/Persona.html index 294b9ba0..de186bf3 100644 --- a/reference/Persona.html +++ b/reference/Persona.html @@ -30,7 +30,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Pickers.html b/reference/Pickers.html index 39830447..1aea6c4c 100644 --- a/reference/Pickers.html +++ b/reference/Pickers.html @@ -32,7 +32,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Pivot.html b/reference/Pivot.html index b6b4e2e2..17e84aca 100644 --- a/reference/Pivot.html +++ b/reference/Pivot.html @@ -34,7 +34,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/ProgressIndicator.html b/reference/ProgressIndicator.html index fedc92d8..55800639 100644 --- a/reference/ProgressIndicator.html +++ b/reference/ProgressIndicator.html @@ -42,7 +42,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Rating.html b/reference/Rating.html index 9aebfbdb..ec14e286 100644 --- a/reference/Rating.html +++ b/reference/Rating.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/ResizeGroup.html b/reference/ResizeGroup.html index 0744da62..38adbd3c 100644 --- a/reference/ResizeGroup.html +++ b/reference/ResizeGroup.html @@ -32,7 +32,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/ScrollablePane.html b/reference/ScrollablePane.html index 7f3c9a25..5667176a 100644 --- a/reference/ScrollablePane.html +++ b/reference/ScrollablePane.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/SearchBox.html b/reference/SearchBox.html index e60d68d7..9bfe9026 100644 --- a/reference/SearchBox.html +++ b/reference/SearchBox.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Separator.html b/reference/Separator.html index 231f157a..72fd331c 100644 --- a/reference/Separator.html +++ b/reference/Separator.html @@ -32,7 +32,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Shimmer.html b/reference/Shimmer.html index 377b1d53..9dbf16b1 100644 --- a/reference/Shimmer.html +++ b/reference/Shimmer.html @@ -28,7 +28,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Slider.html b/reference/Slider.html index fa16c0dd..dd178a57 100644 --- a/reference/Slider.html +++ b/reference/Slider.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/SpinButton.html b/reference/SpinButton.html index 7b0717e0..2113be40 100644 --- a/reference/SpinButton.html +++ b/reference/SpinButton.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Spinner.html b/reference/Spinner.html index 5c421ec3..07124661 100644 --- a/reference/Spinner.html +++ b/reference/Spinner.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Stack.html b/reference/Stack.html index 13a2b38b..5c973e36 100644 --- a/reference/Stack.html +++ b/reference/Stack.html @@ -94,7 +94,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/SwatchColorPicker.html b/reference/SwatchColorPicker.html index 3a59c379..d2f522be 100644 --- a/reference/SwatchColorPicker.html +++ b/reference/SwatchColorPicker.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/TeachingBubble.html b/reference/TeachingBubble.html index 99388e37..799d9afd 100644 --- a/reference/TeachingBubble.html +++ b/reference/TeachingBubble.html @@ -28,7 +28,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Text.html b/reference/Text.html index e6c886c5..1293f677 100644 --- a/reference/Text.html +++ b/reference/Text.html @@ -30,7 +30,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/TextField.html b/reference/TextField.html index abbd8305..821e30bf 100644 --- a/reference/TextField.html +++ b/reference/TextField.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Theme.html b/reference/Theme.html index 12909749..430ee629 100644 --- a/reference/Theme.html +++ b/reference/Theme.html @@ -30,7 +30,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Toggle.html b/reference/Toggle.html index b36a1e9d..0799a111 100644 --- a/reference/Toggle.html +++ b/reference/Toggle.html @@ -26,7 +26,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/Tooltip.html b/reference/Tooltip.html index 24d861b5..cc66f1a7 100644 --- a/reference/Tooltip.html +++ b/reference/Tooltip.html @@ -36,7 +36,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/component.html b/reference/component.html index 69ef3228..e8bf931e 100644 --- a/reference/component.html +++ b/reference/component.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/fluentPage.html b/reference/fluentPage.html index a4fd423e..3fd3c6af 100644 --- a/reference/fluentPage.html +++ b/reference/fluentPage.html @@ -22,7 +22,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/fluentPeople.html b/reference/fluentPeople.html index 65b6a559..b3acd4dd 100644 --- a/reference/fluentPeople.html +++ b/reference/fluentPeople.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/fluentSalesDeals.html b/reference/fluentSalesDeals.html index f2bb2a89..0054599c 100644 --- a/reference/fluentSalesDeals.html +++ b/reference/fluentSalesDeals.html @@ -24,7 +24,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/index.html b/reference/index.html index a715aac8..89a9f1ed 100644 --- a/reference/index.html +++ b/reference/index.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/parseTheme.html b/reference/parseTheme.html index a8c23f70..5736ab08 100644 --- a/reference/parseTheme.html +++ b/reference/parseTheme.html @@ -22,7 +22,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/reexports.html b/reference/reexports.html index de89e209..18978512 100644 --- a/reference/reexports.html +++ b/reference/reexports.html @@ -34,7 +34,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/runExample.html b/reference/runExample.html index 12c82bc6..2a1b3ff5 100644 --- a/reference/runExample.html +++ b/reference/runExample.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/shinyFluentDependency.html b/reference/shinyFluentDependency.html index 490f2be8..e820156d 100644 --- a/reference/shinyFluentDependency.html +++ b/reference/shinyFluentDependency.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/reference/shinyInput.html b/reference/shinyInput.html index 3f9eb855..8fef2279 100644 --- a/reference/shinyInput.html +++ b/reference/shinyInput.html @@ -20,7 +20,7 @@ shiny.fluent - 0.3.0.900 + 0.4.0 diff --git a/search.json b/search.json index 531b26fc..b306adf2 100644 --- a/search.json +++ b/search.json @@ -1 +1 @@ -[{"path":"https://appsilon.github.io/shiny.fluent/CONTRIBUTING.html","id":null,"dir":"","previous_headings":"","what":"Contributing to shiny.fluent","title":"Contributing to shiny.fluent","text":"welcome contributions shiny.fluent shiny.react!","code":""},{"path":"https://appsilon.github.io/shiny.fluent/CONTRIBUTING.html","id":"fixing-typos","dir":"","previous_headings":"","what":"Fixing typos","title":"Contributing to shiny.fluent","text":"’re welcome make small fixes documentation without discussing - simply please go ahead open pull request change. R help, make sure edit .R file, processed docs .Rmd","code":""},{"path":"https://appsilon.github.io/shiny.fluent/CONTRIBUTING.html","id":"issues","dir":"","previous_headings":"","what":"Issues","title":"Contributing to shiny.fluent","text":"make bigger pull request, please open issue make sure one maintainers agrees problem proposed solution. ’ve found bug, please create bug report issue illustrate bug minimal reprex.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/CONTRIBUTING.html","id":"bug-reports","dir":"","previous_headings":"","what":"Bug reports","title":"Contributing to shiny.fluent","text":"Please provide code example bug ’re encountering. good code example meet following criteria: Minimal: include essential code needed illustrate problem. Remove extraneous code isn’t directly related issue hand. Complete: Include everything someone else need run example, full contents app.R file. Reproducible: Ensure problem actually appears example. Include information like R package version, operating system, browser. Readable: Use individual Markdown code blocks file code snippet. Use proper indentation, comments, descriptive names. Check Reprex ’s don’ts even great tips. Providing good code example crucial us reproduce understand bug. increases likelihood addressing issue quickly effectively.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/CONTRIBUTING.html","id":"pull-request-process","dir":"","previous_headings":"","what":"Pull request process","title":"Contributing to shiny.fluent","text":"New code follow tidyverse style guide. use roxygen2 documentation, preference Markdown syntax. use testthat. Please make sure include tests PR. user-facing changes, add bullet top NEWS.md current development version header describing changes made followed GitHub username, links relevant issue(s)/PR(s).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/PULL_REQUEST_TEMPLATE.html","id":"changes","dir":"","previous_headings":"","what":"Changes","title":"NA","text":"Closes #","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/articles/shiny-fluent.html","id":"shiny-fluent-hello-world-app","dir":"Articles","previous_headings":"","what":"shiny.fluent “Hello world!” app","title":"Tutorial: Create your first shiny.fluent dashboard","text":"Let’s start creating app shows “Hello world!”, Fluent UI. First, need load shiny.fluent. gives us need run basic application! create UI showing welcome message, use Fluent component named ?Text. ’ll put ?fluentPage, add proper CSS classes suppress Bootstrap (use Bootstrap Fluent UI time). Let’s see app looks like right now. Yay! may look impressive, text rendered Shiny whole power Fluent UI React.","code":"library(shiny) library(shiny.fluent) ui <- fluentPage( Text(variant = \"xxLarge\", \"Hello world!\") ) server <- function(input, output, session) {} shinyApp(ui, server)"},{"path":"https://appsilon.github.io/shiny.fluent/articles/shiny-fluent.html","id":"showing-data-in-a-table","dir":"Articles","previous_headings":"","what":"Showing data in a table","title":"Tutorial: Create your first shiny.fluent dashboard","text":"Let’s now grab data show users table. shiny.fluent already includes example data can use. fluentPeople list imaginary people format expected Fluent components. fluentSalesData data frame randomly generated “sales deals”, assigned one fluentPeople, date amount, associated one top 10 companies Fortune 500 list (including name, city map coordinates). now need Fluent component insert table. good way find component suits needs launch showcase dashboard shiny.fluent::runExample(\"dashboard\") visit official Fluent UI docs. Browsing list components, find ?DetailsList, gives table component rich configuration options. First, need define columns deals data want see label . Let’s now display sales deals table. plan later make table change dynamically, put regular Shiny uiOutput. Let’s also assume now want filter deals is_closed equal 1. addition ?DetailsList ?Text, code used ?Stack, arranges elements area.","code":"fluentPeople %>% glimpse() #> Rows: 7 #> Columns: 11 #> $ key 1, 2, 3, 4, 5, 6, 7 #> $ imageUrl \"https://static2.sharepointonline.com/files/fabric/offic… #> $ imageInitials \"PV\", \"AR\", \"AL\", \"RK\", \"CB\", \"VL\", \"MS\" #> $ text \"Annie Lindqvist\", \"Aaron Reid\", \"Alex Lundberg\", \"Roko … #> $ secondaryText \"Senior Sales Rep\", \"Sales Rep\", \"Junior Sales Rep\", \"Se… #> $ tertiaryText \"In a meeting\", \"In a meeting\", \"In a meeting\", \"In a me… #> $ optionalText \"Available at 4:00pm\", \"Available at 4:00pm\", \"Available… #> $ isValid TRUE, TRUE, TRUE, TRUE, TRUE, TRUE, TRUE #> $ presence 2, 6, 4, 1, 2, 2, 3 #> $ canExpand NA, NA, NA, NA, NA, NA, NA #> $ color \"#8DD3C7\", \"#FFFFB3\", \"#BEBADA\", \"#FB8072\", \"#80B1D3\", \"… fluentSalesDeals %>% glimpse() #> Rows: 100 #> Columns: 30 #> $ X -8286952, -13595427, -13625773, -13595427, -8286952, -8234… #> $ Y 4938582, 6047180, 4550281, 6047180, 4938582, 4976415, 4938… #> $ FID 493, 234, 425, 234, 493, 333, 493, 284, 333, 284, 425, 234… #> $ OBJECTID 493, 234, 425, 234, 493, 333, 493, 284, 333, 284, 425, 234… #> $ RANK 35, 28, 25, 28, 35, 21, 35, 26, 21, 26, 25, 28, 28, 21, 21… #> $ NAME \"JOHNSON & JOHNSON\", \"MICROSOFT\", \"WELLS FARGO\", \"MICROSOF… #> $ ADDRESS \"1 JOHNSON AND JOHNSON PLAZA\", \"1 MICROSOFT WAY\", \"420 MON… #> $ ADDRESS2 \"NOT AVAILABLE\", \"NOT AVAILABLE\", \"NOT AVAILABLE\", \"NOT AV… #> $ CITY \"NEW BRUNSWICK\", \"REDMOND\", \"SAN FRANCISCO\", \"REDMOND\", \"N… #> $ STATE \"NJ\", \"WA\", \"CA\", \"WA\", \"NJ\", \"NY\", \"NJ\", \"NC\", \"NY\", \"NC\"… #> $ ZIP \"08933\", \"98052\", \"94163\", \"98052\", \"08933\", \"10017\", \"089… #> $ COUNTY \"MIDDLESEX\", \"KING\", \"SAN FRANCISCO\", \"KING\", \"MIDDLESEX\",… #> $ EMPLOYEES 126400, 114000, 269100, 114000, 126400, 243355, 126400, 20… #> $ REVENUES 71890, 85320, 94176, 85320, 71890, 105486, 71890, 93662, 1… #> $ LATITUDE 40.49804, 47.64005, 37.79340, 47.64005, 40.49804, 40.75598… #> $ LONGITUDE -74.44296, -122.12980, -122.40240, -122.12980, -74.44296, … #> $ SOURCE \"MANUAL\", \"BING MAPS\", \"BING MAPS\", \"BING MAPS\", \"MANUAL\",… #> $ PRC \"ON-ENTITY\", \"ADDRESS\", \"ADDRESS\", \"ADDRESS\", \"ON-ENTITY\",… #> $ COUNTYFIPS \"34023\", \"53033\", \"06075\", \"53033\", \"34023\", \"36061\", \"340… #> $ COMMENTS \"NOT AVAILABLE\", \"NOT AVAILABLE\", \"NOT AVAILABLE\", \"NOT AV… #> $ WEBSITE \"HTTPS://WWW.JNJ.COM/\", \"HTTPS://WWW.MICROSOFT.COM/EN-US/\"… #> $ PROFIT 16540, 16798, 21938, 16798, 16540, 24733, 16540, 17906, 24… #> $ deal_amount 855987, 753174, 702208, 590190, 405443, 714723, 455713, 80… #> $ rep_id 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2… #> $ rep_name \"Annie Lindqvist\", \"Annie Lindqvist\", \"Annie Lindqvist\", \"… #> $ date 2020-02-19, 2020-08-18, 2020-10-14, 2020-02-23, 2020-10-1… #> $ client_name \"JOHNSON & JOHNSON\", \"MICROSOFT\", \"WELLS FARGO\", \"MICROSOF… #> $ city \"NEW BRUNSWICK\", \"REDMOND\", \"SAN FRANCISCO\", \"REDMOND\", \"N… #> $ color \"#8DD3C7\", \"#8DD3C7\", \"#8DD3C7\", \"#8DD3C7\", \"#8DD3C7\", \"#8… #> $ is_closed 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1… details_list_columns <- tibble( fieldName = c(\"rep_name\", \"date\", \"deal_amount\", \"client_name\", \"city\", \"is_closed\"), name = c(\"Sales rep\", \"Close date\", \"Amount\", \"Client\", \"City\", \"Is closed?\"), key = fieldName) ui <- fluentPage( uiOutput(\"analysis\") ) server <- function(input, output, session) { filtered_deals <- reactive({ filtered_deals <- fluentSalesDeals %>% filter(is_closed > 0) }) output$analysis <- renderUI({ items_list <- if(nrow(filtered_deals()) > 0){ DetailsList(items = filtered_deals(), columns = details_list_columns) } else { p(\"No matching transactions.\") } Stack( tokens = list(childrenGap = 5), Text(variant = \"large\", \"Sales deals details\", block = TRUE), div(style=\"max-height: 500px; overflow: auto\", items_list) ) }) } shinyApp(ui, server)"},{"path":"https://appsilon.github.io/shiny.fluent/articles/shiny-fluent.html","id":"adding-filtering","dir":"Articles","previous_headings":"","what":"Adding filtering","title":"Tutorial: Create your first shiny.fluent dashboard","text":"Okay, already looks good! ’s hard explore data without filtering options - let’s add now. start adding option find transactions selected dates. use two ?DatePicker components allow users choose date range. make selected dates available server function, two options: simple way. Use DatePicker.shinyInput convenience wrapper, provides interface analogous vanilla Shiny inputs: inputId optional value. advanced way. Use component directly connect Shiny using React interface: onSelectDate defaultValue case. second option less convenient might provide power flexibility cases. ’ll go first option tutorial, simplified interface sufficient needs. Let’s add filters UI: server function application, can now access input values using IDs provided way Shiny input. Let’s use selected dates apply additional filtering deals: application looks like now:","code":"filters <- tagList( DatePicker.shinyInput(\"fromDate\", value = as.Date('2020/01/01'), label = \"From date\"), DatePicker.shinyInput(\"toDate\", value = as.Date('2020/12/31'), label = \"To date\") ) ui <- fluentPage( filters, uiOutput(\"analysis\") ) server <- function(input, output, session) { filtered_deals <- reactive({ req(input$fromDate) filtered_deals <- fluentSalesDeals %>% filter( date >= input$fromDate, date <= input$toDate, is_closed > 0 ) })"},{"path":"https://appsilon.github.io/shiny.fluent/articles/shiny-fluent.html","id":"more-filters","dir":"Articles","previous_headings":"","what":"More filters","title":"Tutorial: Create your first shiny.fluent dashboard","text":"Let’s add filtering options app! use following components: ?NormalPeoplePicker limit search selected sales representatives, ?Slider define minimum deal size, ?Toggle show closed deals. addition ’ll use ?Stack ?Label visually arrange filtering controls. Now multiple filtering controls, good idea add visual separation table. Let’s define helper function create Fluent UI cards: Now can wrap filters call makeCard(). Additionally, include style tag add padding margin cards created helper function. Let’s move attention server function. can access values filtering controls using provided IDs just like . Finally, let’s refactor table output wrap card. filtering much useful now!","code":"filters <- Stack( tokens = list(childrenGap = 10), Stack( horizontal = TRUE, tokens = list(childrenGap = 10), DatePicker.shinyInput(\"fromDate\", value = as.Date('2020/01/01'), label = \"From date\"), DatePicker.shinyInput(\"toDate\", value = as.Date('2020/12/31'), label = \"To date\") ), Label(\"Filter by sales reps\", className = \"my_class\"), NormalPeoplePicker.shinyInput( \"selectedPeople\", class = \"my_class\", options = fluentPeople, pickerSuggestionsProps = list( suggestionsHeaderText = 'Matching people', mostRecentlyUsedHeaderText = 'Sales reps', noResultsFoundText = 'No results found', showRemoveButtons = TRUE ) ), Slider.shinyInput(\"slider\", value = 0, min = 0, max = 1000000, step = 100000, label = \"Minimum amount\", valueFormat = JS(\"function(x) { return '$' + x}\"), snapToStep = TRUE ), Toggle.shinyInput(\"closedOnly\", value = TRUE, label = \"Include closed deals only?\") ) makeCard <- function(title, content, size = 12, style = \"\") { div( class = glue(\"card ms-depth-8 ms-sm{size} ms-xl{size}\"), style = style, Stack( tokens = list(childrenGap = 5), Text(variant = \"large\", title, block = TRUE), content ) ) } ui <- fluentPage( tags$style(\".card { padding: 28px; margin-bottom: 28px; }\"), makeCard(\"Filters\", filters, size = 4, style = \"max-height: 320px;\"), uiOutput(\"analysis\") ) server <- function(input, output, session) { filtered_deals <- reactive({ req(input$fromDate) selectedPeople <- ( if (length(input$selectedPeople) > 0) input$selectedPeople else fluentPeople$key ) minClosedVal <- if (isTRUE(input$closedOnly)) 1 else 0 filtered_deals <- fluentSalesDeals %>% filter( rep_id %in% selectedPeople, date >= input$fromDate, date <= input$toDate, deal_amount >= input$slider, is_closed >= minClosedVal ) %>% mutate(is_closed = ifelse(is_closed == 1, \"Yes\", \"No\")) }) makeCard(\"Top results\", div(style=\"max-height: 500px; overflow: auto\", items_list))"},{"path":"https://appsilon.github.io/shiny.fluent/articles/shiny-fluent.html","id":"more-outputs","dir":"Articles","previous_headings":"","what":"More outputs","title":"Tutorial: Create your first shiny.fluent dashboard","text":"limited shiny.fluent components - can seamlessly use libraries app! Let’s add Plotly plot Leaflet map. start adding plotlyOutput() UI: also add leafletOutput() UI generated server function: Now can add following code server function render bar chart map: Look dashboard now!","code":"ui <- fluentPage( tags$style(\".card { padding: 28px; margin-bottom: 28px; }\"), Stack( tokens = list(childrenGap = 10), horizontal = TRUE, makeCard(\"Filters\", filters, size = 4, style = \"max-height: 320px\"), makeCard(\"Deals count\", plotlyOutput(\"plot\"), size = 8, style = \"max-height: 320px\") ), uiOutput(\"analysis\") ) Stack( tokens = list(childrenGap = 10), horizontal = TRUE, makeCard(\"Top results\", div(style=\"max-height: 500px; overflow: auto\", items_list)), makeCard(\"Map\", leafletOutput(\"map\")) ) output$map <- renderLeaflet({ points <- cbind(filtered_deals()$LONGITUDE, filtered_deals()$LATITUDE) leaflet() %>% addProviderTiles(providers$Stamen.TonerLite, options = providerTileOptions(noWrap = TRUE)) %>% addMarkers(data = points) }) output$plot <- renderPlotly({ p <- ggplot(filtered_deals(), aes(x = rep_name)) + geom_bar(fill = unique(filtered_deals()$color)) + ylab(\"Number of deals\") + xlab(\"Sales rep\") + theme_light() ggplotly(p, height = 300) })"},{"path":"https://appsilon.github.io/shiny.fluent/articles/shiny-fluent.html","id":"the-end-result","dir":"Articles","previous_headings":"","what":"The end result","title":"Tutorial: Create your first shiny.fluent dashboard","text":"tutorial built simple dashboard exploring sales representatives data. learned use shiny.fluent inputs outputs, add components libraries use Fluent UI capabilities visually arranging elements.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"prerequisites","dir":"Articles","previous_headings":"","what":"Prerequisites","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"starting code Part 1 ends . Let’s start changing beginning file load libraries use example. Make sure install ones don’t yet installed ().","code":"library(dplyr) library(ggplot2) library(glue) library(leaflet) library(plotly) library(sass) library(shiny) library(shiny.fluent) library(shiny.router)"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"single-page-layout","dir":"Articles","previous_headings":"","what":"Single page layout","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"next step, let’s add title subtitle current app. ’ll create helper function call makePage, easy add pages fashion. can now take entire UI built far put “page” layout, giving helpful title subtitle.","code":"makePage <- function (title, subtitle, contents) { tagList(div( class = \"page-title\", span(title, class = \"ms-fontSize-32 ms-fontWeight-semibold\", style = \"color: #323130\"), span(subtitle, class = \"ms-fontSize-14 ms-fontWeight-regular\", style = \"color: #605E5C; margin: 14px;\") ), contents) } analysis_page <- makePage( \"Sales representatives\", \"Best performing reps\", div( Stack( horizontal = TRUE, tokens = list(childrenGap = 10), makeCard(\"Filters\", filters, size = 4, style = \"max-height: 320px\"), makeCard(\"Deals count\", plotlyOutput(\"plot\"), size = 8, style = \"max-height: 320px\") ), uiOutput(\"analysis\") ) ) ui <- fluentPage( tags$style(\".card { padding: 28px; margin-bottom: 28px; }\"), analysis_page )"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"dashboard-layout","dir":"Articles","previous_headings":"","what":"Dashboard Layout","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"’s time create place header, navigation sidebar footer. ’ll use CSS grid . ’s modern, flexible staightforward way achieve layout. start creating divs areas, placeholder texts later replace. Now ’s time tell browser using CSS arrange areas. define areas laid page, let’s put following rules www/style.css: can also use opportunity add additional styling entire page, add following rules file: Now need update UI definition load styles www/style.css use new layout.","code":"header <- \"header\" navigation <- \"navigation\" footer <- \"footer\" layout <- function(mainUI){ div(class = \"grid-container\", div(class = \"header\", header), div(class = \"sidenav\", navigation), div(class = \"main\", mainUI), div(class = \"footer\", footer) ) } .grid-container { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: 54px 1fr 45px; grid-template-areas: \"header header\" \"sidenav main\" \"footer footer\"; height: 100vh; } .header { grid-area: header; background-color: #fff; padding: 6px 0px 6px 10px; display: flex; } .main { grid-area: main; background-color: #faf9f8; padding-left: 40px; padding-right: 32px; max-width: calc(100vw - 400px); max-height: calc(100vh - 100px); overflow: auto; } .footer { grid-area: footer; background-color: #f3f2f1; padding: 12px 20px; } .sidenav { grid-area: sidenav; background-color: #fff; padding: 25px; } body { background-color: rgba(225, 223, 221, 0.2); min-height: 611px; margin: 0; } .page-title { padding: 52px 0px; } .card { background: #fff; padding: 28px; margin-bottom: 28px; border-radius: 2px; background-clip: padding-box; } ui <- fluentPage( layout(analysis_page), tags$head( tags$link(href = \"style.css\", rel = \"stylesheet\", type = \"text/css\") ))"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"filling-all-the-areas","dir":"Articles","previous_headings":"","what":"Filling all the areas","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"Great! Now ’s time fill areas something. can start header.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"header","dir":"Articles","previous_headings":"Filling all the areas","what":"Header","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"Let’s replace previous header definition : can see, ’re using CommandBar CommandBarItem shiny.fluent. also need add bit styling CSS file:","code":"header <- tagList( img(src = \"appsilon-logo.png\", class = \"logo\"), div(Text(variant = \"xLarge\", \"Sales Reps Analysis\"), class = \"title\"), CommandBar( items = list( CommandBarItem(\"New\", \"Add\", subitems = list( CommandBarItem(\"Email message\", \"Mail\", key = \"emailMessage\", href = \"mailto:me@example.com\"), CommandBarItem(\"Calendar event\", \"Calendar\", key = \"calendarEvent\") )), CommandBarItem(\"Upload sales plan\", \"Upload\"), CommandBarItem(\"Share analysis\", \"Share\"), CommandBarItem(\"Download report\", \"Download\") ), farItems = list( CommandBarItem(\"Grid view\", \"Tiles\", iconOnly = TRUE), CommandBarItem(\"Info\", \"Info\", iconOnly = TRUE) ), style = list(width = \"100%\"))) .title { padding: 0px 14px 0px 14px; color: #737373; margin: 6px 0px 6px 10px; border-left: 1px solid darkgray; width: 220px; } .logo { height: 44px; }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"navigation-in-the-sidebar","dir":"Articles","previous_headings":"Filling all the areas","what":"Navigation in the sidebar","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"Nav powerful component Fluent UI. rich configuration options, use show just couple links:","code":"navigation <- Nav( groups = list( list(links = list( list(name = 'Home', url = '#!/', key = 'home', icon = 'Home'), list(name = 'Analysis', url = '#!/other', key = 'analysis', icon = 'AnalyticsReport'), list(name = 'shiny.fluent', url = 'http://github.com/Appsilon/shiny.fluent', key = 'repo', icon = 'GitGraph'), list(name = 'shiny.react', url = 'http://github.com/Appsilon/shiny.react', key = 'shinyreact', icon = 'GitGraph'), list(name = 'Appsilon', url = 'http://appsilon.com', key = 'appsilon', icon = 'WebAppBuilderFragment') )) ), initialSelectedKey = 'home', styles = list( root = list( height = '100%', boxSizing = 'border-box', overflowY = 'auto' ) ) )"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"footer","dir":"Articles","previous_headings":"Filling all the areas","what":"Footer","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"Footer relatively straightforward - can put anything want . use Text typography (setting uniform font styling). also use Stack arrange elements horizontally bigger gaps. Let’s see looks together.","code":"footer <- Stack( horizontal = TRUE, horizontalAlign = 'space-between', tokens = list(childrenGap = 20), Text(variant = \"medium\", \"Built with ❤ by Appsilon\", block=TRUE), Text(variant = \"medium\", nowrap = FALSE, \"If you'd like to learn more, reach out to us at hello@appsilon.com\"), Text(variant = \"medium\", nowrap = FALSE, \"All rights reserved.\") ) layout <- function(mainUI){ div(class = \"grid-container\", div(class = \"header\", header), div(class = \"sidenav\", navigation), div(class = \"main\", mainUI), div(class = \"footer\", footer) ) } # --- ui <- fluentPage( layout(analysis_page), tags$head( tags$link(href = \"style.css\", rel = \"stylesheet\", type = \"text/css\") ))"},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"home-page","dir":"Articles","previous_headings":"Additional pages","what":"Home page","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"one final step add additional pages. Let’s make home page, consisting two cards welcome text. replace analysis_page home_page ui, can even see page. However, ’s one problem: don’t way switch pages! -called page routing comes play.","code":"card1 <- makeCard( \"Welcome to shiny.fluent demo!\", div( Text(\"shiny.fluent is a package that allows you to build Shiny apps using Microsoft's Fluent UI.\"), Text(\"Use the menu on the left to explore live demos of all available components.\") )) card2 <- makeCard( \"shiny.react makes it easy to use React libraries in Shiny apps.\", div( Text(\"To make a React library convenient to use from Shiny, we need to write an R package that wraps it - for example, a shiny.fluent package for Microsoft's Fluent UI, or shiny.blueprint for Palantir's Blueprint.js.\"), Text(\"Communication and other issues in integrating Shiny and React are solved and standardized in shiny.react package.\"), Text(\"shiny.react strives to do as much as possible automatically, but there's no free lunch here, so in all cases except trivial ones you'll need to do some amount of manual work. The more work you put into a wrapper package, the less work your users will have to do while using it.\") )) home_page <- makePage( \"This is a Fluent UI app built in Shiny\", \"shiny.react + Fluent UI = shiny.fluent\", div(card1, card2) )"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"adding-shiny-router","dir":"Articles","previous_headings":"Additional pages","what":"Adding shiny.router","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"enable switching pages use shiny.router package. way also shareable URLs individual pages. first step define available routes: Now, need put router place want selected page appear. One final step add single line server function, otherwise remains untouched Part 1 tutorial.","code":"router <- router_ui( route(\"/\", home_page), route(\"other\", analysis_page) ) ui <- fluentPage( layout(router), tags$head( tags$link(href = \"style.css\", rel = \"stylesheet\", type = \"text/css\") )) router_server()"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-sales-reps-dashboard.html","id":"thats-it","dir":"Articles","previous_headings":"","what":"That’s it!","title":"Tutorial: Full dashboard UI in Shiny and Fluent","text":"’s - styled shiny.fluent app solid dashboard layout!","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"getting-started-with-our-development-environment","dir":"Articles","previous_headings":"Hello World with rhino and shiny.fluent","what":"Getting started with our development environment","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"Let us first install create rhino project structure. Note: Ensure Rhino v1.4.0 later installed tutorial. install rhino, please run following R console: Now, initialize new rhino application. can either using RStudio Wizard function rhino::init(). details create Rhino app can found  Rhino tutorial. notice working directory now proper folder structure along files. Rhino relies  renv package dependency management. add shiny.fluent package project, first, need install . Additionally, also using dplyr, ggplot2, plotly tibble package application. save us time tutorial install . Please note every new package add, need install , add dependencies.R, run renv::snapshot() update renv.lock file. Now packages installed, head dependencies.R file add shiny.fluent along others shown . Upon saving modified file, please take snapshot dependencies renv.lock file updated. now check renv.lock file, see updated shiny.fluent packages.","code":"# In R console install.packages(\"rhino\") # In R console renv::install(c(\"dplyr\", \"ggplot2\", \"plotly\", \"shiny.fluent\", \"tibble\")) # dependencies.R # This file allows packrat (used by rsconnect during deployment) to pick up dependencies. library(dplyr) library(ggplot2) library(plotly) library(rhino) library(shiny.fluent) library(tibble) # In R console renv::snaphot()"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"our-first-development-on-the-app","dir":"Articles","previous_headings":"Hello World with rhino and shiny.fluent","what":"Our first development on the app","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"Upon viewing default app/main.R file, notice code usage shiny.fluent package generate UI. , let us introduce shiny.fluent use code generate text! code uses fluentPage Text shiny.fluent package render UI sentence - “Sales Data Dashboard”. also notice NS(id) used code return namespace function, saved ns invoked later shiny module. Now run app, seeing - Note: check built-testcases changes introduced, running rhino::test_r() give errors. avoid failed GitHub Actions now (case pushing code GitHub), may empty test cases present tests/testthat/test-main.R.","code":"# app/main.R box::use( shiny[moduleServer, NS], shiny.fluent[fluentPage, Text], ) #' @export ui <- function(id) { ns <- NS(id) fluentPage( Text(\"Sales Data Dashboard\", variant = \"xxLarge\") ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"show-data-in-a-table-via-a-rhino-module","dir":"Articles","previous_headings":"","what":"Show Data in a Table via a rhino module","title":"Tutorial: Build a Rhino application using shiny.fluent","text":", section, introduce table application displays random imaginary sales deals. dataset comes shiny.fluent package - fluentSalesDeals.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"creating-the-module","dir":"Articles","previous_headings":"Show Data in a Table via a rhino module","what":"Creating the module","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"app/view/ folder, let us create new file name datatable.R app/view/datatable.R file used display data table UI call module app/main.R file done. code fluentSalesDeals dataset available shiny.fluent package. , using DetailsList function server side render table UI.","code":"# app/view/datatable.R box::use( shiny[div, moduleServer, NS, renderUI, uiOutput], shiny.fluent[DetailsList, Text, fluentSalesDeals], ) #' @export ui <- function(id) { ns <- NS(id) div( Text(\"A randomly generated dataset of imaginary sales deals\", variant = \"large\"), uiOutput(ns(\"datatable\")) ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { output$datatable <- renderUI({ DetailsList(items = fluentSalesDeals) }) }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"calling-the-module","dir":"Articles","previous_headings":"Show Data in a Table via a rhino module","what":"Calling the module","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"shiny module app/view/datatable.R ready, unless call app/main.R file, won’t see changes app. Let us thus go app/main.R file edit following code - code app/main.R file based concept Shiny modules box modules rhino used. Notice called datatable module importing main application file first. now, main module able use exported functions app/view/datatable.R module. Now run app. seeing something like -","code":"# app/main.R box::use( shiny[moduleServer, NS], shiny.fluent[fluentPage, Text], ) box::use( app/view/datatable, ) #' @export ui <- function(id) { ns <- NS(id) fluentPage( Text(\"Sales Data Dashboard\", variant = \"xxLarge\"), datatable$ui(ns(\"datatable\")) ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { datatable$server(\"datatable\") }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"show-informative-columns-with-meaningful-names","dir":"Articles","previous_headings":"Show Data in a Table via a rhino module","what":"Show informative columns with meaningful names","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"display columns come dataset. Instead, display \"rep_name\", \"date\", \"deal_amount\", \"city\", \"is_closed\" columns. need make names readable. , assign proper names every fields using tibble package. Also, need mention DetailsList() function display names just assigned columns object. code gets modified - Remember include tibble inside box::use(), else code able use package. Upon running app changes, see improved table -","code":"columns <- tibble( fieldName = c(\"rep_name\", \"date\", \"deal_amount\", \"city\", \"is_closed\"), name = c(\"Sales Rep\", \"Date\", \"Deal Amount\", \"City\", \"Is Closed?\") ) # app/view/datatable.R box::use( shiny[div, moduleServer, NS, renderUI, uiOutput], shiny.fluent[DetailsList, Text, fluentSalesDeals], tibble[tibble], ) columns <- tibble( fieldName = c(\"rep_name\", \"date\", \"deal_amount\", \"city\", \"is_closed\"), name = c(\"Sales Rep\", \"Date\", \"Deal Amount\", \"City\", \"Is Closed?\") ) #' @export ui <- function(id) { ns <- NS(id) div( Text(\"A randomly generated dataset of imaginary sales deals\", variant = \"large\"), uiOutput(ns(\"datatable\")) ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { output$datatable <- renderUI({ # This issue should be solved in the next `box` release. DetailsList(items = fluentSalesDeals, columns = columns) }) }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"add-a-simple-toggle-input-feature-for-the-table-with-basic-styling","dir":"Articles","previous_headings":"","what":"Add a simple toggle input feature for the table with basic styling","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"Till now, view table data . now add functionality view rows table value “Closed?” column 1 default provide toggle user also include results value 0. “Closed?” column basically indicates whether deal closed values 0 1 0 means False/1 means True/Yes. make use dplyr package now. use Toggle.shinyInput shiny.fluent package represents physical switch allows someone choose two mutually exclusive options. example,“/”,“Show/Hide”. Choosing option produce immediate result. UI, include code showing toggle input - Toggle.shinyInput(ns(\"includeOpen\"), label = \"Include open deals\"), work input provided inside server section , app/view/datatable.R file now modified - code used determine whether open deals (.e. deals closed) included filtered data . | symbol two conditions logical operator, means filter() function return rows either is_closed TRUE input$includeOpen TRUE. Also, please notice added additional style class ms-depth-4 app/style/main.scss file. ms-depth-X classes part Microsoft’s Fluent UI provide elevation (depth) components. app/style/main.scss file now - try running application right now, see changes. rhino uses minified app/static/app.min.css styling. use , need build using rhino function - Please refer rhino documentation details styling. , app looks works now!","code":"# app/view/datatable.R box::use( dplyr[filter], shiny[div, moduleServer, NS, reactive, renderUI, uiOutput], shiny.fluent[DetailsList, Text, Toggle.shinyInput, fluentSalesDeals], tibble[tibble], ) columns <- tibble( fieldName = c(\"rep_name\", \"date\", \"deal_amount\", \"city\", \"is_closed\"), name = c(\"Sales Rep\", \"Date\", \"Deal Amount\", \"City\", \"Is Closed?\") ) #' @export ui <- function(id) { ns <- NS(id) div( Text(\"A randomly generated dataset of imaginary sales deals\", variant = \"large\"), div( class = \"ms-depth-4\", Toggle.shinyInput(ns(\"includeOpen\"), label = \"Include open deals\") ), uiOutput(ns(\"datatable\")), ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { filtered_deals <- reactive({ fluentSalesDeals |> filter( is_closed | input$includeOpen ) }) output$datatable <- renderUI({ DetailsList(items = filtered_deals(), columns = columns) }) }) } // app/style/main.scss .ms-depth-4 { display: flex; flex-wrap: wrap; padding: 5px; } # in R console rhino::build_sass()"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"improve-visuals-and-layout-for-the-table-with-elevated-cards","dir":"Articles","previous_headings":"","what":"Improve visuals and layout for the table with elevated cards","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"can create cards elevations just like Fluent UI documentation, partially covered . creating cards, can use Stack shiny.fluent. also style data table area. following code following - Confines height width table area. Creates elevated card around data table area. Stack element code allows stacking multiple elements vertically horizontally. horizontal argument set TRUE horizontally stack two elements. tokens argument list specifies padding gap two elements. case, padding set 20 childrenGap set 10. add padding 20 pixels gap 10 pixels span Stack element. span element class attribute set ms-depth-8. class provided Microsoft fluent UI adds shadow effect element, giving depth effect. uiOutput element used render DetailsList element contains filtered data. additional style class ms-depth-8 added app/style/main.scss file. now modified - Sass code limits height table 500 pixels, width 50% screen size allows scrolling data. Similar previous usecase, repeat Sass building process rhino file updated. , UI look now - Note now space beside table additional UI component(s).","code":"# app/view/datatable.R box::use( dplyr[filter], shiny[div, moduleServer, NS, reactive, renderUI, span, uiOutput], shiny.fluent[DetailsList, Stack, Text, Toggle.shinyInput, fluentSalesDeals], tibble[tibble], ) columns <- tibble( fieldName = c(\"rep_name\", \"date\", \"deal_amount\", \"city\", \"is_closed\"), name = c(\"Sales Rep\", \"Date\", \"Deal Amount\", \"City\", \"Is Closed?\") ) #' @export ui <- function(id) { ns <- NS(id) div( Text(\"A randomly generated dataset of imaginary sales deals\", variant = \"large\"), div( class = \"ms-depth-4\", Toggle.shinyInput(ns(\"includeOpen\"), label = \"Include open deals\") ), Stack( horizontal = TRUE, tokens = list(padding = 20, childrenGap = 10), span(class = \"ms-depth-8\", uiOutput(ns(\"datatable\"))) ) ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { filtered_deals <- reactive({ fluentSalesDeals |> filter( is_closed | input$includeOpen ) }) output$datatable <- renderUI({ DetailsList(items = filtered_deals(), columns = columns) }) }) } // app/style/main.scss .ms-depth-4 { display: flex; flex-wrap: wrap; padding: 5px; } .ms-depth-8 { height: 500px; overflow: overlay; width: 50%; display: inline-block; } # in R console rhino::build_sass()"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"create-separate-rhino-modules-for-toggle-input-and-datatable","dir":"Articles","previous_headings":"","what":"Create separate rhino modules for toggle input and datatable","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"Now successfully introduced datatable toggle input application, let us create different Rhino modules ! already datatable module us. thus create one module - app/view/toggle.R make modifications app/view/datatable. modules called main file.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"the-appviewtoggle-r-module","dir":"Articles","previous_headings":"Create separate rhino modules for toggle input and datatable","what":"The app/view/toggle.R module","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"module displays toggle input item UI user can interact . styling remains discussed previous sections. user interacts toggle input, data filtered server. filtered data returned main module.","code":"# app/view/toggle.R box::use( dplyr[filter], shiny[div, moduleServer, NS, reactive], shiny.fluent[Text, Toggle.shinyInput, fluentSalesDeals], ) #' @export ui <- function(id) { ns <- NS(id) div( class = \"ms-depth-4\", Toggle.shinyInput(ns(\"includeOpen\"), label = \"Include open deals\") ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { filtered_deals <- reactive({ fluentSalesDeals |> filter( is_closed | input$includeOpen ) }) return(filtered_deals) }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"the-modified-appviewdatatable-r-module","dir":"Articles","previous_headings":"Create separate rhino modules for toggle input and datatable","what":"The modified app/view/datatable.R module","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"toggle module returns filtered data, used datatable module data displayed table accordingly. Hence, datatable module modified shown - Please notice, inside server function, response obtained toggle module earlier also passed used displaying data table. returning information module main module ’s sole purpose display given data table desired columns easily readable form.","code":"# app/view/datatable.R box::use( shiny[moduleServer, NS, reactive, renderUI, uiOutput], shiny.fluent[DetailsList], tibble[tibble], ) columns <- tibble( fieldName = c(\"rep_name\", \"date\", \"deal_amount\", \"city\", \"is_closed\"), name = c(\"Sales Rep\", \"Date\", \"Deal Amount\", \"City\", \"Is Closed?\") ) #' @export ui <- function(id) { ns <- NS(id) uiOutput(ns(\"datatable\")) } #' @export server <- function(id, data) { moduleServer(id, function(input, output, session) { output$datatable <- renderUI({ DetailsList(items = data(), columns = columns) }) }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"the-modified-appmain-r-module","dir":"Articles","previous_headings":"Create separate rhino modules for toggle input and datatable","what":"The modified app/main.R module","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"Since modified modules, app/main.R also modified. used toggle datatable modules called code.","code":"# app/main.R box::use( shiny[moduleServer, NS, span], shiny.fluent[fluentPage, Stack, Text], ) box::use( app/view/datatable, app/view/toggle, ) #' @export ui <- function(id) { ns <- NS(id) fluentPage( Text(\"Sales Data Dashboard\", variant = \"xxLarge\"), Text(\"A randomly generated dataset of imaginary sales deals\", variant = \"large\"), toggle$ui(ns(\"toggle\")), Stack( horizontal = TRUE, tokens = list(padding = 20, childrenGap = 10), span(class = \"ms-depth-8\", datatable$ui(ns(\"datatable\"))) ) ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { data <-toggle$server(\"toggle\") datatable$server(\"datatable\", data) }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"create-a-rhino-module-to-render-a-bar-chart-with-logic-in-a-helper-function","dir":"Articles","previous_headings":"","what":"Create a rhino module to render a bar chart with logic in a helper function","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"now add bar chart plots summarized amount deals closed sales reps. , code helper function keep inside app/logic folder.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"define-the-helper-function","dir":"Articles","previous_headings":"Create a rhino module to render a bar chart with logic in a helper function","what":"Define the helper function","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"Go app/logic folder create new .R file. Lets name barchart.R. shall use gglplot2 plotly packages now (installed beginning) purpose. code - code block loads ggplot2 package generates barchart names sales reps X axis summarized amount deals Y axis.","code":"# app/logic/barchart.R box::use( ggplot2[aes, element_text, geom_bar, ggplot, labs, theme, theme_light], ) #' @export generate_barchart <- function(filtered_data) { ggplot(filtered_data, aes(x = rep_name, y = deal_amount, fill = rep_name)) + geom_bar(stat = \"identity\") + labs(x = \"Sales Rep Name\", y = \"Deal Amount\") + theme_light() + theme(axis.text.x = element_text(angle = 60, hjust = 1)) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"create-a-new-rhino-module-and-call-the-helper-function","dir":"Articles","previous_headings":"Create a rhino module to render a bar chart with logic in a helper function","what":"Create a new rhino module and call the helper function","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"Now let us create new file app/view folder name plot.R. module, like app/view/datatable.R module, also obtains data returned toggle module renders barchart using app/logic/barchart.R logic. , called plotly library, also function defined app/logic folder. plotlyOutput help us render graph.","code":"# app/view/plot.R box::use( plotly[plotlyOutput, renderPlotly], shiny[moduleServer, NS], ) box::use( app/logic/barchart[generate_barchart], ) #' @export ui <- function(id) { ns <- NS(id) plotlyOutput(ns(\"barchart\")) } #' @export server <- function(id, data) { moduleServer(id, function(input, output, session) { output$barchart <- renderPlotly({ generate_barchart(data()) }) }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"modify-the-appmain-r-module","dir":"Articles","previous_headings":"Create a rhino module to render a bar chart with logic in a helper function","what":"Modify the app/main.R module","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"view barchart application, need use call main module. code now uses modules just created/modified, creates cards UI using Stack fluentPage shiny.fluent package, calls modules accordingly passes relevant information server working web application. ready, running application, see plotly bar chart rendering successfully also responding interactions toggle input button.","code":"# app/main.R box::use( shiny[moduleServer, NS, span], shiny.fluent[fluentPage, Stack, Text], ) box::use( app/view/datatable, app/view/toggle, app/view/plot, ) #' @export ui <- function(id) { ns <- NS(id) fluentPage( Text(\"Sales Data Dashboard\", variant = \"xxLarge\"), Text(\"A randomly generated dataset of imaginary sales deals\", variant = \"large\"), toggle$ui(ns(\"toggle\")), Stack( horizontal = TRUE, tokens = list(padding = 20, childrenGap = 10), span(class = \"ms-depth-8\", datatable$ui(ns(\"datatable\"))), span(class = \"ms-depth-8\", plot$ui(ns(\"plot\"))) ) ) } #' @export server <- function(id) { moduleServer(id, function(input, output, session) { data <-toggle$server(\"toggle\") datatable$server(\"datatable\", data) plot$server(\"plot\", data) }) }"},{"path":"https://appsilon.github.io/shiny.fluent/articles/st-shiny-fluent-and-rhino.html","id":"next-steps-and-suggested-readings","dir":"Articles","previous_headings":"","what":"Next Steps and Suggested Readings","title":"Tutorial: Build a Rhino application using shiny.fluent","text":"now, explored rhino shiny.fluent packages extent, just beginning. strongly recommended reader explore packages build great RShiny applications. Congratulations coming far best road lies ahead! Following resources considered exploration: rhino Reference Shiny.fluent functions use shiny.fluent Shiny modules Tutorial: Create first shiny.fluent dashboard Tutorial: Full dashboard UI Shiny Fluent","code":""},{"path":"https://appsilon.github.io/shiny.fluent/articles/topic_react-in-shiny.html","id":"fluent-inputs","dir":"Articles","previous_headings":"","what":"Fluent inputs","title":"Topic guide: React in Shiny","text":"Shiny notion “inputs”, exist React. Still, can connect React components Shiny using appropriate arguments - particular event handlers default values. example, can use Checkbox following way: setInput(\"checkbox\", 2) create JavaScript function takes second argument sends Shiny input$checkbox. effect achieved JS(\"(e, value) => Shiny.setInputValue('checkbox', value)\"). React interface powerful, somewhat inconvenient. make easier use components Shiny inputs, provide wrappers .shinyInput suffix. provide interface analogous vanilla Shiny inputs: inputId optional value. checkbox usage can translated : Additionally, wrapper: can updated using updateCheckbox.shinyInput(), sends initial value Shiny first rendered.","code":"shinyApp( ui = tagList( Checkbox(onChange = setInput(\"checkbox\", 2), defaultChecked = TRUE, label = \"Checkbox\"), textOutput(\"value\") ), server = function(input, output) { output$value <- renderText(deparse(input$checkbox)) } ) Checkbox.shinyInput(\"checkbox\", value = TRUE, label = \"Checkbox\")"},{"path":"https://appsilon.github.io/shiny.fluent/articles/topic_react-in-shiny.html","id":"dynamic-rendering","dir":"Articles","previous_headings":"","what":"Dynamic rendering","title":"Topic guide: React in Shiny","text":"need dynamically render UI, time can just go uiOutput renderUI. However cases might want use analogous ?reactOutput ?renderReact, preserve state components rerenders. understand means, consider following example: app displays checkbox text field. text field rendered dynamically, whether enabled depends value checkbox. input text text field toggle checkbox, text field become disabled, contents preserved. replaced reactOutput renderReact uiOutput renderUI, contents cleared time toggled checkbox.","code":"shinyApp( ui = div( Checkbox.shinyInput(\"disabled\", label = \"Disable\"), reactOutput(\"ui\") ), server = function(input, output) { output$ui <- renderReact({ TextField.shinyInput(\"text\", label = \"TextField\", disabled = input$disabled) }) } )"},{"path":"https://appsilon.github.io/shiny.fluent/authors.html","id":null,"dir":"","previous_headings":"","what":"Authors","title":"Authors and Citation","text":"Jakub Sobolewski. Author, maintainer. Kamil Żyła. Author. Marek Rogala. Author. Appsilon Sp. z o.o.. Copyright holder.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/authors.html","id":"citation","dir":"","previous_headings":"","what":"Citation","title":"Authors and Citation","text":"Sobolewski J, Żyła K, Rogala M (2024). shiny.fluent: Microsoft Fluent UI Shiny Apps. R package version 0.3.0.900, https://github.com/appsilon/shiny.fluent, https://appsilon.github.io/shiny.fluent/.","code":"@Manual{, title = {shiny.fluent: Microsoft Fluent UI for Shiny Apps}, author = {Jakub Sobolewski and Kamil Żyła and Marek Rogala}, year = {2024}, note = {R package version 0.3.0.900, https://github.com/appsilon/shiny.fluent}, url = {https://appsilon.github.io/shiny.fluent/}, }"},{"path":"https://appsilon.github.io/shiny.fluent/index.html","id":"shinyfluent-","dir":"","previous_headings":"","what":"Microsoft Fluent UI for Shiny Apps","title":"Microsoft Fluent UI for Shiny Apps","text":"Microsoft Fluent UI Shiny Apps believe great UI plays huge role success application projects. shiny.fluent gives apps: - beautiful, professional look - rich set components easily usable Shiny - fast speed development Shiny famous . Fluent UI built React, shiny.fluent based another package called shiny.react, allows using React libraries Shiny. big game-changer companies already using Microsoft tools daily basis, everyone already familiar pleased Microsoft UI. Note: package strives easy use possible, providing Fluent UI possibilities. said, Fluent UI flexible low level Bootstrap, additional complexity coming using React Shiny. expect using shiny.fluent somewhat complex vanilla Shiny shiny.semantic (point likely want browse original Fluent UI documentation), get power, flexibility better UI return. shinyfluentapp","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/index.html","id":"installation","dir":"","previous_headings":"Getting started","what":"Installation","title":"Microsoft Fluent UI for Shiny Apps","text":"Stable version: Development version:","code":"install.packages(\"shiny.fluent\") remotes::install_github(\"Appsilon/shiny.fluent\")"},{"path":"https://appsilon.github.io/shiny.fluent/index.html","id":"quick-start","dir":"","previous_headings":"Getting started","what":"Quick start","title":"Microsoft Fluent UI for Shiny Apps","text":"’s make app containing Fluent UI checkbox: shiny.fluent provides components Microsoft’s Fluent UI library. Browse official docs start typing shiny.fluent:: RStudio see available controls. components documented, run ?shiny.fluent::MyComponentName, ’ll see documentation component RStudio, along examples. doubt, open Fluent UI docs details.","code":"shinyApp( ui = div( Checkbox.shinyInput(\"checkbox\", value = TRUE), textOutput(\"checkboxValue\") ), server = function(input, output) { output$checkboxValue <- renderText({ sprintf(\"Value: %s\", input$checkbox) }) } )"},{"path":"https://appsilon.github.io/shiny.fluent/index.html","id":"examples","dir":"","previous_headings":"Getting started","what":"Examples","title":"Microsoft Fluent UI for Shiny Apps","text":"good way learn look examples. install library, can run shiny.fluent::runExample(\"example_name\"). recommend following starters: * demo: demo app analyzing sales reps performance, * dashboard: showcase available components along documentation. also usage examples individual components. Use shiny.fluent::runExample() list available examples.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/index.html","id":"appsilon","dir":"","previous_headings":"","what":"Appsilon","title":"Microsoft Fluent UI for Shiny Apps","text":"Appsilon Posit (formerly RStudio) Full Service Certified Partner. Learn appsilon.com. Get touch opensource@appsilon.com Explore Rhinoverse - family R packages built around Rhino!","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ActivityItem.html","id":null,"dir":"Reference","previous_headings":"","what":"ActivityItem — ActivityItem","title":"ActivityItem — ActivityItem","text":"activity item (ActivityItem) represents  person's actions, making comment, mentioning someone   @mention, editing document, moving file. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ActivityItem.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"ActivityItem — ActivityItem","text":"","code":"ActivityItem(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/ActivityItem.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"ActivityItem — ActivityItem","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ActivityItem.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"ActivityItem — ActivityItem","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ActivityItem.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"ActivityItem — ActivityItem","text":"activityDescription React.ReactNode[] | React.ReactNode element describing activity took place. activityDescription, activityDescriptionText, onRenderActivityDescription included, description activity shown. activityDescriptionText string Text describing activity occurred naming people involved . Deprecated, use activityDescription instead. activityIcon React.ReactNode element containing icon shown next activity item. activityPersonas Array activityIcon set, persona props array used icon activity item. animateBeaconSignal boolean Enables/Disables beacon radiates center center activity icon. Signals activity started. beaconColorOne string Beacon color one beaconColorTwo string Beacon color two comments React.ReactNode[] | React.ReactNode element containing text comments \\@mention messages. comments, commentText, onRenderComments included, comments shown. commentText string Text comments \\@mention messages. Deprecated, use comments instead. isCompact boolean Indicated compact styling used. onRenderActivityDescription IRenderFunction renderer description current activity. onRenderComments IRenderFunction renderer adds text comment activity description. onRenderIcon IRenderFunction renderer create icon next activity item. onRenderTimeStamp IRenderFunction renderer adds time stamp. included, timeStamp shown plain text activity. styles IActivityItemStyles Optional styling elements within Activity Item. timeStamp string | React.ReactNode[] | React.ReactNode Element shown timestamp activity. included, timestamp shown.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/ActivityItem.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"ActivityItem — ActivityItem","text":"Use list multiple activity items indicate  history events relating single file, folder, person, entity. Alternatively, use single activity item indicate recent event entity. Group multiple similar events occurring near time single activity item.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ActivityItem.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"ActivityItem — ActivityItem","text":"","code":"library(shiny) #> #> Attaching package: ‘shiny’ #> The following object is masked from ‘package:shiny.fluent’: #> #> runExample library(shiny.fluent) ui <- function(id) { ActivityItem( activityDescription = tagList( Link(key = 1, \"Philippe Lampros\"), tags$span(key = 2, \" commented\") ), activityIcon = Icon(iconName = \"Message\"), comments = tagList( tags$span(key = 1, \"Hello! I am making a comment.\") ), timeStamp = \"Just now\" ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Announced.html","id":null,"dir":"Reference","previous_headings":"","what":"Announced — Announced","title":"Announced — Announced","text":"Announced component aims fill several accessibility gaps exist various web application experiences. provides text screen reader certain scenarios lacking comprehensive updates, particularly showing completion status progress operation(s). real-world applications component include copying, uploading, moving many files; deleting renaming single file; \"lazy loading\" page sections appear ; appearance search results. Announced component currently following documented use cases: Quick Actions: Operations editing text deletion short enough require status progress. Search Results: Appearance search results contact fields search boxes. Lazy Loading: \"Lazy loading\" page sections appear . Bulk Operations: Operations require multiple sub operations, moving several files. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Announced.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Announced — Announced","text":"","code":"Announced(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Announced.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Announced — Announced","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Announced.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Announced — Announced","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Announced.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Announced — Announced","text":"\"aria-live\" '' | 'polite' | 'assertive' Priority screen reader treat updates region @default 'polite' React.ElementType Optionally render root component another component type primitive. custom type must preserve children native props passed . @default 'div' message string status message provided screen reader output styles IStyleFunctionOrObject<{}, IAnnouncedStyles> Call provide customized styling layer top variant rules.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Announced.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Announced — Announced","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { Announced(message = \"Screen reader message\") } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Breadcrumb.html","id":null,"dir":"Reference","previous_headings":"","what":"Breadcrumb — Breadcrumb","title":"Breadcrumb — Breadcrumb","text":"Breadcrumbs used navigational aid app site. indicate current page’s location within hierarchy help user understand relation rest hierarchy. also afford one-click access higher levels hierarchy. Breadcrumbs typically placed, horizontal form, masthead navigation experience, primary content area. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Breadcrumb.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Breadcrumb — Breadcrumb","text":"","code":"Breadcrumb(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Breadcrumb.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Breadcrumb — Breadcrumb","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Breadcrumb.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Breadcrumb — Breadcrumb","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Breadcrumb.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Breadcrumb — Breadcrumb","text":"ariaLabel string Aria label root element breadcrumb (navigation landmark). className string Optional class root breadcrumb element. componentRef IRefObject Optional callback access IBreadcrumb interface. Use instead ref accessing public methods properties component. dividerAs IComponentAs Render custom divider place default chevron > focusZoneProps IFocusZoneProps Extra props root FocusZone. items IBreadcrumbItem[] Collection breadcrumbs render maxDisplayedItems number maximum number breadcrumbs display coalescing. specified, breadcrumbs rendered. onGrowData (data: IBreadcrumbData) => IBreadcrumbData | undefined Method determines group length breadcrumb. Return undefined never increase breadcrumb length. onReduceData (data: IBreadcrumbData) => IBreadcrumbData | undefined Method determines reduce length breadcrumb. Return undefined never reduce breadcrumb length. onRenderItem IRenderFunction Custom render function breadcrumb item. onRenderOverflowIcon IRenderFunction Render custom overflow icon place default icon ... overflowAriaLabel string Aria label overflow button. overflowIndex number Optional index overflow items collapsed. Defaults 0. styles IStyleFunctionOrObject theme ITheme tooltipHostProps ITooltipHostProps Extra props TooltipHost wraps breadcrumb item. item IBreadcrumbItem Breadcrumb item left divider passed custom rendering. overflowed items, last item list.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Breadcrumb.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Breadcrumb — Breadcrumb","text":"","code":"library(shiny) library(shiny.fluent) items <- list( list(text = \"Files\", key = \"Files\", href = \"#/page\"), list(text = \"Folder 1\", key = \"f1\", href = \"#/page\"), list(text = \"Folder 2\", key = \"f2\", href = \"#/page\"), list(text = \"Folder 3\", key = \"f3\", href = \"#/page\"), list(text = \"Folder 4 (non-clickable)\", key = \"f4\"), list(text = \"Folder 5\", key = \"f5\", href = \"#/page\", isCurrentItem = TRUE) ) ui <- function(id) { Breadcrumb( items = items, maxDisplayedItems = 3, ariaLabel = \"Breadcrumb with items rendered as links\", overflowAriaLabel = \"More links\" ) } server <- function(id) { moduleServer(id, function(input, output, session) { }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Button.html","id":null,"dir":"Reference","previous_headings":"","what":"Button — ActionButton","title":"Button — ActionButton","text":"Buttons give people way trigger action. ’re typically found forms, dialog panels, dialogs. buttons specialized  particular tasks, navigation, repeated actions, presenting menus. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Button.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Button — ActionButton","text":"","code":"ActionButton(...) CommandBarButton(...) CommandButton(...) CompoundButton(...) DefaultButton(...) IconButton(...) PrimaryButton(...) ActionButton.shinyInput(inputId, ...) updateActionButton.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... ) CommandBarButton.shinyInput(inputId, ...) updateCommandBarButton.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... ) CommandButton.shinyInput(inputId, ...) updateCommandButton.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... ) CompoundButton.shinyInput(inputId, ...) updateCompoundButton.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... ) DefaultButton.shinyInput(inputId, ...) updateDefaultButton.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... ) IconButton.shinyInput(inputId, ...) updateIconButton.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... ) PrimaryButton.shinyInput(inputId, ...) updatePrimaryButton.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Button.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Button — ActionButton","text":"... Props pass component. allowed props listed Details section. inputId ID component. session Object passed session argument Shiny server.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Button.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Button — ActionButton","text":"Object shiny.tag class suitable use UI Shiny app. update functions return nothing (called side effects).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Button.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Button — ActionButton","text":"baseClassName string variantClassName string allowDisabledFocus boolean Whether button can focus disabled mode ariaDescription string Detailed description button benefit screen readers. Besides compound button, button types need information provided screen reader. ariaHidden boolean provided true adds 'aria-hidden' attribute instructing screen readers ignore element. ariaLabel string aria label button benefit screen readers. buttonType ButtonType Deprecated v1.2.3, removed \\>= v2.0.0. Use specific button component instead. checked boolean Whether button checked className string provided, additional class name provide root element. componentRef IRefObject Optional callback access IButton interface. Use instead ref accessing public methods properties component. data custom data developer wishes associate menu item. defaultRender yet unknown docs description IStyle Style description text applicable (compound buttons.) Deprecated, use secondaryText instead. disabled boolean Whether button disabled getClassNames (theme: ITheme, className: string, variantClassName: string, iconClassName: string | undefined, menuIconClassName: string | undefined, disabled: boolean, checked: boolean, expanded: boolean, hasMenu: boolean, isSplit: boolean | undefined, allowDisabledFocus: boolean) => IButtonClassNames Method provide classnames style button. default value prop getClassnames func defined BaseButton.classnames. getSplitButtonClassNames (disabled: boolean, expanded: boolean, checked: boolean, allowDisabledFocus: boolean) => ISplitButtonClassNames Method provide classnames style button. default value prop getClassnames func defined BaseButton.classnames. href string provided, component rendered anchor. iconProps IIconProps props icon shown button. keytipProps IKeytipProps Optional keytip button menuAs IComponentAs Render custom menu place normal one. menuIconProps IIconProps props icon shown providing menu dropdown. menuProps IContextualMenuProps Props button menu. Providing default showing menu icon. See menuIconProps overriding default icon looks. Providing addition onClick setting split property true render SplitButton. menuTriggerKeyCode KeyCodes | null Provides custom KeyCode can used open button menu. default KeyCode arrow. value null can provided disable key codes opening button menu. onAfterMenuDismiss () => void Callback runs Button's contextualmenu closed (removed DOM) onMenuClick (ev?: React.MouseEvent | React.KeyboardEvent, button?: IButtonProps) => void Optional callback menu clicked. onRenderAriaDescription IRenderFunction Custom render function aria description element. onRenderChildren IRenderFunction Custom render function rendering button children. onRenderDescription IRenderFunction Custom render function desciption text. onRenderIcon IRenderFunction Custom render function icon onRenderMenu IRenderFunction Deprecated v6.3.2, removed \\>= v7.0.0. Use menuAs instead. onRenderMenuIcon IRenderFunction Custom render function button menu icon onRenderText IRenderFunction Custom render function label text. persistMenu boolean Menu created destroyed opened closed, instead hidden. improve perf menu opening potentially impact overall perf elements dom. used perf important. Note: may increase amount time takes button mount. primary boolean Changes visual presentation button emphasized (defined) primaryActionButtonProps IButtonProps Optional props applied primary action button SplitButton overall SplitButton container primaryDisabled boolean set true splitButton (split == true) primary action split button disabled. renderPersistedMenuHiddenOnMount boolean true, persisted menu rendered hidden button initially mounts. Non-persisted menus component tree unless shown Note: increases time button take mount, can improve perceived menu open perf. user opens menu. rootProps React.ButtonHTMLAttributes | React.AnchorHTMLAttributes Deprecated v0.56.2, removed \\>= v1.0.0. Just pass button props instead. mixed button/anchor element rendered component. secondaryText string Description action button takes. used compound buttons split boolean set true, menuProps onClick provided, button render SplitButton. splitButtonAriaLabel string Accessible label dropdown chevron button button split. splitButtonMenuProps IButtonProps Experimental prop get passed menuButton rendered part split button. Anything passed likely need accompanying style changes. styles IButtonStyles Custom styling individual elements within button DOM. text string Text render button label. text supplied, override string button children. children components passed text. theme ITheme Theme provided HOC. toggle boolean Whether button toggle button distinct states. true buttons permanently change state press event finishes, volume mute button. toggled boolean custom data developer wishes associate menu item. Deprecated, use checked setting state. uniqueId string | number Unique id identify item. Typically duplicate key value.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Button.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"Button — ActionButton","text":"dialog boxes panels, people moving sequence screens, right-align buttons container. single-page forms focused tasks, left-align buttons container. Always place primary button left, secondary button just right . Show one primary button inherits theme color rest state. two buttons equal priority, buttons neutral backgrounds. use button navigate another place; use link instead. exception wizard \"Back\" \"Next\" buttons may used. place default focus button destroys data. Instead, place default focus button performs \"safe act\" retains content (\"Save\") cancels action (\"Cancel\").","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Button.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"Button — ActionButton","text":"Use sentence-style capitalization—capitalize first word. info, see Capitalization Microsoft Writing Style Guide. Make sure clear happen people interact button. concise; usually single verb best. Include noun room interpretation verb means. example, \"Delete folder\" \"Create account\".","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Button.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Button — ActionButton","text":"","code":"# Example 1 library(shiny) library(shiny.fluent) tokens <- list(childrenGap = 20) ui <- function(id) { ns <- NS(id) tags$div( Stack( DefaultButton.shinyInput( ns(\"button1\"), text = \"Default Button\", styles = list(\"background: green\") ), PrimaryButton.shinyInput( ns(\"button2\"), text = \"Primary Button\" ), CompoundButton.shinyInput( ns(\"button3\"), secondaryText = \"Compound Button has additional text\", text = \"Compound Button\" ), ActionButton.shinyInput( ns(\"button4\"), iconProps = list(\"iconName\" = \"AddFriend\"), text = \"Action Button\" ), horizontal = TRUE, tokens = tokens ), textOutput(ns(\"text\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { clicks <- reactiveVal(0) addClick <- function() { clicks(isolate(clicks() + 1)) } observeEvent(input$button0, addClick()) observeEvent(input$button1, addClick()) observeEvent(input$button2, addClick()) observeEvent(input$button3, addClick()) observeEvent(input$button4, addClick()) output$text <- renderText({ paste0(\"Clicks:\", clicks()) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 2 library(shiny) library(shiny.fluent) # Split button with menu menuProps <- list( items = list( list( key = \"emailMessage\", text = \"Email message\", onClick = JS(\"() => alert('Email message clicked')\"), iconProps = list( iconName = \"Mail\" ) ), list( key = \"calendarEvent\", text = \"Calendar event\", onClick = JS(\"() => alert('Calendar event clicked')\"), iconProps = list( iconName = \"Calendar\" ) ) ) ) ui <- function(id) { ns <- NS(id) fluentPage( Stack( horizontal = TRUE, wrap = TRUE, tokens = list( childrenGap = 40 ), DefaultButton.shinyInput( inputId = ns(\"button_1\"), text = \"Standard\", primary = FALSE, split = TRUE, splitButtonAriaLabel = \"See 2 options\", `aria-roledescription` = \"split button\", menuProps = menuProps, disabled = FALSE, checked = FALSE ), DefaultButton.shinyInput( inputId = ns(\"button_2\"), text = \"Primary\", primary = TRUE, split = TRUE, splitButtonAriaLabel = \"See 2 options\", `aria-roledescription` = \"split button\", menuProps = menuProps, disabled = FALSE, checked = FALSE ), DefaultButton.shinyInput( inputId = ns(\"button_3\"), text = \"Main action disabled\", primaryDisabled = NA, split = TRUE, splitButtonAriaLabel = \"See 2 options\", `aria-roledescription` = \"split button\", menuProps = menuProps, checked = FALSE ), DefaultButton.shinyInput( inputId = ns(\"button_4\"), text = \"Disabled\", disabled = TRUE, split = TRUE, splitButtonAriaLabel = \"See 2 options\", `aria-roledescription` = \"split button\", menuProps = menuProps, checked = FALSE ) ), uiOutput(ns(\"text\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$text <- renderUI({ lapply(seq_len(4), function(i) { paste0(\"button_\", i, \": \", input[[paste0(\"button_\", i)]]) }) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 3 library(shiny) library(shiny.fluent) library(shinyjs) #> #> Attaching package: ‘shinyjs’ #> The following object is masked from ‘package:shiny’: #> #> runExample #> The following object is masked from ‘package:shiny.fluent’: #> #> runExample #> The following objects are masked from ‘package:methods’: #> #> removeClass, show # This example app shows how to use a Fluent UI Button to trigger a file upload. # File upload is not natively supported by shiny.fluent so shinyjs is used # to trigger the file upload input. ui <- function(id) { ns <- NS(id) fluentPage( useShinyjs(), Stack( tokens = list( childrenGap = 10L ), horizontal = TRUE, DefaultButton.shinyInput( inputId = ns(\"uploadFileButton\"), text = \"Upload File\", iconProps = list(iconName = \"Upload\") ), div( style = \" visibility: hidden; height: 0; width: 0; \", fileInput( inputId = ns(\"uploadFile\"), label = NULL ) ) ), textOutput(ns(\"file_path\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { observeEvent(input$uploadFileButton, { click(\"uploadFile\") }) output$file_path <- renderText({ input$uploadFile$name }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 4 library(shiny) library(shiny.fluent) library(shinyjs) # This example app shows how to use a Fluent UI Button to trigger a file download. # File download is not natively supported by shiny.fluent so shinyjs is used # to trigger the file download. ui <- function(id) { ns <- NS(id) fluentPage( useShinyjs(), DefaultButton.shinyInput( inputId = ns(\"downloadButton\"), text = \"Download\", iconProps = list(iconName = \"Download\") ), div( style = \"visibility: hidden;\", downloadButton(ns(\"download\"), label = \"\") ) ) } server <- function(id) { moduleServer(id, function(input, output, session) { observeEvent(input$downloadButton, { click(\"download\") }) output$download <- downloadHandler( filename = function() { paste(\"data-\", Sys.Date(), \".csv\", sep=\"\") }, content = function(file) { write.csv(iris, file) } ) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Calendar.html","id":null,"dir":"Reference","previous_headings":"","what":"Calendar — Calendar","title":"Calendar — Calendar","text":"calendar control lets people select view single date range dates calendar. ’s made 3 separate views: month view, year view, decade view. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Calendar.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Calendar — Calendar","text":"","code":"Calendar(...) Calendar.shinyInput(inputId, ..., value = shiny.react::JS(\"new Date()\")) updateCalendar.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Calendar.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Calendar — Calendar","text":"... Props pass component. allowed props listed Details section. inputId ID component. value Starting value. session Object passed session argument Shiny server.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Calendar.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Calendar — Calendar","text":"Object shiny.tag class suitable use UI Shiny app. update functions return nothing (called side effects).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Calendar.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Calendar — Calendar","text":"allFocusable boolean Allows dates buttons focused, including disabled ones autoNavigateOnSelection boolean Whether month view automatically navigate next previous date range depending selected date. property set true currently displayed month March 2017, user clicks day outside month, .e., April 1st, picker automatically navigate month April. className string Optional class name add root element. componentRef IRefObject Optional callback access ICalendar interface. Use instead ref accessing public methods properties component. dateRangeType DateRangeType date range type indicating many days selected user selects days dateTimeFormatter ICalendarFormatDateCallbacks Apply additional formating dates, example localized date formatting. firstDayOfWeek DayOfWeek first day week locale. firstWeekOfYear FirstWeekOfYear Defines first week year start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek FirstWeekOfYear.FirstFourDayWeek possible values highlightCurrentMonth boolean Whether month picker highlight current month highlightSelectedMonth boolean Whether month picker highlight selected month isDayPickerVisible boolean Whether day picker shown beside month picker hidden. isMonthPickerVisible boolean Whether month picker shown beside day picker hidden. maxDate Date set Calendar allow navigation selection date later value. minDate Date set Calendar allow navigation selection date earlier value. navigationIcons ICalendarIconStrings Customize navigation icons using ICalendarIconStrings onDismiss () => void Callback issued calendar closed onSelectDate (date: Date, selectedDateRangeArray?: Date[]) => void Callback issued date selected restrictedDates Date[] set Calendar allow selection dates array. selectDateOnClick boolean clicking \"Today\", select date close calendar. shouldFocusOnMount boolean property removed 0.80.0 place focus method, removed \\@ 1.0.0. showCloseButton boolean Whether close button shown showGoToToday boolean Whether \"Go today\" link shown showMonthPickerAsOverlay boolean Show month picker top date picker visible. showSixWeeksByDefault boolean Whether calendar show 6 weeks default. showWeekNumbers boolean Whether calendar show week number (weeks 1 53) week row strings ICalendarStrings | null Localized strings use Calendar today Date Value today. null, current time client machine used. value Date Default value Calendar, workWeekDays DayOfWeek[] days selectable dateRangeType WorkWeek. dateRangeType WorkWeek property nothing. yearPickerHidden boolean Whether year picker enabled","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Calendar.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"Calendar — Calendar","text":"Don’t break control apart. Include arrow navigating time ranges chevron make calendar collapsible.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Calendar.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"Calendar — Calendar","text":"Use following format dates: month, day, year,   July 31, 2016.  space limited, use numbers slashes dates code supports format automatically displays appropriate date format different locales. example, 2/16/19. use ordinal numbers ( 1st, 12th,  23rd) indicate date.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Calendar.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Calendar — Calendar","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) div( Calendar.shinyInput(ns(\"calendar\"), value = \"2020-06-25T22:00:00.000Z\"), textOutput(ns(\"calendarValue\")), h3(\"If `value` is missing, default to system date\"), Calendar.shinyInput(ns(\"calendar2\")), textOutput(ns(\"calendarDefault\")), h3(\"If `value` is NULL, also default to system date\"), Calendar.shinyInput(ns(\"calendar3\"), value = NULL), textOutput(ns(\"calendarNull\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$calendarValue <- renderText({ sprintf(\"Value: %s\", input$calendar) }) output$calendarDefault <- renderText({ sprintf(\"Value: %s\", input$calendar2) }) output$calendarNull <- renderText({ sprintf(\"Value: %s\", input$calendar3) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Callout.html","id":null,"dir":"Reference","previous_headings":"","what":"Callout — Callout","title":"Callout — Callout","text":"callout anchored tip can used  teach people  guide  app without blocking . details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Callout.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Callout — Callout","text":"","code":"Callout(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Callout.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Callout — Callout","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Callout.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Callout — Callout","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Callout.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Callout — Callout","text":"alignTargetEdge boolean true positioning logic prefer flip edges rather nudge rectangle fit within bounds, thus making sure element aligns perfectly target's alignment edge ariaDescribedBy string Defines element id referencing element containing description callout. ariaLabel string Accessible label text callout. ariaLabelledBy string Defines element id referencing element containing label text callout. backgroundColor string background color Callout hex format ie. #ffffff. beakWidth number width beak. bounds IRectangle | ((target?: Target, targetWindow?: Window) => IRectangle | undefined) bounding rectangle (callback returns rectangle) contextual menu can appear . calloutMaxHeight number Set max height callout set callout expand contents bottom screen calloutMaxWidth number Custom width callout including borders. value 0, width applied. calloutWidth number Custom width callout including borders. value 0, width applied. className string CSS class apply callout. coverTarget boolean true position returned menu element cover target. false position next target; directionalHint DirectionalHint element positioned directionalHintFixed boolean true position change sides attempt fit callout within bounds. still attempt align whatever bounds given. directionalHintForRTL DirectionalHint element positioned RTL layouts. specified, mirror directionalHint alignment edge used instead. means DirectionalHint.BottomLeft change DirectionalHint.BottomRight DirectionalHint.LeftAuto change. doNotLayer boolean true render new layer. false render new layer. finalHeight number Specify final height content. used expanding content dynamically callout can adjust position. gapSpace number gap Callout target hidden boolean specified, renders Callout hidden state. Use flag, rather rendering callout conditionally based visibility, improve rendering performance becomes visible. Note: callout hidden content rendered. render callout visible. hideOverflow boolean Manually set OverflowYHidden style prop true calloutMain element variety callout load animations need hide scollbar can appear isBeakVisible boolean true beak visible. false shown. layerProps ILayerProps Optional props pass Layer component hosting panel. minPagePadding number minimum distance callout away edge screen. onDismiss (ev?: ) => void Callback Callout tries close. onLayerMounted () => void Optional callback layer content mounted. onPositioned (positions?: ICalloutPositionedInfo) => void Optional callback called callout correctly positioned. onRestoreFocus (options: { originalElement?: HTMLElement | Window; containsFocus: boolean; }) => void Called component unmounting, focus needs restored. Argument passed contains two variables, element underlying popup believes focus go * whether popup currently contains focus. provided, focus restored automatically, need call originalElement.focus() onScroll () => void Callback Callout body scrolled. preventDismissOnLostFocus boolean true callout dismiss loses focus preventDismissOnResize boolean true callout dismiss resize preventDismissOnScroll boolean true callout dismiss scroll role string Aria role assigned callout (Eg. dialog, alertdialog). setInitialFocus boolean true callout attempt focus first focusable element contains. find element, focus set method return false. means contents responsibility either set focus focusable items. shouldRestoreFocus boolean true, component unmounted, focus restored element focus component first mounted. shouldUpdateWhenHidden boolean true, component updated even hidden=true. Note consume resources update even though nothing shown user. might helpful though updates small want callout revealed fast user hidden set false. style React.CSSProperties CSS style apply callout. set overflowY object, provides performance optimization preventing Popup (underlying component Callout) calculating whether needs scroll bar. styles IStyleFunctionOrObject Optional styles component. target Target target Callout try position based . can either Element querySelector string valid Element MouseEvent. MouseEvent given origin point event used. theme ITheme Optional theme component","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Callout.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"Callout — Callout","text":"Don’t use callout ask action confirmation; use  dialog instead. Place callout near object described. pointer’s tail head, possible. use large, unformatted blocks text callout. difficult read overwhelming. Don’t block important UI placement callout.  poor user experience lead frustration. Don’t open callout within another callout. Don’t show callouts hidden elements. Don’t overuse callouts. many callouts opening automatically can perceived interrupting someone's workflow. particularly complex concept needs explanation, place info icon (iconClassNames.info) next concept indicate helpful information available. someone hovers selects icon, callout appear.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Callout.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"Callout — Callout","text":"content inside callout always visible, put required information callout. Short sentences sentence fragments  best. use obvious tip text text simply repeats already screen. Limit information inside callout supplemental information. additional context advanced description necessary, consider placing link \"Learn \" bottom callout. clicked, open additional content new window panel.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Callout.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Callout — Callout","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) div( DefaultButton.shinyInput(ns(\"toggleCallout\"), text = \"Toggle Callout\"), reactOutput(ns(\"callout\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { show <- reactiveVal(FALSE) observeEvent(input$toggleCallout, show(!show())) output$callout <- renderReact({ if (show()) { Callout( tags$div( style = \"margin: 10px\", \"Callout contents\" ) ) } }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Checkbox.html","id":null,"dir":"Reference","previous_headings":"","what":"Checkbox — Checkbox","title":"Checkbox — Checkbox","text":"Check boxes (Checkbox) give people way select one items group, switch two mutually exclusive options (checked unchecked, ). details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Checkbox.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Checkbox — Checkbox","text":"","code":"Checkbox(...) Checkbox.shinyInput(inputId, ..., value = defaultValue) updateCheckbox.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Checkbox.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Checkbox — Checkbox","text":"... Props pass component. allowed props listed Details section. inputId ID component. value Starting value. session Object passed session argument Shiny server.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Checkbox.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Checkbox — Checkbox","text":"Object shiny.tag class suitable use UI Shiny app. update functions return nothing (called side effects).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Checkbox.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Checkbox — Checkbox","text":"ariaDescribedBy string ID element provides extended information checkbox. ariaLabel string Accessible label checkbox. ariaLabelledBy string ID element contains label information checkbox. ariaPositionInSet number position parent set (set) aria-posinset. ariaSetSize number total size parent set (set) aria-setsize. boxSide 'start' | 'end' Allows set checkbox (start) (end) label. checked boolean Checked state. Mutually exclusive \"defaultChecked\". Use control checked state higher level plan pass correct value based handling onChange events re-rendering. checkmarkIconProps IIconProps Custom icon props check mark rendered checkbox className string Additional class name provide root element, addition ms-Checkbox class. componentRef IRefObject Optional callback access ICheckbox interface. Use instead ref accessing public methods properties component. defaultChecked boolean Default checked state. Mutually exclusive \"checked\". Use want uncontrolled component, want Checkbox instance maintain state. defaultIndeterminate boolean Optional uncontrolled indeterminate visual state checkbox. Setting indeterminate state takes visual precedence checked defaultChecked props given affect checked state. toggleable state. load checkbox receive indeterminate visual state user's first click removed exposing true state checkbox. disabled boolean Disabled state checkbox. indeterminate boolean Optional controlled indeterminate visual state checkbox. Setting indeterminate state takes visual precedence checked defaultChecked props given affect checked state. toggleable state. load checkbox receive indeterminate visual state first user click removed supplied onChange callback function exposing true state checkbox. inputProps React.ButtonHTMLAttributes Optional input props mixed input element, props applied. allows extend input element additional attributes, data-automation-id needed automation. Note provide, example, \"disabled\" well \"inputProps.disabled\", former take precedence later. keytipProps IKeytipProps Optional keytip checkbox label string Label display next checkbox. onChange (ev?: React.FormEvent, checked?: boolean) => void Callback called checked value changed. onRenderLabel IRenderFunction Custom render function label. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme provided HOC.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Checkbox.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"Checkbox — Checkbox","text":"Use single check box one selection make choice confirm. Selecting blank check box selects . Selecting clears check box. Use multiple check boxes one options can selected group. Unlike radio buttons, selecting one check box clear another check box.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Checkbox.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"Checkbox — Checkbox","text":"Separate two groups check boxes headings rather positioning one . Use sentence-style capitalization—capitalize first word. info, see Capitalization Microsoft Writing Style Guide. use end punctuation (unless check box label absolutely requires multiple sentences). Use sentence fragment label, rather full sentence. Make easy people understand happen select clear check box.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Checkbox.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Checkbox — Checkbox","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) div( Checkbox.shinyInput(ns(\"checkbox\"), value = FALSE), textOutput(ns(\"checkboxValue\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$checkboxValue <- renderText({ sprintf(\"Value: %s\", input$checkbox) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/ChoiceGroup.html","id":null,"dir":"Reference","previous_headings":"","what":"ChoiceGroup — ChoiceGroup","title":"ChoiceGroup — ChoiceGroup","text":"Radio buttons (ChoiceGroup) let people select single option two choices. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ChoiceGroup.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"ChoiceGroup — ChoiceGroup","text":"","code":"ChoiceGroup(...) ChoiceGroup.shinyInput(inputId, ..., value = defaultValue) updateChoiceGroup.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/ChoiceGroup.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"ChoiceGroup — ChoiceGroup","text":"... Props pass component. allowed props listed Details section. inputId ID component. value Starting value. session Object passed session argument Shiny server.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ChoiceGroup.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"ChoiceGroup — ChoiceGroup","text":"Object shiny.tag class suitable use UI Shiny app. update functions return nothing (called side effects).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ChoiceGroup.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"ChoiceGroup — ChoiceGroup","text":"componentRef IRefObject Optional callback access IChoiceGroup interface. Use instead ref accessing public methods properties component. focused boolean Indicates ChoiceGroupOption appear focused, visually name string value used group ChoiceGroupOption logical ChoiceGroup onBlur (ev: React.FocusEvent, props?: IChoiceGroupOption) => void callback receiving notification choice lost focus. onChange (evt?: React.FormEvent, props?: IChoiceGroupOption) => void callback receiving notification choice changed. onFocus (ev?: React.FocusEvent, props?: IChoiceGroupOption) => void | undefined callback receiving notification choice received focus. required boolean true, specifies option must selected ChoiceGroup submitting form theme ITheme Theme (provided customization.) ariaLabelledBy string ID element use aria label ChoiceGroup. componentRef IRefObject Optional callback access IChoiceGroup interface. Use instead ref accessing public methods properties component. defaultSelectedKey string | number key option initially checked. label string Descriptive label choice group. onChange (ev?: React.FormEvent, option?: IChoiceGroupOption) => void callback receiving notification choice changed. onChanged (option: IChoiceGroupOption, evt?: React.FormEvent) => void Deprecated removed 07/17/2017. Use onChange instead. options IChoiceGroupOption[] options choice group. selectedKey string | number key selected option. provide , must maintain selection state observing onChange events passing new value changed. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme (provided customization).","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/ChoiceGroup.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"ChoiceGroup — ChoiceGroup","text":"Use radio buttons two seven options, enough screen space, options important enough good use screen space. seven options, use drop-menu instead. give people way select one option, use check boxes instead. default option recommended people situations, use drop-menu instead. Align radio buttons vertically instead horizontally, possible. Horizontal alignment harder read localize. two mutually exclusive options, combine single check box toggle. example, use check box \"agree\" statements instead radio buttons \"agree\" \"disagree\".","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ChoiceGroup.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"ChoiceGroup — ChoiceGroup","text":"List options logical order, likely selected least, simplest operation complex, least risk . Listing options alphabetical order recommended order change text localized. Select safest (prevent loss data system access), secure, private option default. safety security factors, select likely convenient option. Use phrase label, rather full sentence. Make sure give people option make choice. example, include \"None\" option.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ChoiceGroup.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"ChoiceGroup — ChoiceGroup","text":"","code":"library(shiny) library(shiny.fluent) options <- list( list(key = \"A\", text = \"Option A\"), list(key = \"B\", text = \"Option B\"), list(key = \"C\", text = \"Option C\") ) ui <- function(id) { ns <- NS(id) div( ChoiceGroup.shinyInput(ns(\"choice\"), value = \"B\", options = options), textOutput(ns(\"groupValue\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$groupValue <- renderText({ sprintf(\"Value: %s\", input$choice) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Coachmark.html","id":null,"dir":"Reference","previous_headings":"","what":"Coachmark — Coachmark","title":"Coachmark — Coachmark","text":"Coach marks (Coachmark) used draw  person’s attention  parts UI increase engagement   elements.  teaching bubble appears hover  selection   coach mark. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Coachmark.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Coachmark — Coachmark","text":"","code":"Coachmark(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Coachmark.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Coachmark — Coachmark","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Coachmark.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Coachmark — Coachmark","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Coachmark.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Coachmark — Coachmark","text":"ariaAlertText string Text announce screen reader / narrator Coachmark displayed ariaDescribedBy string Defines element id referencing element containing description Coachmark. ariaDescribedByText string Defines text content ariaDescribedBy element ariaLabelledBy string Defines element id referencing element containing label text Coachmark. ariaLabelledByText string Defines text content ariaLabelledBy element beaconColorOne string Beacon color one. beaconColorTwo string Beacon color two. beakHeight number height Beak component. beakWidth number width Beak component. className string provided, additional class name provide root element. collapsed boolean starting collapsed state Coachmark. Use isCollapsed instead. color string Color Coachmark/TeachingBubble. componentRef IRefObject Optional callback access ICoachmark interface. Use instead ref accessing public methods properties component. delayBeforeCoachmarkAnimation number Delay milliseconds Coachmark animation appears. delayBeforeMouseOpen number Delay allowing mouse movements open Coachmark. height number height Coachmark. isCollapsed boolean starting collapsed state Coachmark. isPositionForced boolean Whether force Coachmark/TeachingBubble content fit within window bounds. mouseProximityOffset number distance pixels mouse located opening Coachmark. onAnimationOpenEnd () => void Callback opening animation completes. onAnimationOpenStart () => void Callback opening animation begins. onDismiss (ev?: ) => void Callback Coachmark tries close. onMouseMove (e: MouseEvent) => void Callback run mouse moves. persistentBeak boolean true Coachmark beak (arrow pointing towards target) always visible long Coachmark visible positioningContainerProps IPositioningContainerProps Props pass PositioningContainer component. Specify directionalHint indicate edge Coachmark/TeachingBubble positioned. preventDismissOnLostFocus boolean true Coachmark dismiss loses focus preventFocusOnMount boolean true focus set Coachmark mounts. Useful cases focus coachmark causing components page dismiss upon losing focus. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules target HTMLElement | string | null target Coachmark try position based . teachingBubbleRef ITeachingBubble Ref TeachingBubble theme ITheme Theme provided higher order component. width number width Coachmark. ariaDescribedBy string Defines element id referencing element containing description positioningContainer. ariaLabel string Accessible label text positioningContainer. ariaLabelledBy string Defines element id referencing element containing label text positioningContainer. backgroundColor string background color positioningContainer hex format ie. #ffffff. bounds IRectangle bounding rectangle contextual menu can appear . className string CSS class apply positioningContainer. componentRef IRefObject props component defined . coverTarget boolean true position returned menu element cover target. false position next target; directionalHint DirectionalHint element positioned directionalHintFixed boolean true position change sides attempt fit positioningContainer within bounds. still attempt align whatever bounds given. directionalHintForRTL DirectionalHint element positioned RTL layouts. specified, mirror directionalHint used instead doNotLayer boolean true render new layer. false render new layer. finalHeight number Specify final height content. used expanding content dynamically positioningContainer can adjust position. minPagePadding number minimum distance positioningContainer away edge screen. offsetFromTarget number gap positioningContainer target onDismiss (ev?: ) => void Callback positioningContainer tries close. onLayerMounted () => void Optional callback layer content mounted. onPositioned (positions?: IPositionedData) => void Optional callback called positioningContainer correctly positioned. positioningContainerMaxHeight number Set max height positioningContainer set positioningContainer expand contents bottom screen positioningContainerWidth number Custom width positioningContainer including borders. value 0, width applied. preventDismissOnScroll boolean true onClose dismiss scroll role string Aria role assigned positioningContainer (Eg. dialog, alertdialog). setInitialFocus boolean true positioningContainer attempt focus first focusable element contains. find element, focus set method return false. means contents responsibility either set focus focusable items. target HTMLElement | string | MouseEvent | Point | null target positioningContainer try position based . can either HTMLElement querySelector string valid HTMLElement MouseEvent. MouseEvent given origin point event used. targetPoint Point Point used position positioningContainer. Deprecated, use target instead. useTargetPoint boolean true use point rather rectangle position positioningContainer. example can used position based click.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Coachmark.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"Coachmark — Coachmark","text":"one coach mark  teaching bubble combo displayed time. Coach marks can standalone sequential. Sequential coach marks used sparingly walk complex multistep interactions. ’s recommended sequence  coach marks doesn’t exceed three steps. Coach marks designed hold teaching bubbles. Coach mark size, color, animation shouldn’t altered.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Coachmark.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Coachmark — Coachmark","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) tagList( uiOutput(ns(\"coachmark\")), DefaultButton.shinyInput(ns(\"toggleCoachmark\"), id = \"target\", text = \"Toggle coachmark\" ) ) } server <- function(id) { moduleServer(id, function(input, output, session) { ns <- session$ns coachmarkVisible <- reactiveVal(FALSE) observeEvent(input$toggleCoachmark, coachmarkVisible(!coachmarkVisible())) observeEvent(input$hideCoachmark, coachmarkVisible(FALSE)) output$coachmark <- renderUI({ if (coachmarkVisible()) Coachmark( target = \"#target\", TeachingBubbleContent( hasCloseButton = TRUE, onDismiss = triggerEvent(ns(\"hideCoachmark\")), headline = \"Example title\", primaryButtonProps = list(text = \"Try it\"), secondaryButtonProps = list(text = \"Try it again\"), \"Welcome to the land of coachmarks!\" ) ) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/ColorPicker.html","id":null,"dir":"Reference","previous_headings":"","what":"ColorPicker — ColorPicker","title":"ColorPicker — ColorPicker","text":"color picker (ColorPicker) used browse select colors. default, lets people navigate colors color spectrum; specify color either Red-Green-Blue (RGB);  alpha color code; Hexadecimal textboxes. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ColorPicker.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"ColorPicker — ColorPicker","text":"","code":"ColorPicker(...) ColorPicker.shinyInput(inputId, ..., value = defaultValue) updateColorPicker.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/ColorPicker.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"ColorPicker — ColorPicker","text":"... Props pass component. allowed props listed Details section. inputId ID component. value Starting value. session Object passed session argument Shiny server.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ColorPicker.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"ColorPicker — ColorPicker","text":"Object shiny.tag class suitable use UI Shiny app. update functions return nothing (called side effects).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ColorPicker.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"ColorPicker — ColorPicker","text":"alphaLabel string Label alpha textfield. alphaSliderHidden boolean Whether hide alpha (transparency) slider text field. alphaType 'alpha' | 'transparency' | 'none' alpha (default) means display slider text field editing alpha values. transparency also displays slider text field editing transparency values. none hides controls. Alpha represents opacity color, whereas transparency represents transparentness color: .e. 30% transparent color 70% opaqueness. blueLabel string Label blue text field. className string Additional CSS class(es) apply ColorPicker. color IColor | string Object CSS-compatible string describe color. componentRef IRefObject Gets component ref. greenLabel string Label green text field. hexLabel string Label hex text field. onChange (ev: React.SyntheticEvent, color: IColor) => void Callback user changes color. (called color changed via props.) redLabel string Label red text field. showPreview boolean Whether show color preview box. strings IColorPickerStrings Labels elements within ColorPicker. Defaults provided English . styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme (provided customization). ariaDescription string Detailed description use color rectangle. Moving thumb horizontally adjusts saturation moving vertically adjusts value (essentially, brightness). ariaLabel string Label ColorRectangle benefit screen reader users. ariaValueFormat string Format string color rectangle's current value read screen readers. string must include descriptions two placeholders current values: {0} saturation {1} value/brightness. className string Additional CSS class(es) apply ColorRectangle. color IColor Current color rectangle. componentRef IRefObject Gets component ref. minSize number Minimum width height. onChange (ev: React.MouseEvent | React.KeyboardEvent, color: IColor) => void Callback color changes. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme (provided customization). ariaLabel string Label ColorSlider benefit screen reader users. className string Additional CSS class(es) apply ColorSlider. componentRef IRefObject Gets component ref. isAlpha boolean true, slider represents alpha slider display gray checkered pattern background. Otherwise, slider represents hue slider. maxValue number Maximum value slider. minValue number Minimum value slider. onChange (event: React.MouseEvent | React.KeyboardEvent, newValue?: number) => void Callback issued value changes. overlayColor string Hex color use rendering alpha transparency slider's overlay, without #. overlayStyle React.CSSProperties Custom style overlay element. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme (provided customization). thumbColor string CSS-compatible string color thumb element. type 'hue' | 'alpha' | 'transparency' Type slider display. value number Current value slider.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ColorPicker.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"ColorPicker — ColorPicker","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) div( ColorPicker.shinyInput(ns(\"color\"), value = \"#00FF01\"), textOutput(ns(\"colorValue\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$colorValue <- renderText({ sprintf(\"Value: %s\", input$color) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/ComboBox.html","id":null,"dir":"Reference","previous_headings":"","what":"ComboBox — ComboBox","title":"ComboBox — ComboBox","text":"combo box (ComboBox) combines text field drop-menu, giving people way select option list enter choice. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ComboBox.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"ComboBox — ComboBox","text":"","code":"ComboBox(...) VirtualizedComboBox(...) ComboBox.shinyInput(inputId, ..., value = defaultValue) updateComboBox.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/ComboBox.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"ComboBox — ComboBox","text":"... Props pass component. allowed props listed Details section. inputId ID component. value Starting value. session Object passed session argument Shiny server.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ComboBox.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"ComboBox — ComboBox","text":"Object shiny.tag class suitable use UI Shiny app. update functions return nothing (called side effects).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ComboBox.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"ComboBox — ComboBox","text":"allowFreeform boolean Whether ComboBox free form, meaning user input bound provided options. Defaults false. ariaDescribedBy string Optional prop add string id can referenced inside aria-describedby attribute autoComplete '' | '' Whether ComboBox auto completes. user inputing text, suggested potential matches list options. combo box expanded, also scroll suggested option, give selected style. autofill IAutofillProps AutofillProps passed Autofill component inside combobox buttonIconProps IIconProps IconProps use button aspect combobox caretDownButtonStyles Partial Styles caret button. comboBoxOptionStyles Partial Default styles applied ComboBox options, case option come user-defined custom styles componentRef IRefObject Optional callback access IComboBox interface. Use instead ref accessing public methods properties component. dropdownMaxWidth number Custom max width dropdown dropdownWidth number Custom width dropdown (unless useComboBoxAsMenuWidth undefined false) getClassNames (theme: ITheme, isOpen: boolean, disabled: boolean, required: boolean, focused: boolean, allowFreeForm: boolean, hasErrorMessage: boolean, className?: string) => IComboBoxClassNames Custom function providing classNames ComboBox. Can used provide styles component instead applying top default styles. iconButtonProps IButtonProps Optional iconButton props combo box isButtonAriaHidden boolean Sets 'aria-hidden' attribute ComboBox's button element instructing screen readers handle element. element hidden default functionality handled input element arrow button meant decorative. keytipProps IKeytipProps Optional keytip combo box multiSelectDelimiter string multiple items selected, used separate values combobox input. onChange (event: React.FormEvent, option?: IComboBoxOption, index?: number, value?: string) => void Callback issued either: 1) selected option changes 2) manually edited value submitted. case may matched option allowFreeform also true (hence value true, parameter null case) onItemClick (event: React.FormEvent, option?: IComboBoxOption, index?: number) => void Callback issued ComboBox item clicked. onMenuDismiss () => void Function gets invoked menu gets dismissed onMenuDismissed () => void Function gets invoked ComboBox menu dismissed onMenuOpen () => void Function gets invoked ComboBox menu launched onPendingValueChanged (option?: IComboBoxOption, index?: number, value?: string) => void Callback issued user changes pending value ComboBox. called time component updated current pending value. Option, index, value undefined change taken place previously entered pending value still valid. onRenderLabel IRenderFunction Custom render function label text. onRenderLowerContent IRenderFunction Add additional content callout list. onRenderUpperContent IRenderFunction Add additional content callout list. onResolveOptions (options: IComboBoxOption[]) => IComboBoxOption[] | PromiseLike Callback issued options resolved, updated need passed first time onScrollToItem (itemIndex: number) => void Callback issued ComboBox requests list scroll specific element options IComboBoxOption[] Collection options ComboBox persistMenu boolean Menu created destroyed opened closed, instead hidden. improve perf menu opening potentially impact overall perf elements dom. used perf important. Note: may increase amount time takes comboBox mount. scrollSelectedToTop boolean options scrollable selected option positioned top callout opened (unless reached end scrollbar). shouldRestoreFocus boolean specified, determines whether callout (menu drops ) restore focus dismissed . false, menu try set focus whichever element focus menu opened. styles Partial Custom styles component text string Value show input, map combobox option theme ITheme Theme provided HOC. useComboBoxAsMenuWidth boolean Whether use ComboBoxes width menu's width multiselectAccessibleText string Accessible text label combobox multiselected. props IComboBoxProps Props render combobox.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/ComboBox.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"ComboBox — ComboBox","text":"Use combo box multiple choices can collapsed one title, list items long, space constrained.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ComboBox.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"ComboBox — ComboBox","text":"Use single words shortened statements options. use punctuation end options.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ComboBox.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"ComboBox — ComboBox","text":"","code":"library(shiny) library(shiny.fluent) options <- list( list(key = \"A\", text = \"Option A\"), list(key = \"B\", text = \"Option B\"), list(key = \"C\", text = \"Option C\") ) ui <- function(id) { ns <- NS(id) div( ComboBox.shinyInput(ns(\"combo\"), value = list(text = \"some text\"), options = options, allowFreeform = TRUE ), textOutput(ns(\"comboValue\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$comboValue <- renderText({ sprintf(\"Value: %s\", input$combo$text) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBar.html","id":null,"dir":"Reference","previous_headings":"","what":"CommandBar — CommandBar","title":"CommandBar — CommandBar","text":"CommandBar surface houses commands operate content window, panel, parent region resides . CommandBars one visible recognizable ways surface commands, can intuitive method interacting content page; however, overloaded poorly organized, can difficult use hide valuable commands user. CommandBars can also display search box finding content, hold simple commands well menus, display status ongoing actions. Commands sorted order importance, left--right right--left depending culture. Secondarily, organize commands logical groupings easier recall. CommandBars work best display 5-7 commands. helps users quickly find valuable features. need show commands, consider using overflow menu. need render status viewing controls, go right side CommandBar (left side left--right experience). display 2-3 items right side make overall CommandBar difficult parse. command items icon label. Commands can render labels well. smaller widths, commands can just use icon , recognizable frequently used commands. commands go overflow text labels can shown. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBar.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"CommandBar — CommandBar","text":"","code":"CommandBar(...) CommandBar.shinyInput(inputId, ..., itemValueGetter = function(el) el$key)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBar.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"CommandBar — CommandBar","text":"... Props pass component. allowed props listed Details section. inputId ID component. Value clicked CommandBarItem sent ID. itemValueGetter function takes CommandBarItem returns value sent Shiny. default returns key item.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBar.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"CommandBar — CommandBar","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBar.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"CommandBar — CommandBar","text":"buttonStyles IButtonStyles Custom styles individual button cacheKey string custom cache key used item. cacheKey changed, cache invalidate. Defaults key value. commandBarButtonAs IComponentAs Method override render individual command bar button. used item rendered overflow. iconOnly boolean Show icon item, text. apply item overflow. renderedInOverflow boolean Context item rendered. value mutated CommandBar useful adjusting onRender function. tooltipHostProps ITooltipHostProps Props tooltip iconOnly mode. ariaLabel string Accessibility text read screen reader user's focus enters command bar. screen reader read text reading information first focusable item command bar. buttonAs IComponentAs Custom component near far item buttons. used overflow menu items. className string Additional css class apply command bar componentRef IRefObject Optional callback access ICommandBar interface. Use instead ref accessing public methods properties component. dataDidRender (renderedData: ) => void Function called every time data rendered. provides data actually rendered. use case adding telemetry particular control shown overflow dropped result onReduceData, count number renders implementation onReduceData triggers. farItems ICommandBarItemProps[] Items render right side (left, RTL). ICommandBarItemProps extends IContextualMenuItem. items ICommandBarItemProps[] Items render. ICommandBarItemProps extends IContextualMenuItem. onDataGrown (movedItem: ICommandBarItemProps) => void Callback invoked data grown. onDataReduced (movedItem: ICommandBarItemProps) => void Callback invoked data reduced. onGrowData (data: ICommandBarData) => ICommandBarData | undefined Custom function grow data items small given space. Return undefined steps can taken avoid infinate loop. onReduceData (data: ICommandBarData) => ICommandBarData | undefined Custom function reduce data items fit given space. Return undefined steps can taken avoid infinate loop. overflowButtonAs IComponentAs Custom component overflow button. overflowButtonProps IButtonProps Props passed overflow button. menuProps passed prop, items provided prepended computed overflow items. overflowItems ICommandBarItemProps[] Default items overflow menu. ICommandBarItemProps extends IContextualMenuItem. shiftOnReduce boolean true, items 'shifted' front array reduced, unshifted grow. styles IStyleFunctionOrObject Customized styling layer top variant rules. theme ITheme Theme provided HOC.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBar.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"CommandBar — CommandBar","text":"","code":"library(shiny) library(shiny.fluent) items <- function(ns) { list( CommandBarItem( key = ns(\"newItem\"), text = \"New\", cacheKey = \"myCacheKey\", split = TRUE, iconProps = list(iconName = \"Add\"), subMenuProps = list( items = list( CommandBarItem( key = ns(\"emailMessage\"), text = \"Email message\", iconProps = list(iconName = \"Mail\") ), CommandBarItem( key = ns(\"calendarEvent\"), text = \"Calendar event\", iconProps = list(iconName = \"Calendar\") ) ) ) ), CommandBarItem( key = ns(\"upload\"), text = \"Upload\", iconProps = list(iconName = \"Upload\") ), CommandBarItem( key = ns(\"share\"), text = \"Share\", iconProps = list(iconName = \"Share\") ), CommandBarItem( key = ns(\"download\"), text = \"Download\", iconProps = list(iconName = \"Download\") ) ) } farItems <- function(ns) { list( CommandBarItem( key = ns(\"tile\"), text = \"Grid view\", ariaLabel = \"Grid view\", iconOnly = TRUE, iconProps = list(iconName = \"Tiles\") ), CommandBarItem( key = ns(\"info\"), text = \"Info\", ariaLabel = \"Info\", iconOnly = TRUE, iconProps = list(iconName = \"Info\") ) ) } ui <- function(id) { ns <- NS(id) tagList( CommandBar( items = items(ns), farItems = farItems(ns) ), textOutput(ns(\"commandBarItems\")), CommandBar.shinyInput( inputId = ns(\"commandBar\"), items = items(identity), farItems = farItems(identity) ), textOutput(ns(\"commandBar\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { commandBarItemClicked <- reactiveVal() observeEvent(input$newItem, commandBarItemClicked(\"newItem clicked (explicitly observed)\")) observeEvent(input$upload, commandBarItemClicked(\"upload clicked (explicitly observed)\")) output$commandBarItems <- renderText(commandBarItemClicked()) output$commandBar <- renderText(input$commandBar) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBarItem.html","id":null,"dir":"Reference","previous_headings":"","what":"Command bar item — CommandBarItem","title":"Command bar item — CommandBarItem","text":"Helper function constructing items CommandBar CommandBar.shinyInput.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBarItem.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Command bar item — CommandBarItem","text":"","code":"CommandBarItem( key, text, onClick = setInputValue(inputId = key, value = 0, event = TRUE), ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBarItem.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Command bar item — CommandBarItem","text":"key Key item. text Text displayed menu. onClick JS function runs item click. default sends input value input[[key]]. used within CommandBar.shinyInput, send value input ID specified inputId argument CommandBar.shinyInput. ... Additional props pass CommandBarItem.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/CommandBarItem.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Command bar item — CommandBarItem","text":"Item suitable use CommandBar CommandBar.shinyInput.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/ContextualMenu.html","id":null,"dir":"Reference","previous_headings":"","what":"ContextualMenu — ContextualMenu","title":"ContextualMenu — ContextualMenu","text":"ContextualMenus lists commands based context selection, mouse hover keyboard focus. one effective highly used command surfaces, can used variety places. variants originate command bar, cursor focus. come CommandBars use beak horizontally centered button. Ones come right click menu button beak, appear right cursor. ContextualMenus can submenus commands, show selection checks, icons. Organize commands groups divided rules. helps users remember command locations, find less used commands based proximity others. One also group sets mutually exclusive multiple selectable options. Use icons sparingly, high value commands, don’t mix icons selection checks, makes parsing commands difficult. Avoid submenus submenus can difficult invoke remember. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ContextualMenu.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"ContextualMenu — ContextualMenu","text":"","code":"ContextualMenu(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/ContextualMenu.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"ContextualMenu — ContextualMenu","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ContextualMenu.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"ContextualMenu — ContextualMenu","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ContextualMenu.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"ContextualMenu — ContextualMenu","text":"className string Additional css class apply ContextualMenuItem classNames IMenuItemClassNames Classnames different aspects menu item componentRef IRefObject Optional callback access IContextualMenuRenderItem interface. Use instead ref accessing public methods properties component. dismissMenu (ev?: , dismissAll?: boolean) => void prop get set ContextualMenu can called close menu item belongs . dismissAll true, menus closed. dismissSubMenu () => void prop get set ContextualMenu can called close item's subMenu, present. getSubmenuTarget () => HTMLElement | undefined prop get set wrapping component return element wraps ContextualMenuItem. Used openSubMenu. hasIcons boolean | undefined item icons index number Index item item IContextualMenuItem item display onCheckmarkClick (item: IContextualMenuItem, ev: React.MouseEvent) => void Click handler checkmark openSubMenu (item: , target: HTMLElement) => void prop get set ContextualMenu can called open item's subMenu, present. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme provided High-Order Component. focusableElementIndex number hasCheckmarks boolean hasIcons boolean index number totalItemCount number defaultMenuItemRenderer (item: IContextualMenuItemRenderProps) => React.ReactNode hasCheckmarks boolean hasIcons boolean items IContextualMenuItem[] role string totalItemCount number alignTargetEdge boolean true positioning logic prefer flip edges rather nudge rectangle fit within bounds, thus making sure element aligns perfectly target's alignment edge ariaLabel string Accessible label ContextualMenu's root element (inside callout). beakWidth number width beak. bounds IRectangle | ((target?: Target, targetWindow?: Window) => IRectangle | undefined) bounding rectangle (callback returns rectangle) contextual menu can appear . calloutProps ICalloutProps Additional custom props Callout. className string Additional CSS class apply ContextualMenu. componentRef IRefObject Optional callback access IContextualMenu interface. Use instead ref accessing public methods properties component. contextualMenuItemAs React.ComponentClass | React.FunctionComponent Custom component use rendering individual menu items. coverTarget boolean true, menu positioned cover target. false, positioned next target. delayUpdateFocusOnHover boolean true, contextual menu updated focus enters menu via means. result different behavior shouldFocusOnMount = false. directionalHint DirectionalHint menu positioned directionalHintFixed boolean true position change sides attempt fit ContextualMenu within bounds. still attempt align whatever bounds given. directionalHintForRTL DirectionalHint menu positioned RTL layouts. specified, mirror directionalHint used. doNotLayer boolean true render new layer. false render new layer. focusZoneProps IFocusZoneProps Props pass FocusZone. NOTE: default FocusZoneDirection used unless direction specified focusZoneProps (even focusZoneProps defined) gapSpace number gap ContextualMenu target getMenuClassNames (theme: ITheme, className?: string) => IContextualMenuClassNames Method provide classnames style contextual menu. hidden boolean true, renders ContextualMenu hidden state. Use flag, rather rendering ContextualMenu conditionally based visibility, improve rendering performance becomes visible. Note: ContextualMenu hidden content rendered. render ContextualMenu visible. id string ID ContextualMenu's root element (inside callout). used aria-owns uses, rather direct reference programmatic purposes. isBeakVisible boolean true beak visible. false shown. isSubMenu boolean Whether menu submenu another menu. items IContextualMenuItem[] Menu items display. labelElementId string Used aria-labelledby menu element inside callout. onDismiss (ev?: React.MouseEvent | React.KeyboardEvent, dismissAll?: boolean) => void Callback ContextualMenu tries close. dismissAll true submenus dismissed. onItemClick (ev?: React.MouseEvent | React.KeyboardEvent, item?: IContextualMenuItem) => boolean | void Click handler invoked onClick passed individual contextual menu item. Returning true dismiss menu even ev.preventDefault() called. onMenuDismissed (contextualMenu?: IContextualMenuProps) => void Callback menu closed (removing DOM). onMenuOpened (contextualMenu?: IContextualMenuProps) => void Callback menu opened. onRenderMenuList IRenderFunction Method override render list menu items. onRenderSubMenu IRenderFunction Custom render function submenu. onRestoreFocus (options: { originalElement?: HTMLElement | Window; containsFocus: boolean; }) => void Called component unmounting, focus needs restored. Argument passed contains two variables, element underlying popup believes focus go whether popup currently contains focus. prop provided, focus restored automatically, need call originalElement.focus() shouldFocusOnContainer boolean Whether focus contextual menu container (opposed first menu item). shouldFocusOnMount boolean Whether focus menu mounted. shouldUpdateWhenHidden boolean true, menu updated even hidden=true. Note consume resources update even nothing shown user. might helpful updates small want menu display quickly hidden set false. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. subMenuHoverDelay number Delay (milliseconds) wait expanding / dismissing submenu mouseEnter mouseLeave target Target target ContextualMenu try position based . can either element, query selector string resolving valid element, MouseEvent. MouseEvent given, origin point event used. theme ITheme Theme provided higher-order component. title string Title displayed top menu, items. useTargetAsMinWidth boolean true context menu minimum width equal width target element useTargetWidth boolean true context menu render width target element","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/ContextualMenu.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"ContextualMenu — ContextualMenu","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) div( DefaultButton.shinyInput( ns(\"toggleContextualMenu\"), id = \"target\", text = \"Toggle menu\" ), reactOutput(ns(\"contextualMenu\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { ns <- session$ns showContextualMenu <- reactiveVal(FALSE) observeEvent(input$toggleContextualMenu, { showContextualMenu(!showContextualMenu()) }) output$contextualMenu <- renderReact({ menuItems <- JS(\"[ { key: 'newItem', text: 'New', onClick: () => console.log('New clicked'), }, { key: 'divider_1', itemType: 1, }, { key: 'rename', text: 'Rename', onClick: () => console.log('Rename clicked'), }, { key: 'edit', text: 'Edit', onClick: () => console.log('Edit clicked'), }, { key: 'properties', text: 'Properties', onClick: () => console.log('Properties clicked'), }, { key: 'linkNoTarget', text: 'Link same window', href: 'http://bing.com', }, { key: 'linkWithTarget', text: 'Link new window', href: 'http://bing.com', target: '_blank', }, { key: 'linkWithOnClick', name: 'Link click', href: 'http://bing.com', onClick: function(){ alert('Link clicked'); ev.preventDefault(); }, target: '_blank', }, { key: 'disabled', text: 'Disabled item', disabled: true, onClick: () => console.error('Disabled item should not be clickable.'), }, ]\") ContextualMenu( items = menuItems, hidden = !showContextualMenu(), target = \"#target\", onItemClick = JS(paste0( \"function() {\", \" Shiny.setInputValue('\", ns(\"toggleContextualMenu\"), \"', Math.random());\", \"}\" )), onDismiss = JS(paste0( \"function() {\", \" Shiny.setInputValue('\", ns(\"toggleContextualMenu\"), \"', Math.random());\", \"}\" )) ) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/DatePicker.html","id":null,"dir":"Reference","previous_headings":"","what":"DatePicker — DatePicker","title":"DatePicker — DatePicker","text":"Picking date can tough without context. date picker (DatePicker) offers drop-control ’s optimized picking single date calendar view contextual information like day week fullness calendar important. can modify calendar provide additional context limit available dates. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DatePicker.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"DatePicker — DatePicker","text":"","code":"DatePicker(...) DatePicker.shinyInput(inputId, ..., value = defaultValue) updateDatePicker.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/DatePicker.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"DatePicker — DatePicker","text":"... Props pass component. allowed props listed Details section. inputId ID component. value Starting value. session Object passed session argument Shiny server.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DatePicker.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"DatePicker — DatePicker","text":"Object shiny.tag class suitable use UI Shiny app. update functions return nothing (called side effects).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DatePicker.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"DatePicker — DatePicker","text":"allFocusable boolean Allows elements focused, including disabled ones allowTextInput boolean Whether DatePicker allows input date string directly ariaLabel string Aria Label TextField DatePicker screen reader users. borderless boolean Determines DatePicker border. calendarAs IComponentAs Custom Calendar used date picking calendarProps ICalendarProps Pass calendar props calendar component calloutProps ICalloutProps Pass callout props callout component className string Optional Classname datepicker root element . componentRef IRefObject Optional callback access IDatePicker interface. Use instead ref accessing public methods properties component. dateTimeFormatter ICalendarFormatDateCallbacks Apply additional formating dates, example localized date formatting. disableAutoFocus boolean Whether DatePicker open automatically control focused disabled boolean Disabled state DatePicker. firstDayOfWeek DayOfWeek first day week locale. firstWeekOfYear FirstWeekOfYear Defines first week year start, FirstWeekOfYear.FirstDay, FirstWeekOfYear.FirstFullWeek FirstWeekOfYear.FirstFourDayWeek possible values formatDate (date?: Date) => string Optional method format chosen date string display DatePicker highlightCurrentMonth boolean Whether month picker highlight current month highlightSelectedMonth boolean Whether month picker highlight selected month initialPickerDate Date initially highlighted date calendar picker isMonthPickerVisible boolean Whether month picker shown beside day picker hidden. isRequired boolean Whether DatePicker required field label string Label DatePicker maxDate Date maximum allowable date. minDate Date minimum allowable date. onAfterMenuDismiss () => void Callback runs DatePicker's menu (Calendar) closed onSelectDate (date: Date | null | undefined) => void Callback issued date selected parseDateFromString (dateStr: string) => Date | null Optional method parse text input value date, useful allowTextInput set true pickerAriaLabel string Aria label date picker popup screen reader users. placeholder string Placeholder text DatePicker showCloseButton boolean Whether CalendarDay close button shown . showGoToToday boolean Whether \"Go today\" link shown showMonthPickerAsOverlay boolean Show month picker top date picker visible. showWeekNumbers boolean Whether calendar show week number (weeks 1 53) week row strings IDatePickerStrings Localized strings use DatePicker styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. tabIndex number tabIndex TextField textField ITextFieldProps Pass textField props textField component. Prop name \"textField\" compatiblity upcoming slots work. theme ITheme Theme provided High-Order Component. today Date Value today. null, current time client machine used. underlined boolean Whether Textfield DatePicker underlined. value Date Default value DatePicker, ","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/DatePicker.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"DatePicker — DatePicker","text":"Use control way ’s designed built. Don’t break apart.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DatePicker.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"DatePicker — DatePicker","text":"control provides  date specific format.  date can entered input field, provide helper text appropriate format.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DatePicker.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"DatePicker — DatePicker","text":"","code":"# Example 1 library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) div( DatePicker.shinyInput(ns(\"date\"), value = \"2020-06-25T22:00:00.000Z\"), textOutput(ns(\"dateValue\")), h3(\"If `value` is missing, default to system date\"), DatePicker.shinyInput(ns(\"date2\")), textOutput(ns(\"dateDefault\")), h3(\"If `value` is NULL, return NULL\"), DatePicker.shinyInput(ns(\"date3\"), value = NULL, placeholder = \"I am placeholder!\"), textOutput(ns(\"dateNull\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$dateValue <- renderText({ sprintf(\"Value: %s\", input$date) }) output$dateDefault <- renderText({ sprintf(\"Value: %s\", input$date2) }) output$dateNull <- renderText({ sprintf(\"Value: %s\", deparse(input$date3)) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 2 library(shiny) library(shiny.fluent) # Supplying custom strings for DatePicker ui <- function(id) { fluentPage( DatePicker.shinyInput( \"date\", value = Sys.Date(), strings = list( months = list( \"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\" ), shortMonths = list( \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\" ), days = list( \"Sunday\", \"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\", \"Saturday\" ), shortDays = list(\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"), goToToday = \"Go to today\", prevMonthAriaLabel = \"Go to previous month\", nextMonthAriaLabel = \"Go to next month\", prevYearAriaLabel = \"Go to previous year\", nextYearAriaLabel = \"Go to next year\" ) ) ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":null,"dir":"Reference","previous_headings":"","what":"DetailsList — DetailsList","title":"DetailsList — DetailsList","text":"details list (DetailsList) robust way display information-rich collection items, allow people  sort, group, filter  content. Use  details list  information density critical. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"DetailsList — DetailsList","text":"","code":"DetailsList(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"DetailsList — DetailsList","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"DetailsList — DetailsList","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"DetailsList — DetailsList","text":"onColumnDragEnd (props: { dropLocation?: ColumnDragEndLocation; }, event: MouseEvent) => void Callback notify column dragEnd event List Need check whether dragEnd happened corresponding list outside list cellStyleProps ICellStyleProps Custom styles cell rendering. column IColumn column definition component instance. columnIndex number column index component instance. componentRef () => void reference component instance. dragDropHelper IDragDropHelper | null drag drop helper component instance. isDraggable boolean Whether column can re-ordered via drag drop. isDropped boolean Whether column dropped via drag drop. onColumnClick (ev: React.MouseEvent, column: IColumn) => void Callback fired click event occurs. onColumnContextMenu (column: IColumn, ev: React.MouseEvent) => void Callback fired contextual menu event provide contextual menu UI. onRenderColumnHeaderTooltip IRenderFunction Render function providing column header tooltip. parentId string Parent ID used accessibility label(s). setDraggedItemIndex (itemIndex: number) => void styles IStyleFunctionOrObject component styles respect render. theme ITheme theme object respect render. updateDragInfo (props: { itemIndex: number; }, event?: MouseEvent) => void Callback drag drop event. useFastIcons boolean Whether use fast icon check components. icons targeted customization still customizable via class names. columns IColumn[] Column metadata selection ISelection Selection utilities selectionMode SelectionMode Selection mode onRenderFooter IRenderFunction onRenderHeader IRenderFunction ariaLabel string ariaLabel entire header ariaLabelForSelectAllCheckbox string ariaLabel header checkbox selects deselects everything ariaLabelForSelectionColumn string ariaLabel selection column ariaLabelForToggleAllGroupsButton string ariaLabel expand/collapse group button className string Overriding class name collapseAllVisibility CollapseAllVisibility Whether collapse visibility columnReorderOptions IColumnReorderOptions Column reordering options columnReorderProps IColumnReorderHeaderProps Column reordering options componentRef IRefObject Ref component isAllCollapsed boolean Whether collapsed layoutMode DetailsListLayoutMode Layout mode - fixedColumns justified minimumPixelsForDrag number Minimum pixels moved dragging registered onColumnAutoResized (column: IColumn, columnIndex: number) => void Callback column automatically resized onColumnClick (ev: React.MouseEvent, column: IColumn) => void Callback column clicked onColumnContextMenu (column: IColumn, ev: React.MouseEvent) => void Callback column needs show context menu onColumnIsSizingChanged (column: IColumn, isSizing: boolean) => void Callback column sizing changed onColumnResized (column: IColumn, newWidth: number, columnIndex: number) => void Callback column resized onRenderColumnHeaderTooltip IRenderFunction Callback render tooltip column header onRenderDetailsCheckbox IRenderFunction provided, can used render custom checkbox onToggleCollapseAll (isAllCollapsed: boolean) => void Callback collapse toggled selectAllVisibility SelectAllVisibility Select button visibility styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme Higher Order Component useFastIcons boolean Whether use fast icon check components. icons targeted customization still customizable via class names. columns IColumn[] Column metadata selection ISelection Selection utilities selectionMode SelectionMode Selection mode cellStyleProps ICellStyleProps Rules rendering column cells. checkboxVisibility CheckboxVisibility | undefined Checkbox visibility columns IColumn[] Column metadata groupNestingDepth number Nesting depth grouping indentWidth number | undefined much indent rowWidth number Minimum width row. selection ISelection | undefined Selection utilities selectionMode SelectionMode | undefined Selection mode viewport IViewport | undefined View port virtualized list ariaLabel string Accessible label describing summarizing list. ariaLabelForGrid string Accessible label grid within list. ariaLabelForListHeader string Accessible label list header. ariaLabelForSelectAllCheckbox string Accessible label select checkbox. ariaLabelForSelectionColumn string Accessible label name selection column. cellStyleProps ICellStyleProps Props impacting render style cells. Since impact calculated column widths, handled separately normal theme styling, passed styling system. checkboxCellClassName string Class name add cell checkbox. checkboxVisibility CheckboxVisibility Controls visibility selection check box. checkButtonAriaLabel string Accessible label check button. className string Class name add root element. columnReorderOptions IColumnReorderOptions Options column reordering using drag drop. columns IColumn[] column defitions. none provided, default columns created based items' properties. compact boolean Whether render compact mode. componentRef IRefObject Callback access IDetailsList interface. Use instead ref accessing public methods properties component. constrainMode ConstrainMode Controls list contrains overflow. disableSelectionZone boolean Whether disable built-SelectionZone, host component can provide . dragDropEvents IDragDropEvents Map callback functions related row drag drop functionality. enableUpdateAnimations boolean Whether animate updates enterModalSelectionOnTouch boolean Whether selection zone enter modal state touch. getCellValueKey (item?: , index?: number, column?: IColumn) => string provided, \"default\" item column cell value return. column's getValueKey can override getCellValueKey. getGroupHeight IGroupedListProps['getGroupHeight'] Callback override default group height calculation used list virtualization. getKey (item: , index?: number) => string Callback get item key, used selection render. Must provided sorting filtering enabled. getRowAriaDescribedBy (item: ) => string Callback get aria-describedby IDs (space-separated strings) elements describe item. getRowAriaLabel (item: ) => string Callback get aria-label string given item. groupProps IDetailsGroupRenderProps Override properties render groups. groups IGroup[] Grouping instructions. indentWidth number Override indent width used group nesting. initialFocusedIndex number Default index set focus items rendered index exists. isHeaderVisible boolean Controls visibility header. isPlaceholderData boolean Set true indicate items displayed placeholder data. items [] items render. layoutMode DetailsListLayoutMode Controls columns adjusted. listProps IListProps Properties pass List components rendered. minimumPixelsForDrag number minimum mouse move distance interpret action drag event. onActiveItemChanged (item?: , index?: number, ev?: React.FocusEvent) => void Callback item list becomes active clicking anywhere inside row navigating keyboard. onColumnHeaderClick (ev?: React.MouseEvent, column?: IColumn) => void Callback user clicks column header. onColumnHeaderContextMenu (column?: IColumn, ev?: React.MouseEvent) => void Callback user asks contextual menu (usually via right click) column header. onColumnResize (column?: IColumn, newWidth?: number, columnIndex?: number) => void Callback fired column resize onDidUpdate (detailsList?: DetailsListBase) => void Callback list updated. Useful telemetry tracking externally. onItemContextMenu (item?: , index?: number, ev?: Event) => void | boolean Callback context menu item accessed. undefined false returned, ev.preventDefault() called. onItemInvoked (item?: , index?: number, ev?: Event) => void Callback given row invoked (pressing enter selected.) onRenderCheckbox IRenderFunction provided, can used render custom checkbox. onRenderDetailsFooter IRenderFunction override render details footer. onRenderDetailsHeader IRenderFunction override render details header. onRenderItemColumn (item?: , index?: number, column?: IColumn) => React.ReactNode provided, \"default\" item column renderer method. affects cells within rows, rows . column definition provides onRender method, used instead . onRenderMissingItem (index?: number, rowProps?: IDetailsRowProps) => React.ReactNode Callback render item missing. onRenderRow IRenderFunction Callback override default row rendering. onRowDidMount (item?: , index?: number) => void Callback given row mounted. Useful identifying row rendered page. onRowWillUnmount (item?: , index?: number) => void Callback given row unmounted. Useful identifying row removed page. onShouldVirtualize (props: IListProps) => boolean Callback determine whether list rendered full, virtualized. Virtualization add remove pages items user scrolls visible range. benefits larger list scenarios reducing DOM screen, can negatively affect performance smaller lists. default implementation virtualize callback provided. rowElementEventMap { eventName: string; callback: (context: IDragDropContext, event?: ) => void; }[] Event names corresponding callbacks registered rendered row elements. selection ISelection Selection model track selection state. selectionMode SelectionMode Controls /details list manages selection. Options include none, single, multiple selectionPreservedOnEmptyClick boolean default, selection cleared clicking empty (non-focusable) section screen. Setting value true overrides behavior maintains selection. selectionZoneProps ISelectionZoneProps Additional props pass SelectionZone created default. setKey string key uniquely identifies given items. provided, selection reset key changes. shouldApplyApplicationRole boolean Whether role application applied list. styles IStyleFunctionOrObject Custom overrides themed default styles. theme ITheme Theme provided higher-order component. useFastIcons boolean Whether use fast icon check components. icons targeted customization still customizable via class names. usePageCache boolean Whether enable render page caching. experimental performance optimization default. useReducedRowRenderer boolean Whether re-render row props changed. Might cause regression depending external updates. viewport IViewport Viewport info, provided withViewport decorator. cellsByColumn { [columnKey: string]: React.ReactNode; } Optional pre-rendered content per column. Preferred onRender onRenderItemColumn provided. checkboxCellClassName string Class name checkbox cell checkButtonAriaLabel string Check button's aria label className string Overriding class name collapseAllVisibility CollapseAllVisibility Collapse visibility compact boolean Whether render compact mode componentRef IRefObject Ref component dragDropEvents IDragDropEvents Handling drag drop events dragDropHelper IDragDropHelper Helper drag drop enableUpdateAnimations boolean Whether animate updates eventsToRegister { eventName: string; callback: (item?: , index?: number, event?: ) => void; }[] list events register getRowAriaDescribedBy (item: ) => string Callback getting row aria-describedby getRowAriaLabel (item: ) => string Callback getting row aria label item Data source component itemIndex number Index collection items DetailsList onDidMount (row?: DetailsRowBase) => void Callback mount parent onRenderCheck (props: IDetailsRowCheckProps) => JSX.Element Callback rendering checkbox onRenderDetailsCheckbox IRenderFunction provided, can used render custom checkbox onWillUnmount (row?: DetailsRowBase) => void Callback mount parent rowFieldsAs React.ComponentType DOM element render row field styles IStyleFunctionOrObject Overriding styles row theme ITheme Theme provided styled() function useFastIcons boolean Whether use fast icon check components. icons targeted customization still customizable via class names. useReducedRowRenderer boolean Rerender DetailsRow props changed. Might cause regression depending external updates. anySelected boolean selected - also true isSelectionModal canSelect boolean Can checkbox selectable checkClassName string classname passed Check component className string Optional className attach slider root element. compact boolean compact mode? isHeader boolean check part header DetailsList isVisible boolean Whether checkbox visible onRenderDetailsCheckbox IRenderFunction provided, can used render custom checkbox selected boolean Whether check selected styles IStyleFunctionOrObject Style override theme ITheme Theme provided High-Order Component. useFastIcons boolean Whether use fast icon check components. icons targeted customization still customizable via class names. cellStyleProps ICellStyleProps Style properties customize cell render output. columns IColumn[] Columns metadata columnStartIndex number Index start column compact boolean whether render compact field enableUpdateAnimations boolean item Data source component itemIndex number item index collection DetailsList rowClassNames { [k keyof Pick]: string; } Subset classnames currently generated DetailsRow used within DetailsRowFields. columns IColumn[] Column metadata selection ISelection Selection utilities selectionMode SelectionMode Selection mode ariaLabelForShimmer string Aria label shimmer. Set grid shimmer enabled. detailsListStyles IDetailsListProps['styles'] DetailsList styles pass . enableShimmer boolean Boolean flag control render placeholders vs real items. consumer app know fetching data done toggle prop. onRenderCustomPlaceholder (rowProps: IDetailsRowProps, index?: number, defaultRender?: (props: IDetailsRowProps) => React.ReactNode) => React.ReactNode Custom placeholder renderer used need override default placeholder DetailsRow. rowProps argument passed leverage calculated column measurements done DetailsList can use optional arguments item index defaultRender execute additional logic rendering default placeholder. removeFadingOverlay boolean Determines whether remove fading bottom overlay shimmering items used emphasize unknown number items fetched. shimmerLines number Number shimmer placeholder lines render. shimmerOverlayStyles IStyleFunctionOrObject Custom styles override styles specific ShimmeredDetailsList root area. styles IStyleFunctionOrObject Custom styles override styles specific ShimmeredDetailsList root area. skipViewportMeasures boolean Whether use ResizeObserver (available) detect measure viewport 'resize' events. Falls back window 'resize' event.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"DetailsList — DetailsList","text":"List items composed selection, icon, name columns minimum. can include columns,  date modified, metadata field associated collection. Avoid using file type icon overlays denote status file can make entire icon unclear. multiple lines text column, consider variable row height variant. Give columns ample default width display information.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"DetailsList — DetailsList","text":"Use sentence-style capitalization column headers—capitalize first word. info, see [Capitalization] Microsoft Writing Style Guide. [capitalization]: https://docs.microsoft.com/style-guide/capitalization","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"my-scrollable-content-isn-t-updating-on-scroll-what-should-i-do-","dir":"Reference","previous_headings":"","what":"My scrollable content isn't updating on scroll. What should I do?","title":"DetailsList — DetailsList","text":"Add data--scrollable=\"true\" attribute scrollable element containing DetailsList. default, List used within DetailsList use body element scrollable element. contain List within scrollable div using overflow: auto scroll, List needs listen scroll events element instead. initialization, List traverse DOM looking first element data--scrollable attribute know element listen knowing re-evaulate visible window.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"my-list-is-not-re-rendering-when-i-mutate-its-items-what-should-i-do-","dir":"Reference","previous_headings":"","what":"My List is not re-rendering when I mutate its items. What should I do?","title":"DetailsList — DetailsList","text":"determine List within DetailsList re-render contents, component performs referential equality check within shouldComponentUpdate method. done minimize performance overhead associated re-rendering virtualized List pages, recommended React documentation. result implementation, inner List determine re-render array values mutated. avoid problem, recommend re-creating items array backing DetailsList using method Array.prototype.concat ES6 spread syntax shown : re-creating items array without mutating values, inner List correctly determine contents changed re-render new values.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DetailsList.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"DetailsList — DetailsList","text":"","code":"# Example 1 library(shiny) library(shiny.fluent) items <- list( list(key = \"1\", name = \"Mark\", surname = \"Swanson\"), list(key = \"2\", name = \"Josh\", surname = \"Johnson\") ) columns <- list( list(key = \"name\", fieldName = \"name\", name = \"Name\"), list(key = \"surname\", fieldName = \"surname\", name = \"Surname\") ) ui <- function(id) { ns <- NS(id) DetailsList(items = items, columns = columns) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 2 library(shiny) library(shiny.fluent) # Custom columns text alignment and formatting items <- list( list( key = \"1\", name = \"Mark\", number = \"2\" ), list( key = \"2\", name = \"Josh\", number = \"1\" ) ) columns <- list( list( key = \"name\", fieldName = \"name\", name = \"Name\" ), list( key = \"number\", fieldName = \"number\", name = \"Number\" ) ) ui <- function(id) { DetailsList( items = items, columns = columns, onRenderItemColumn = JS(\"(item, index, column) => { const fieldContent = item[column.fieldName] switch (column.key) { case 'name': return React.createElement( 'span', { style: { textAlign: 'right', width: '100%', display: 'block' } }, fieldContent ); case 'number': return React.createElement( 'span', { style: { textAlign: 'left', width: '100%', display: 'block' } }, `%${fieldContent}` ); default: return React.createElement('span', null, fieldContent); } }\") ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 3 library(shiny) library(shiny.fluent) # Selecting rows in DetailsList CustomComponents <- tags$script(HTML(\"(function() { const React = jsmodule['react']; const Fluent = jsmodule['@fluentui/react']; const Shiny = jsmodule['@/shiny']; const CustomComponents = jsmodule['CustomComponents'] ??= {}; function useSelection(inputId) { const selection = React.useRef(new Fluent.Selection({ onSelectionChanged() { const value = this.getSelectedIndices().map(i => i + 1); // R uses 1-based indexing. Shiny.setInputValue(inputId, value); } })); return selection.current; } CustomComponents.DetailsList = function DetailsList({ inputId, ...rest }) { const selection = useSelection(inputId); return React.createElement(Fluent.DetailsList, { selection, ...rest }); } })()\")) DetailsList.shinyInput <- function(inputId, ...) { shiny.react::reactElement( module = \"CustomComponents\", name = \"DetailsList\", props = shiny.react::asProps(inputId = inputId, ...), deps = shinyFluentDependency() ) } items <- list( list(name = \"Apple\"), list(name = \"Banana\"), list(name = \"Cherry\") ) ui <- function(id) { ns <- NS(id) tagList( CustomComponents, DetailsList.shinyInput(ns(\"selection\"), items = items), textOutput(ns(\"text\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$text <- renderText(paste(input$selection, collapse = \", \")) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":null,"dir":"Reference","previous_headings":"","what":"Dialog — Dialog","title":"Dialog — Dialog","text":"dialog box (Dialog)   temporary pop-  takes focus  page  app requires people interact . ’s primarily used  confirming actions, deleting file, asking people make choice. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Dialog — Dialog","text":"","code":"Dialog(...) DialogFooter(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Dialog — Dialog","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Dialog — Dialog","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Dialog — Dialog","text":"className string Optional override class name closeButtonAriaLabel string Label passed aria-label close button componentRef IRefObject Optional callback access IDialogContent interface. Use instead ref accessing public methods properties component. draggableHeaderClassName string classname header draggable isMultiline boolean inside multiline wrapper onDismiss (ev?: React.MouseEvent) => Callback Dialog dismissed close button light dismiss, animation completes. responsiveMode ResponsiveMode Responsive mode passed decorator. showCloseButton boolean Show 'x' close button upper-right corner styles IStyleFunctionOrObject Call provide customized styling layer top variant rules subText string subtext display dialog subTextId string Id subText container theme ITheme Theme provided HOC. title string | JSX.Element title text display top dialog. titleId string Id title container titleProps React.HTMLAttributes props title container. topButtonsProps IButtonProps[] top buttons show next close button type DialogType type Dialog display. className string Optional override class name componentRef IRefObject Gets component ref. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. ariaDescribedById string Optional id aria-DescribedBy ariaLabelledById string Optional id aria-LabelledBy className string Optional class name added root class componentRef IRefObject Optional callback access IDialog interface. Use instead ref accessing public methods properties component. containerClassName string Optional override container class contentClassName string Optional override content class dialogContentProps IDialogContentProps Props passed Dialog Content hidden boolean Whether dialog hidden. isBlocking boolean Whether dialog can light dismissed clicking outside dialog (overlay). isDarkOverlay boolean Whether overlay dark themed. isOpen boolean Whether dialog displayed. Deprecated, use hidden instead. maxWidth ICSSRule | ICSSPixelUnitRule Sets maximum width dialog. limits width property larger value specified max-width. minWidth ICSSRule | ICSSPixelUnitRule Sets minimum width dialog. limits width property smaller value specified min-width. modalProps IModalProps Props passed Modal onDismiss (ev?: React.MouseEvent) => callback function Dialog dismissed close button light dismiss. Can also specified separately content modal. onDismissed () => callback function called Dialog dismissed animation complete. onLayerDidMount () => void callback function Dialog content mounted overlay layer onLayerMounted () => void Deprecated 0.81.2, use onLayerDidMount instead. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules subText string subtext display dialog. theme ITheme Theme provided HOC. title string | JSX.Element title text display top dialog. topButtonsProps IButtonProps[] top buttons show next close button type DialogType type Dialog display.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"Dialog — Dialog","text":"use three buttons. Dialog boxes consist header, body, footer. Validate people’s entries acceptable closing dialog box. Show inline validation error near field must correct. Blocking dialogs used sparingly, critical people make choice provide information can proceed. Blocking dialogs generally used irreversible potentially destructive tasks. ’re typically paired overlay without light dismiss.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"header","dir":"Reference","previous_headings":"","what":"Header","title":"Dialog — Dialog","text":"Locks top dialog. May include icon left title. Includes  Close button top-right corner.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"footer","dir":"Reference","previous_headings":"","what":"Footer","title":"Dialog — Dialog","text":"Lock buttons bottom dialog. Includes one primary button. secondary button optional.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"width","dir":"Reference","previous_headings":"","what":"Width","title":"Dialog — Dialog","text":"Maximum 340 pixels. Minimum 288 pixels.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"height","dir":"Reference","previous_headings":"","what":"Height","title":"Dialog — Dialog","text":"Maximum 340 pixels. Minimum 172 pixels.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"title","dir":"Reference","previous_headings":"","what":"Title","title":"Dialog — Dialog","text":"Keep title concise possible. Don’t use periods end  titles. mandatory content explain main information clear, concise, specific statement question. example, “Delete file?” instead “sure?” title shouldn’t description body content. example, don’t use “Error” title. Instead, use informative statement like “session ended.” Use sentence-style capitalization—capitalize first word. info, see Capitalization Microsoft Writing Style Guide.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"body-copy-optional-","dir":"Reference","previous_headings":"","what":"Body copy (Optional)","title":"Dialog — Dialog","text":"restate title body. Use ending punctuation sentences. Use actionable language, important information beginning. Use optional body content area additional info instructions, needed. include information needed help people make decision.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"button-labels","dir":"Reference","previous_headings":"","what":"Button labels","title":"Dialog — Dialog","text":"Write button labels specific responses main information title. title “Delete file?” buttons labeled “Delete” “Cancel”. concise. Limit labels one two words. Usually single verb best. Include noun room interpretation verb means. example, “Delete” “Delete file”.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dialog.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Dialog — Dialog","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) div( DefaultButton.shinyInput(ns(\"showDialog\"), text = \"Open dialog\"), reactOutput(ns(\"reactDialog\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { ns <- session$ns isDialogOpen <- reactiveVal(FALSE) output$reactDialog <- renderReact({ dialogContentProps <- list( type = 0, title = \"Missing Subject\", closeButtonAriaLabel = \"Close\", subText = \"Do you want to send this message without a subject?\" ) Dialog( hidden = !isDialogOpen(), onDismiss = JS(paste0( \"function() {\", \" Shiny.setInputValue('\", ns(\"hideDialog\"),\"', Math.random());\", \"}\" )), dialogContentProps = dialogContentProps, modalProps = list(), DialogFooter( PrimaryButton.shinyInput(ns(\"dialogSend\"), text = \"Send\"), DefaultButton.shinyInput(ns(\"dialogDontSend\"), text = \"Don't send\") ) ) }) observeEvent(input$showDialog, isDialogOpen(TRUE)) observeEvent(input$hideDialog, isDialogOpen(FALSE)) observeEvent(input$dialogSend, isDialogOpen(FALSE)) observeEvent(input$dialogDontSend, isDialogOpen(FALSE)) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Divider.html","id":null,"dir":"Reference","previous_headings":"","what":"Divider — VerticalDivider","title":"Divider — VerticalDivider","text":"Divider line used visually differentiate different parts UI. commonly used headers command bars. divider automatically center algins within parent container can customized shown different heights colors. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Divider.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Divider — VerticalDivider","text":"","code":"VerticalDivider(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Divider.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Divider — VerticalDivider","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Divider.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Divider — VerticalDivider","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Divider.html","id":"best-practices","dir":"Reference","previous_headings":"","what":"Best practices","title":"Divider — VerticalDivider","text":"Use divider component show sectional continuity change content two blocks information. spacing around divider generally determined content surrounding . two recommended divider color combinations: #C8C8C8/neutralTertiaryAlt divider used within #F4F4F4/neutralLighter layout #EAEAEA/neutralLight divider used within #FFFFFF/white layout","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DocumentCard.html","id":null,"dir":"Reference","previous_headings":"","what":"DocumentCard — DocumentCard","title":"DocumentCard — DocumentCard","text":"document card (DocumentCard) represents file, contains additional metadata actions. offers people richer view file typical grid view. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DocumentCard.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"DocumentCard — DocumentCard","text":"","code":"DocumentCard(...) DocumentCardActions(...) DocumentCardActivity(...) DocumentCardDetails(...) DocumentCardImage(...) DocumentCardLocation(...) DocumentCardLogo(...) DocumentCardPreview(...) DocumentCardStatus(...) DocumentCardTitle(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/DocumentCard.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"DocumentCard — DocumentCard","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DocumentCard.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"DocumentCard — DocumentCard","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DocumentCard.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"DocumentCard — DocumentCard","text":"actions IButtonProps[] actions available document. className string Optional override class name componentRef IRefObject Gets component ref. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. views Number number views document received. activity string Describes activity taken place, \"Created Feb 23, 2016\". className string Optional override class name componentRef IRefObject Gets component ref. people IDocumentCardActivityPerson[] One people involved activity. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. className string Optional override class name componentRef IRefObject Gets component ref. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. className string Optional override class name componentRef IRefObject Gets component ref. height number provided, forces preview image height. iconProps IIconProps props icon associated document type. imageFit ImageFit Used determine size image fit dimensions component. dimensions provided, image fit using ImageFit.scale, otherwise ImageFit.none used. imageSrc string Path preview image. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. width number provided, forces preview image width. ariaLabel string Aria label link document location. className string Optional override class name componentRef IRefObject Gets component ref. location string Text location document. locationHref string URL navigate location. onClick (ev?: React.MouseEvent) => void Function call location clicked. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. className string Optional override class name componentRef IRefObject Gets component ref. logoIcon string Describes DocumentCard Logo badge. logoName string Describe Logo name, optional. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. className string Optional override class name componentRef IRefObject Gets component ref. getOverflowDocumentCountText (overflowCount: number) => string function return string describe number overflow documents. (overflowCount: number) =\\> +${ overflowCount } , previewImages IDocumentCardPreviewImage[] One preview images display. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. accentColor string Hex color value line card, correspond document type. supplied using 'compact' card layout. Deprecated v4.17.1, removed \\>= v5.0.0. children React.ReactNode Child components render within card. className string Optional override class name componentRef IRefObject Optional callback access IDocumentCard interface. Use instead ref accessing public methods properties component. onClick (ev?: React.SyntheticEvent) => void Function call card clicked keyboard Enter/Space pushed. onClickHref string URL navigate card clicked. function also provided, used instead URL. onClickTarget string target browser context opening link. specified, open tab/window. role string Aria role assigned documentCard (Eg. button, link). Use override default assignment. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. type DocumentCardType type DocumentCard display. className string Optional override class name componentRef IRefObject Gets component ref. status string Describe status information. Required field. statusIcon string Describes DocumentCard status icon. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. className string Optional override class name componentRef IRefObject Gets component ref. shouldTruncate boolean Whether truncate title fit within box. May performance impact. showAsSecondaryTitle boolean Whether show title secondary title style smaller font lighter color. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC. title string Title text. card represents one document, title one document \"+X\" string. example, collection four documents string \"Document.docx +3\".","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/DocumentCard.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"DocumentCard — DocumentCard","text":"Use control represent Office documents files aggregate views, showing someone’s trending document. Incorporate metadata relevant useful  particular view. card can specialized document’s latest changes, document’s popularity, see fit. Use document card illustrating event encompasses multiple files. example, card can configured represent single upload action  adding one file. Don’t use  document card views  someone likely performing bulk operations files, list may get long. Specifically, ’re showing items inside actual folder, card may overkill majority items folder may interesting metadata. Don’t use  document card space premium can’t show relevant timely commands metadata. Cards useful can expose -item interactions like “Share” buttons view counts. app need , show simple grid list items instead, easier scan.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/DocumentCard.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"DocumentCard — DocumentCard","text":"","code":"# Example 1 library(shiny) library(shiny.fluent) title <- \"Long_file_name_with_underscores_used_to_separate_all_of_the_words\" previewImages <- list( list( previewImageSrc = \"https://picsum.photos/318/196\", width = 318, height = 196 ) ) ui <- function(id) { ns <- NS(id) DocumentCard( DocumentCardPreview(previewImages = previewImages), DocumentCardTitle( title = title, shouldTruncate = TRUE ), DocumentCardActivity( activity = \"Created a few minutes ago\", people = list(list(name = \"Annie Lindqvist\")) ) ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 2 library(shiny) library(shiny.fluent) # Using icons in DocumentCardActions ui <- function(id) { previewImages <- list( list( previewImageSrc = \"https://picsum.photos/318/196\", width = 318, height = 200 ) ) fluidPage( DocumentCard( DocumentCardPreview(previewImages = previewImages), DocumentCardTitle( title = \"Card\", shouldTruncate = TRUE ), DocumentCardActivity( activity = \"2022-03-23\", people = list(list(name = \"Annie Lindqvist\")) ), DocumentCardActions( actions = list( list( iconProps = list(iconName = \"Share\"), onClick = JS(\"function() { alert('share icon clicked') }\") ), list( iconProps = list(iconName = \"Pin\"), onClick = JS(\"function() { alert('pin icon clicked') }\") ), list( iconProps = list(iconName = \"Ringer\"), onClick = JS(\"function() { alert('ringer icon clicked') }\") ) ) ) ) ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dropdown.html","id":null,"dir":"Reference","previous_headings":"","what":"Dropdown — Dropdown","title":"Dropdown — Dropdown","text":"dropdown menu list selected item always visible items visible demand clicking dropdown button. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dropdown.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Dropdown — Dropdown","text":"","code":"Dropdown(...) Dropdown.shinyInput(inputId, ..., value = defaultValue) updateDropdown.shinyInput( session = shiny::getDefaultReactiveDomain(), inputId, ... )"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dropdown.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Dropdown — Dropdown","text":"... Props pass component. allowed props listed Details section. inputId ID component. value Starting value. session Object passed session argument Shiny server.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dropdown.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Dropdown — Dropdown","text":"Object shiny.tag class suitable use UI Shiny app. update functions return nothing (called side effects).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dropdown.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Dropdown — Dropdown","text":"defaultSelectedKeys string[] | number[] Keys initially used set selected items. prop used multiSelect true (use defaultSelectedKey single select). Mutually exclusive selectedKeys. dropdownWidth number Custom width dropdown. value 0, width input field used. isDisabled boolean Deprecated v0.52.0, use disabled instead. keytipProps IKeytipProps Optional keytip dropdown multiSelectDelimiter string multiple items selected, used separate values dropdown input. notifyOnReselect boolean true, onChange still called already-selected item clicked single select mode. (Normally called case.) onChange (event: React.FormEvent, option?: IDropdownOption, index?: number) => void Callback selected option changes. onChanged (option: IDropdownOption, index?: number) => void onRenderCaretDown IRenderFunction Custom renderer chevron icon onRenderLabel IRenderFunction Custom renderer label. onRenderPlaceholder IRenderFunction Custom renderer placeholder text onRenderPlaceHolder IRenderFunction Custom renderer placeholder text onRenderTitle IRenderFunction Custom renderer selected option displayed input options IDropdownOption[] Options dropdown. using defaultSelectedKey defaultSelectedKeys, options must pure correct behavior. placeHolder string Input placeholder text. Displayed option selected. responsiveMode ResponsiveMode default, dropdown render standard way screen sizes large , panel small medium screens. Manually set prop override behavior. selectedKeys string[] | number[] | null Keys selected items, used multiSelect true (use selectedKey single select). provide , must maintain selection state observing onChange events passing new prop value changed. Passing null clear selection. Mutually exclusive defaultSelectedKeys. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme provided higher order component.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dropdown.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"Dropdown — Dropdown","text":"Use dropdown list multiple choices can collapsed one title, list items long, space constrained. Use dropdown list selected option important alternatives (contrast radio buttons choices visible, putting equal emphasis options).","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dropdown.html","id":"content","dir":"Reference","previous_headings":"","what":"Content","title":"Dropdown — Dropdown","text":"Use sentence-style capitalization—capitalize first word. info, see Capitalization Microsoft Writing Style Guide. dropdown list label describe can found menu. Use shortened statements single words list options. default option, use \"Select option\" placeholder text. \"None\" option, include . Write choices using parallel construction. example, start part speech verb tense.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Dropdown.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Dropdown — Dropdown","text":"","code":"# Example 1 library(shiny) library(shiny.fluent) options <- list( list(key = \"A\", text = \"Option A\"), list(key = \"B\", text = \"Option B\"), list(key = \"C\", text = \"Option C\") ) ui <- function(id) { ns <- NS(id) div( Dropdown.shinyInput(ns(\"dropdown\"), value = \"A\", options = options), textOutput(ns(\"dropdownValue\")) ) } server <- function(id) { moduleServer(id, function(input, output, session) { output$dropdownValue <- renderText({ sprintf(\"Value: %s\", input$dropdown) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 2 library(shiny) library(shiny.fluent) # Rendering headers and dividers inside dropdown DropdownMenuItemType <- function(type) { JS(paste0(\"jsmodule['@fluentui/react'].DropdownMenuItemType.\"), type) } ui <- function(id) { fluentPage( Dropdown( \"fruit\", label = \"Fruit\", multiSelect = TRUE, options = list( list( key = \"fruitsHeader\", text = \"Fruit\", itemType = DropdownMenuItemType(\"Header\") ), list(key = \"apple\", text = \"Apple\"), list(key = \"banana\", text = \"Banana\"), list(key = \"orange\", text = \"Orange\", disabled = TRUE), list(key = \"grape\", text = \"Grape\"), list( key = \"divider_1\", text = \"-\", itemType = DropdownMenuItemType(\"Divider\") ), list( key = \"vegetablesHeader\", text = \"Vegetables\", itemType = DropdownMenuItemType(\"Header\" ) ), list(key = \"broccoli\", text = \"Broccoli\"), list(key = \"carrot\", text = \"Carrot\"), list(key = \"lettuce\", text = \"Lettuce\") ) ) ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Facepile.html","id":null,"dir":"Reference","previous_headings":"","what":"Facepile — Facepile","title":"Facepile — Facepile","text":" face pile (Facepile) displays list personas. circle represents person contains image initials. Often control used sharing access specific view file, assigning someone task within workflow. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Facepile.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Facepile — Facepile","text":"","code":"Facepile(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Facepile.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Facepile — Facepile","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Facepile.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Facepile — Facepile","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Facepile.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Facepile — Facepile","text":"addButtonProps IButtonProps Button properties add face button ariaDescription string ARIA label persona list ariaLabel string Defines aria label screen readers use focus goes list personas. chevronButtonProps IButtonProps Deprecated v0.70, use overflowButtonProps instead. className string Additional css class apply Facepile componentRef IRefObject Optional callback access IFacepile interface. Use instead ref accessing public methods properties component. getPersonaProps (persona: IFacepilePersona) => IPersonaSharedProps Method access properties underlying Persona control maxDisplayablePersonas number Maximum number personas show onRenderPersona IRenderFunction Optional custom renderer persona, gets called one persona personas array onRenderPersonaCoin IRenderFunction Optional custom renderer persona coins, gets called multiple persona personas array overflowButtonProps IButtonProps Properties overflow icon overflowButtonType OverflowButtonType Type overflow icon use overflowPersonas IFacepilePersona[] Personas place overflow personas IFacepilePersona[] Array IPersonaProps define Persona. personaSize PersonaSize Size display personas showAddButton boolean Show add person button styles IStyleFunctionOrObject Call provide customized styling layer top variant rules. theme ITheme Theme provided High-Order Component.","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/Facepile.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"Facepile — Facepile","text":"face pile empty state include  \"Add\" button. Another variant use input field placeholder text instructing people add person. See  people picker component menu used add people  face pile list. one person  face pile, consider using name next face initials. need show  face pile expanded vertical list, include downward chevron button. Selecting chevron opens standard list view  people.  face pile exceeds max number 5 people, show button end list indicating many shown. Clicking tapping overflow open standard list view  people. component can include \"Add\" button can used quickly adding person list. hovering person face pile, include tooltip people card offers information person.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Facepile.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Facepile — Facepile","text":"","code":"library(shiny) library(shiny.fluent) personas <- list( list(personaName = \"Adams Baker\"), list(personaName = \"Clark Davis\"), list(personaName = \"Evans Frank\") ) ui <- function(id) { ns <- NS(id) Facepile(personas = personas) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusTrapZone.html","id":null,"dir":"Reference","previous_headings":"","what":"FocusTrapZone — FocusTrapCallout","title":"FocusTrapZone — FocusTrapCallout","text":"FocusTrapZone used trap focus html element. Pressing tab circle focus within inner focusable elements FocusTrapZone. Note: Trapping focus restrict interaction elements website side nav. Turn \"Use trap zone\" toggle control allow interaction happen . details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusTrapZone.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"FocusTrapZone — FocusTrapCallout","text":"","code":"FocusTrapCallout(...) FocusTrapZone(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusTrapZone.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"FocusTrapZone — FocusTrapCallout","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusTrapZone.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"FocusTrapZone — FocusTrapCallout","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusTrapZone.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"FocusTrapZone — FocusTrapCallout","text":"ariaLabelledBy string Sets aria-labelledby attribute. componentRef IRefObject Optional callback access IFocusTrapZone interface. Use instead ref accessing public methods properties component. disabled boolean Whether disable FocusTrapZone's focus trapping behavior. disableFirstFocus boolean put focus onto first element inside focus trap zone. elementToFocusOnDismiss HTMLElement Sets element focus exiting FocusTrapZone. enableAriaHiddenSiblings boolean Puts aria-hidden=true non-ancestors current element, screen readers. experimental feature graduated default behavior testing. flag removed next major release. firstFocusableSelector string | (() => string) Class name (actual selector) first focusable item. append dot. applies focusPreviouslyFocusedInnerElement false. focusPreviouslyFocusedInnerElement boolean Specifies descendant element focus focus() called. false, use first focusable descendant, filtered firstFocusableSelector property present. true, use element focused trap zone last focused descendant (fall back first focusable descendant trap zone never focused). forceFocusInsideTrap boolean Whether focus trap zone force focus stay inside . ignoreExternalFocusing boolean false (default), trap zone restore focus element activated trap zone unmounted disabled. Set true disable behavior. isClickableOutsideFocusTrap boolean Whether clicks allowed outside FocusTrapZone.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusTrapZone.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"FocusTrapZone — FocusTrapCallout","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) reactOutput(ns(\"focusTrapZone\")) } server <- function(id) { moduleServer(id, function(input, output, session) { ns <- session$ns output$focusTrapZone <- renderReact({ useTrapZone <- isTRUE(input$useTrapZone) stackStyles <- list(root = list( border = if (useTrapZone) '2px solid #ababab' else 'transparent', padding = 10 )) textFieldStyles <- list(root = list(width = 300)); stackTokens = list(childrenGap = 8); div( FocusTrapZone( disabled = !useTrapZone, Stack( horizontalAlign = \"start\", tokens = stackTokens, styles = stackStyles, Toggle.shinyInput(ns(\"useTrapZone\"), value = FALSE, label = \"Use trap zone\", onText = \"On (toggle to exit)\", offText = \"Off (toggle to trap focus)\" ), TextField.shinyInput( ns(\"textInput\"), label = \"Input inside trap zone\", styles = textFieldStyles ), Link( href = \"https://bing.com\", target = \"_blank\", \"Hyperlink inside trap zone\" ) ) ), Link( href = \"https://bing.com\", target = \"_blank\", \"Hyperlink outside trap zone\" ) ) }) }) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusZone.html","id":null,"dir":"Reference","previous_headings":"","what":"FocusZone — FocusZone","title":"FocusZone — FocusZone","text":"FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, elements data--focusable='true' attributes) considered pressing directional arrow keys focus moved appropriately. Tabbing zone sets focus current \"active\" element, making simple use tab key transition one zone next, rather every focusable element. Using FocusZone simple. Just wrap bunch content inside FocusZone, arrows tabbling handled ! See examples . details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusZone.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"FocusZone — FocusZone","text":"","code":"FocusZone(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusZone.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"FocusZone — FocusZone","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusZone.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"FocusZone — FocusZone","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusZone.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"FocusZone — FocusZone","text":"allowFocusRoot boolean Allows focus park root focus FocusZone render time. allowTabKey boolean Allows tab key handled tab list items focus zone, unfortunate side effect users able tab focus zone hit escape key. ariaDescribedBy string Sets aria-describedby attribute. ariaLabelledBy string Sets aria-labelledby attribute. React.ElementType component used root element FocusZone component. checkForNoWrap boolean Determines whether check data--horizontal-wrap data--vertical-wrap attributes determining move focus className string Additional class name provide root element, addition ms-FocusZone class. componentRef IRefObject Optional callback access IFocusZone interface. Use instead ref accessing public methods properties component. defaultActiveElement string Optionally provide selector identifying initial active element. defaultTabbableElement string | ((root: HTMLElement) => HTMLElement) Optionally defines initial tabbable element inside FocusZone. string passed treated selector identifying initial tabbable element. function passed uses root element parameter return initial tabbable element. direction FocusZoneDirection Defines arrows react . disabled boolean set, FocusZone tabbable keyboard navigation disabled. affect disabled attribute child. doNotAllowFocusEventToPropagate boolean Whether FocusZone allow focus events propagate past FocusZone. elementType Element type root element use. Default \"div\". handleTabKey FocusZoneTabbableElements Allows tab key handled tab list items focus zone, unfortunate side effect users able tab focus zone hit escape key. isCircularNavigation boolean set, cycle beginning targets user navigates next target end, end navigate previous beginning. isInnerZoneKeystroke (ev: React.KeyboardEvent) => boolean provided, callback executed keypresses determine user intends navigate inner zone. Returning true ask first inner zone set focus. onActiveElementChanged (element?: HTMLElement, ev?: React.FocusEvent) => void Callback one immediate children elements gets active getting focused one respective children elements focused. onBeforeFocus (childElement?: HTMLElement) => boolean Callback method determining focus indeed set given element. onFocus (event: React.FocusEvent) => void Callback called \"focus\" event triggered FocusZone. onFocusNotification () => void Callback notify creators focus set FocusZone pagingSupportDisabled boolean Determines whether disable paging support Page Page keyboard scenarios. preventDefaultWhenHandled boolean true, FocusZone prevents default behavior Keyboard events changing focus elements. preventFocusRestoration boolean true, prevents FocusZone attempting restore focus inner element focus root element componentDidUpdate. rootProps React.HTMLAttributes Deprecated v1.12.1. DIV props provided FocusZone mixed root element. shouldEnterInnerZone (ev: React.KeyboardEvent) => boolean Callback function executed keypresses determine user intends navigate inner (nested) zone. Returning true ask first inner zone set focus. shouldFocusInnerElementWhenReceivedFocus boolean true FocusZone's root element (container) receives focus, focus land either defaultTabbableElement (set) first tabbable element FocusZone. Usually case nested focus zones, nested focus zone's container focusable element. shouldFocusOnMount boolean Determines default tabbable element force focused FocusZone mount. @default false shouldInputLoseFocusOnArrowKey (inputElement: HTMLInputElement) => boolean callback method determine input element lose focus arrow keys shouldRaiseClicks boolean Determines whether FocusZone walk DOM trying invoke click callbacks focusable elements Enter Space keydowns ensure accessibility tags guarantee behavior. shouldReceiveFocus (childElement?: HTMLElement) => boolean Callback method determining focus indeed set given element. shouldResetActiveElementWhenTabFromZone boolean true TAB key handled FocusZone, resets current active element null value. example, roving index desirable focus always reset default tabbable element. stopFocusPropagation boolean Whether FocusZone allow focus events propagate past FocusZone.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/FocusZone.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"FocusZone — FocusZone","text":"","code":"library(shiny) library(shiny.fluent) tokens <- list(childrenGap = 20) ui <- function(id) { ns <- NS(id) Stack( tokens = tokens, horizontalAlign = \"start\", FocusZone( Stack( tokens = tokens, horizontal = TRUE, verticalAlign = \"center\", tags$span(\"Enabled FocusZone:\"), DefaultButton(text = \"Button 1\"), DefaultButton(text = \"Button 2\"), TextField(placeholder = \"FocusZone TextField\"), DefaultButton(text = \"Button 3\") ) ), DefaultButton(text = \"Tabbable Element 1\"), FocusZone( disabled = TRUE, Stack( tokens = tokens, horizontal = TRUE, verticalAlign = \"center\", tags$span(\"Disabled FocusZone:\"), DefaultButton(text = \"Button 1\"), DefaultButton(text = \"Button 2\") ) ), TextField(placeholder = \"Tabbable Element 2\") ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/GroupedList.html","id":null,"dir":"Reference","previous_headings":"","what":"GroupedList — GroupedList","title":"GroupedList — GroupedList","text":"grouped list (GroupedList) allows render set items multiple lists various grouping properties. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/GroupedList.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"GroupedList — GroupedList","text":"","code":"GroupedList(...) GroupHeader(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/GroupedList.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"GroupedList — GroupedList","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/GroupedList.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"GroupedList — GroupedList","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/GroupedList.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"GroupedList — GroupedList","text":"className string Custom className compact boolean Boolean value indicate component render compact mode. Set false default componentRef IRefObject<{}> expandButtonProps React.HTMLAttributes Props expand/collapse button footerText string Text display group footer. group IGroup group rendered header. groupIndex number index group. groupLevel number indent level group. groups IGroup[] Stores parent group's children. indentWidth number Width corresponding single level. multiplied groupLevel get full spacer width group. isCollapsedGroupSelectVisible boolean Determines group selection check box shown collapsed groups. isGroupLoading (group: IGroup) => boolean Callback determine group missing items needs load server. isSelected boolean Deprecated v.65.1 removed v 1.0. Use selected instead. loadingText string Text shown group headers indicate group loaded. onGroupHeaderClick (group: IGroup) => void Callback group header clicked. onRenderTitle IRenderFunction Override allows caller provider custom renderer GroupHeader title. onToggleCollapse (group: IGroup) => void Callback group expanded collapsed. onToggleSelectGroup (group: IGroup) => void Callback group selected. onToggleSummarize (group: IGroup) => void Callback group \"Show \" link clicked selected boolean items group selected. selectionMode SelectionMode selection mode list group lives within. showAllLinkText string Text display group \"Show \" link. theme ITheme Theme provided Higher Order Component viewport IViewport reference viewport header rendered. className string Optional class name add root element. compact boolean Boolean value indicate component render compact mode. Set false default componentRef IRefObject Optional callback access IGroupedList interface. Use instead ref accessing public methods properties component. dragDropEvents IDragDropEvents Map callback functions related drag drop functionality. dragDropHelper IDragDropHelper helper manage drag/drop across item groups eventsToRegister { eventName: string; callback: (context: IDragDropContext, event?: ) => void; }[] Event names corresponding callbacks registered groups rendered elements focusZoneProps IFocusZoneProps Optional properties pass FocusZone. getGroupHeight (group: IGroup, groupIndex: number) => number Optional function override default group height calculation used list virtualization. groupProps IGroupRenderProps Optional override properties render groups. groups IGroup[] Optional grouping instructions. items [] List items render. listProps IListProps Optional properties pass list components rendered. onGroupExpandStateChanged (isSomeGroupExpanded: boolean) => void Optional callback group expand state changes collapsed least one group expanded. onRenderCell (nestingDepth?: number, item?: , index?: number) => React.ReactNode Rendering callback render group items. onShouldVirtualize (props: IListProps) => boolean Optional callback determine whether list rendered full, virtualized. Virtualization add remove pages items user scrolls visible range. benefits larger list scenarios reducing DOM screen, can negatively affect performance smaller lists. default implementation virtualize callback provided. selection ISelection Optional selection model track selection state. selectionMode SelectionMode Controls /list manages selection. styles IStyleFunctionOrObject Style function passed override themed default styles theme ITheme Theme passed Higher Order Component usePageCache boolean boolean control pages containing unchanged items cached, perf optimization property List.Props viewport IViewport Optional Viewport, provided parent component. styles IStyleFunctionOrObject Style function passed override themed default styles checked boolean theme ITheme ariaPosInSet number Defines element's number position current set listitems treeitems ariaSetSize number Defines number items current set listitems treeitems expandButtonIcon string Defines name custom icon used group headers. set, default icon used expandButtonProps React.HTMLAttributes Native props GroupHeader expand collapse button groupedListId string GroupedList id aria-controls onRenderGroupHeaderCheckbox IRenderFunction provided, can used render custom checkbox selectAllButtonProps React.HTMLAttributes Native props GroupHeader select button styles IStyleFunctionOrObject Style function passed override themed default styles useFastIcons boolean Whether use fast icon check components. icons targeted customization still customizable via class names. collapseAllVisibility CollapseAllVisibility Flag indicate whether ignore collapsing icon header. footerProps IGroupFooterProps Information pass group footer. getGroupItemLimit (group: IGroup) => number Grouping item limit. headerProps IGroupHeaderProps Information pass group header. isAllGroupsCollapsed boolean Boolean indicating groups collapsed state. onRenderFooter IRenderFunction Override allows caller provide custom footer. onRenderHeader IRenderFunction Override allows caller provide custom header. onRenderShowAll IRenderFunction Override allows caller provide custom Show link. onToggleCollapseAll (isAllCollapsed: boolean) => void Callback groups expanded collapsed. role string Override allows caller provide custom aria role showAllProps IGroupShowAllProps Information pass group Show footer. showEmptyGroups boolean Boolean indicating empty groups shown showAllLinkText string Show link text. styles IStyleFunctionOrObject Style function passed override themed default styles count number Count spacer(s) indentWidth number much indent styles IStyleFunctionOrObject Style function passed override themed default styles theme ITheme Theme Higher Order Component","code":""},{"path":[]},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/GroupedList.html","id":"my-list-is-not-re-rendering-when-i-mutate-its-items-what-should-i-do-","dir":"Reference","previous_headings":"","what":"My List is not re-rendering when I mutate its items. What should I do?","title":"GroupedList — GroupedList","text":"determine list within grouped list re-render contents, component performs referential equality check within shouldComponentUpdate method. done minimize performance overhead associating re-rendering virtualized List pages, recommended React documentation. result implementation, inner list determine re-render array values mutated. avoid problem, recommend re-creating items array backing grouped list using method Array.prototype.concat ES6 spread syntax shown : re-creating items array without mutating values, inner List correctly determine contents changed re-render new values.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/GroupedList.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"GroupedList — GroupedList","text":"","code":"# Example 1 library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) GroupedList( items = list(\"Item A\", \"Item B\", \"Item C\", \"Item D\", \"Item E\"), groups = list( list(key = \"g1\", name = \"Some items\", startIndex = 0, count = 2), list(key = \"g2\", name = \"More items\", startIndex = 2, count = 3) ), selectionMode = 0, onRenderCell = JS(\"(depth, item) => ( jsmodule['react'].createElement('span', { style: { paddingLeft: 49 } }, item) )\") ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) } # Example 2 library(shiny) library(shiny.fluent) ui <- function(id) { fluentPage( GroupedList( items = list(\"Item A\", \"Item B\", \"Item C\", \"Item D\", \"Item E\"), groups = list( list(key = \"g1\", name = \"Some items\", startIndex = 0, count = 2), list(key = \"g2\", name = \"More items\", startIndex = 2, count = 3) ), selectionMode = 0, onRenderCell = JS( \"(depth, item) => ( jsmodule['react'].createElement('span', { style: { paddingLeft: 50 } }, item) )\" ), groupProps = list( onRenderHeader = JS( \"(props) => ( jsmodule['react'].createElement( jsmodule['@fluentui/react'].GroupHeader, { ...props, styles: { headerCount: { display: 'none' } } }, props ) )\" ) ) ) ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/HoverCard.html","id":null,"dir":"Reference","previous_headings":"","what":"HoverCard — HoverCard","title":"HoverCard — HoverCard","text":"Hover cards (HoverCard) show commands  information,  metadata  activity, someone hovers item. Tabbing keyboard element triggering HoverCard open focus (see first example). case navigation within card available navigating next element close card. Tabbing keyboard element triggering HoverCard opening hotKey pressed (see second example). card opened automatically focus first focusable element card content. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/HoverCard.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"HoverCard — HoverCard","text":"","code":"HoverCard(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/HoverCard.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"HoverCard — HoverCard","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/HoverCard.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"HoverCard — HoverCard","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/HoverCard.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"HoverCard — HoverCard","text":"compactCardHeight number Height compact card expandedCardHeight number Height expanded card mode ExpandingCardMode Use open card expanded format wait delay onRenderCompactCard IRenderFunction<> Render function populate compact content area onRenderExpandedCard IRenderFunction<> Render function populate expanded content area cardDismissDelay number Length card dismiss delay. min number necessary pointer hop target card cardOpenDelay number Length compact card delay className string Additional CSS class(es) apply HoverCard root element. componentRef IRefObject Optional callback access IHoverCardHost interface. Use instead ref accessing public methods properties component. eventListenerTarget HTMLElement | string | null prop separate target anchor hover card target attach event listener. set, prop separates target anchor hover card target attach event listener. eventListenerTarget given, HoverCard use target prop root set event listener. expandedCardOpenDelay number Time ms expanded card open compact card expandingCardProps IExpandingCardProps Additional ExpandingCard props pass HoverCard like renderers, target. gapSpace etc. Used along 'type' prop set HoverCardType.expanding. Reference detail properties ICardProps IExpandingCardProps. instantOpenOnClick boolean Enables instant open full card upon click onCardExpand () => void Callback visible card expanded. onCardHide () => void Callback card hides onCardVisible () => void Callback card becomes visible openHotKey KeyCodes HotKey used opening HoverCard tabbed target. plainCardProps IPlainCardProps Additional PlainCard props pass HoverCard like renderers, target, gapSpace etc. Used along 'type' prop set HoverCardType.plain. See details ICardProps IPlainCardProps interfaces. setAriaDescribedBy boolean Whether mark container described hover card. specified, caller mark element described hover card id. setInitialFocus boolean Set true set focus first focusable element card. Works pair 'trapFocus' prop. shouldBlockHoverCard () => void block hover card sticky boolean true disables Card dismiss upon mouse leave, card sticks around. styles IStyleFunctionOrObject Custom styles component target HTMLElement | string | null Optional target element tag hover card . provided using HoverCard wrapper, set 'data--focusable=true' attribute root wrapped child. target given, HoverCard use root target become focusable element focus listener attached . theme ITheme Theme provided higher order component. trapFocus boolean Set true want render content HoverCard FocusTrapZone accessibility reasons. Optionally 'setInitialFocus' prop can set true move focus inside FocusTrapZone. type HoverCardType Type hover card render. onRenderPlainCard IRenderFunction<> Render function populate compact content area","code":""},{"path":[]},{"path":"https://appsilon.github.io/shiny.fluent/reference/HoverCard.html","id":"layout","dir":"Reference","previous_headings":"","what":"Layout","title":"HoverCard — HoverCard","text":"Hover cards contain  compact expanded states,  compact state appearing  500 milliseconds expanded state appearing user continues hover  1500 milliseconds.  hover card positions automatically, depending upon target viewport. Position  target  card doesn’t obstruct inline commanding item.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/HoverCard.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"HoverCard — HoverCard","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) HoverCard( type = \"PlainCard\", plainCardProps = JS(\"{ onRenderPlainCard: (a, b, c) => 'HoverCard contents', style: { margin: 10 } }\"), \"Hover over me\" ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Icon.html","id":null,"dir":"Reference","previous_headings":"","what":"Icon — FontIcon","title":"Icon — FontIcon","text":"user interface, icon image represents application, capability, concept specific entity meaning user. icon usually selectable can also nonselectable image, company's logo. list icons, visit icon documentation. Note icons bundled default typically must loaded calling initializeIcons @uifabric/icons package root application. See icon documentation details. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Icon.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Icon — FontIcon","text":"","code":"FontIcon(...) Icon(...) ImageIcon(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Icon.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Icon — FontIcon","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Icon.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Icon — FontIcon","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Icon.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Icon — FontIcon","text":"className string Custom class style icon. iconName string name icon use icon font. string empty, placeholder icon rendered width icon. ariaLabel string aria label icon benefit screen readers. iconName string name icon use icon font. string empty, placeholder icon rendered width icon. iconType IconType type icon render (image icon font). imageErrorAs React.ComponentType rendering image icon, component rendered event loading image fails. imageProps IImageProps rendering image icon, props passed Image component. styles IStyleFunctionOrObject Gets styles Icon. theme ITheme className string Custom class style icon. imageProps IImageProps Props passed Image component.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Icon.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Icon — FontIcon","text":"","code":"library(shiny) library(shiny.fluent) style <- list(fontSize = 50, margin = 10) ui <- function(id) { ns <- NS(id) tags$div( FontIcon(iconName = \"CompassNW\", style = style), FontIcon(iconName = \"Dictionary\", style = style), FontIcon(iconName = \"TrainSolid\", style = style) ) } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Image.html","id":null,"dir":"Reference","previous_headings":"","what":"Image — Image","title":"Image — Image","text":"image graphic representation something (e.g photo illustration). borders added examples order help visualize empty space image frame. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Image.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Image — Image","text":"","code":"Image(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Image.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Image — Image","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Image.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Image — Image","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Image.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Image — Image","text":"className string Additional css class apply Component coverStyle ImageCoverStyle Specifies cover style used image. specified, dynamically calculated based aspect ratio image. errorSrc string Deprecated v1.3.6, replace src case errors, use onLoadingStateChange instead rerender Image difference src. imageFit ImageFit Used determine image scaled cropped fit frame. maximizeFrame boolean true, image frame expand fill parent container. onLoadingStateChange (loadState: ImageLoadState) => void Optional callback method image load state changed. 'loadState' parameter indicates current state Image. shouldFadeIn boolean true, fades image loaded. shouldStartVisible boolean true, image starts visible hidden error. Otherwise, image hidden successfully loaded. disables shouldFadeIn. styles IStyleFunctionOrObject Call provide customized styling layer top variant rules theme ITheme Theme provided HOC.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Image.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Image — Image","text":"","code":"library(shiny) library(shiny.fluent) ui <- function(id) { ns <- NS(id) Image(src = \"https://via.placeholder.com/350x150\") } server <- function(id) { moduleServer(id, function(input, output, session) {}) } if (interactive()) { shinyApp(ui(\"app\"), function(input, output) server(\"app\")) }"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Keytip.html","id":null,"dir":"Reference","previous_headings":"","what":"Keytip — Keytip","title":"Keytip — Keytip","text":"Keytip small popup near component indicates key sequence trigger component. confused keyboard shortcuts; instead key sequences traverse levels UI components. Technically, Keytip wrapper around Callout target element discovered 'data-ktp-target' attribute element. enable Keytips page, developer add KeytipLayer component somewhere document. can added anywhere document, must added . Use registerKeytip utility helper add Keytip. user enter exit keytip mode IKeytipTransitionSequence, key amount modifiers (Alt, Shift, etc). default, entry exit sequence 'Alt-Windows' (Meta) Windows 'Option-Control' macOS. also sequence 'return' level keytips traversing. default 'Esc'. Fluent UI React components keytips enabled optional 'keytipProps' prop handles registering, unregistering, rendering keytip. keySequences Keytip full sequence get keytip. 'buildKeytipConfigMap' helper build map ID -> IKeytipProps assist defining keytips. details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Keytips.html","id":null,"dir":"Reference","previous_headings":"","what":"Keytips — KeytipLayer","title":"Keytips — KeytipLayer","text":"details examples visit official docs. R package handle every case, advanced use cases need work using original docs achieve desired result.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Keytips.html","id":"ref-usage","dir":"Reference","previous_headings":"","what":"Usage","title":"Keytips — KeytipLayer","text":"","code":"KeytipLayer(...)"},{"path":"https://appsilon.github.io/shiny.fluent/reference/Keytips.html","id":"arguments","dir":"Reference","previous_headings":"","what":"Arguments","title":"Keytips — KeytipLayer","text":"... Props pass component. allowed props listed Details section.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Keytips.html","id":"value","dir":"Reference","previous_headings":"","what":"Value","title":"Keytips — KeytipLayer","text":"Object shiny.tag class suitable use UI Shiny app.","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Keytips.html","id":"details","dir":"Reference","previous_headings":"","what":"Details","title":"Keytips — KeytipLayer","text":"componentRef IRefObject Optional callback access KeytipLayer component. Use instead ref accessing public methods properties component. content string String put inside layer used aria-describedby component keytip one starting sequences keytipExitSequences IKeytipTransitionKey[] List key sequences exit keytips mode keytipReturnSequences IKeytipTransitionKey[] List key sequences execute return functionality keytips (going back previous level keytips) keytipStartSequences IKeytipTransitionKey[] List key sequences start keytips mode onEnterKeytipMode () => void Callback function triggered keytip mode entered onExitKeytipMode (ev?: React.KeyboardEvent | React.MouseEvent) => void Callback function triggered keytip mode exited. ev Mouse Keyboard Event triggered exit, . styles IStyleFunctionOrObject (Optional) Call provide customized styling. calloutProps ICalloutProps ICalloutProps pass callout element content string Content put inside keytip disabled boolean T/F corresponding control keytip disabled hasDynamicChildren boolean Whether keytip children keytips dynamically created (DOM generated keytip activation). Common cases Pivot Modal. hasMenu boolean Whether keytip belongs component menu Keytip mode stay menu opened, even items menu keytips keySequences string[] Array KeySequences full key sequence trigger keytip include initial 'start' key sequence offset Point Offset x y keytip, added top-left corner default keytip anchored bottom-center element onExecute (executeTarget: HTMLElement | null, target: HTMLElement | null) => void Function call keytip activated. 'executeTarget' DOM element marked 'data-ktp-execute-target'. 'target' DOM element marked 'data-ktp-target'. onReturn (executeTarget: HTMLElement | null, target: HTMLElement | null) => void Function call keytip currentKeytip return sequence pressed. 'executeTarget' DOM element marked 'data-ktp-execute-target'. 'target' DOM element marked 'data-ktp-target'. overflowSetSequence string[] Full KeySequence overflow set button, set automatically keytip inside overflow styles IStyleFunctionOrObject Optional styles component. theme ITheme Theme component visible boolean T/F keytip visible","code":""},{"path":"https://appsilon.github.io/shiny.fluent/reference/Keytips.html","id":"ref-examples","dir":"Reference","previous_headings":"","what":"Examples","title":"Keytips — KeytipLayer","text":"","code":"library(shiny) library(shiny.fluent) makeScript <- function(js) { tagList( shiny.react::reactDependency(), htmltools::htmlDependency( name = \"KeytipsExample\", version = \"0\", # Not used. src = c(href = \"\"), # Not used. head = paste0(\"