Merge branch 'main' into update_row_selection

* main:
  Update `@render.data_frame` renderer to work properly with fill/fillable (#1126)
  Don't error on malformed date input (#1139)
  fix(nav_panel): Add `.bslib-gap-spacing` if nav panel is fillable (#1154)
  feat: Add `ui.input_dark_mode()` (#1149)
  chore(make): Add `make docs` and `make docs-preview` (#1150)
  Sync with latest bslib sidebar and card changes (#1129)
  docs(input_task_button): Add to reference index, also update methods for action button/link (#1151)
  chore(make): Update check and check-fix to replicate CI (#1148)

Author: schloerke

CHANGELOG.md

@@ -8,11 +8,35 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [UNRELEASED] - YYYY-MM-DD
 
+### Breaking Changes
+
+* Page-level sidebars used in `ui.page_sidebar()` and `ui.page_navbar()` will now default to being initially open but collapsible on desktop devices and always open on mobile devices. You can adjust this default choice by setting `ui.sidebar(open=)`. (#1129)
+
+* `ui.sidebar()` is now a thin wrapper for the internal `ui.Sidebar` class. The `ui.Sidebar` class has been updated to store the sidebar's contents and settings and to delay rendering until the sidebar HTML is actually used. Because most users call `ui.sidebar()` instead of using the class directly, this change is not expected to affect many apps. (#1129)
+
+### New features
+
+* Added `ui.input_dark_mode()`, a toggle switch that allows users to switch between light and dark mode. By default, when `ui.input_dark_mode()` is added to an app, the app's color mode follows the users's system preferences, unless the app author sets the `mode` argument. When `ui.input_dark_mode(id=)` is set, the color mode is reported to the server, and server-side color mode updating is possible using `ui.update_dark_mode()`. (#1149)
+
+* `ui.sidebar(open=)` now accepts a dictionary with keys `desktop` and `mobile`, allowing you to independently control the initial state of the sidebar at desktop and mobile screen sizes. (#1129)
+
+### Other changes
+
+* `@render.data_frame` now properly fills its container by default. (#1126)
+
+* We improved the accessibility of the full screen toggle button in cards created with `ui.card(full_screen=True)`. Full-screen cards are now also supported on mobile devices. (#1129)
+
+* When entering and exiting full-screen card mode, Shiny now emits a client-side custom `bslib.card` event that JavaScript-oriented users can use to react to the full screen state change. (#1129)
+
+* The sidebar's collapse toggle now has a high `z-index` value to ensure it always appears above elements in the main content area of `ui.layout_sidebar()`. The sidebar overlay also now receives the same high `z-index` on mobile layouts. (#1129)
+
 ### Bug fixes
 
 * Fixed `input_task_button` not working in a Shiny module. (#1108)
 * Fixed several issues with `page_navbar()` styling. (#1124)
 * Fixed `Renderer.output_id` to not contain the module namespace prefix, only the output id. (#1130)
+* Fixed gap-driven spacing between children in fillable `nav_panel()` containers. (#1152)
+* Fixed #1138: An empty value in a date or date range input would cause an error; now it is treated as `None`. (#1139)
 
 ### Other changes
 

Makefile

@@ -1,4 +1,4 @@
-.PHONY: help clean clean-test clean-pyc clean-build help lint test playwright-shiny playwright-examples playwright-deploys install-trcli install-playwright
+.PHONY: help clean% check% format% docs% lint test pyright playwright% install% testrail% coverage release
 .DEFAULT_GOAL := help
 
 define BROWSER_PYSCRIPT
@@ -70,28 +70,48 @@ typings/matplotlib/__init__.pyi:
 
 pyright-typings: typings/appdirs typings/folium typings/uvicorn typings/seaborn typings/matplotlib/__init__.pyi
 
-pyright: pyright-typings ## type check with pyright
-	pyright
+check: check-format check-lint check-types check-tests  ## check code, style, types, and test (basic CI)
+check-fix: format check-lint check-types check-tests ## check and format code, style, types, and test
+check-format: check-black check-isort
+check-types: check-pyright
+check-tests: check-pytest
 
-lint: ## check style with flake8
-	echo "Checking style with flake8"
+check-lint:
+	@echo "-------- Checking style with flake8 ---------"
 	flake8 --show-source .
+check-black:
+	@echo "-------- Checking code with black -----------"
+	black --check .
+check-isort:
+	@echo "-------- Sorting imports with isort ---------"
+	isort --check-only --diff .
+check-pyright: typings/uvicorn typings/matplotlib/__init__.pyi typings/seaborn
+	@echo "-------- Checking types with pyright --------"
+	pyright
+check-pytest:
+	@echo "-------- Running tests with pytest ----------"
+	python3 tests/pytest/asyncio_prevent.py
+	pytest
 
-format: ## format code with black and isort
-	echo "Formatting code with black"
+pyright: check-types ## check types with pyright
+lint: check-lint ## check style with flake8
+test: check-tests ## check tests quickly with the default Python
+
+format: format-black format-isort ## format code with black and isort
+format-black:
+	@echo "-------- Formatting code with black --------"
 	black .
-	echo "Sorting imports with isort"
+format-isort:
+	@echo "-------- Sorting imports with isort --------"
 	isort .
 
-check: ## check code quality with black and isort
-	echo "Checking code with black"
-	black --check .
-	echo "Sorting imports with isort"
-	isort --check-only --diff .
+docs: ## docs: build docs with quartodoc
+	@echo "-------- Building docs with quartodoc --------"
+	@cd docs && make quartodoc
 
-test: ## run tests quickly with the default Python
-	python3 tests/pytest/asyncio_prevent.py
-	pytest
+docs-preview: ## docs: preview docs in browser
+	@echo "-------- Previewing docs in browser --------"
+	@cd docs && make serve
 
 # Default `SUB_FILE` to empty
 SUB_FILE:=

docs/_quartodoc-core.yml

@@ -44,6 +44,7 @@ quartodoc:
         - ui.input_select
         - ui.input_selectize
         - ui.input_slider
+        - ui.input_dark_mode
         - ui.input_date
         - ui.input_date_range
         - ui.input_checkbox
@@ -56,6 +57,7 @@ quartodoc:
         - ui.input_password
         - ui.input_action_button
         - ui.input_action_link
+        - ui.input_task_button
     - title: Value boxes
       desc: Prominently display a value and label in a box that can be expanded to show more information.
       contents:
@@ -122,6 +124,7 @@ quartodoc:
           dynamic: true
         - name: ui.update_slider
           dynamic: true
+        - ui.update_dark_mode
         - ui.update_date
         - name: ui.update_date_range
           dynamic: true
@@ -140,6 +143,9 @@ quartodoc:
           dynamic: "shiny.ui.update_text"
         - name: ui.update_navs
           dynamic: true
+        - ui.update_action_button
+        - ui.update_action_link
+        - ui.update_task_button
     - title: Update UI Layouts
       desc: ""
       contents:

docs/_quartodoc-express.yml

@@ -16,6 +16,7 @@ quartodoc:
         - express.ui.input_select
         - express.ui.input_selectize
         - express.ui.input_slider
+        - express.ui.input_dark_mode
         - express.ui.input_date
         - express.ui.input_date_range
         - express.ui.input_checkbox
@@ -28,6 +29,7 @@ quartodoc:
         - express.ui.input_password
         - express.ui.input_action_button
         - express.ui.input_action_link
+        - express.ui.input_task_button
     - title: Output components
       desc: Reactively render output.
       contents:
@@ -103,6 +105,7 @@ quartodoc:
           dynamic: true
         - name: express.ui.update_slider
           dynamic: true
+        - express.ui.update_dark_mode
         - ui.update_date
         - name: express.ui.update_date_range
           dynamic: true
@@ -121,6 +124,9 @@ quartodoc:
           dynamic: "shiny.ui.update_text"
         - name: express.ui.update_navs
           dynamic: true
+        - express.ui.update_action_button
+        - express.ui.update_action_link
+        - express.ui.update_task_button
     - title: Update UI Layouts
       desc: ""
       contents:

js/dataframe/index.tsx

@@ -118,7 +118,7 @@ interface ShinyDataGridProps<TIndex> {
 const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = (props) => {
   const { id, data, bgcolor } = props;
   const { columns, type_hints, data: rowData } = data;
-  const { width, height, filters: withFilters } = data.options;
+  const { width, height, fill, filters: withFilters } = data.options;
 
   const containerRef = useRef<HTMLDivElement>(null);
   const theadRef = useRef<HTMLTableSectionElement>(null);
@@ -655,10 +655,13 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = (props) => {
 
   const headerRowCount = table.getHeaderGroups().length;
 
-  const scrollingClass =
-    containerRef.current?.scrollHeight > containerRef.current?.clientHeight
-      ? "scrolling"
-      : "";
+  // Assume we're scrolling until proven otherwise
+  let scrollingClass = "scrolling";
+  const scrollHeight = containerRef.current?.scrollHeight;
+  const clientHeight = containerRef.current?.clientHeight;
+  if (scrollHeight && clientHeight && scrollHeight <= clientHeight) {
+    scrollingClass = "";
+  }
 
   const makeHeaderKeyDown =
     (column: Column<unknown[], unknown>) => (event: React.KeyboardEvent) => {
@@ -669,12 +672,17 @@ const ShinyDataGrid: FC<ShinyDataGridProps<unknown>> = (props) => {
 
   const measureEl = useVirtualizerMeasureWorkaround(rowVirtualizer);
 
+  let className = `shiny-data-grid ${containerClass} ${scrollingClass}`;
+  if (fill) {
+    className += " html-fill-item";
+  }
+
   return (
     <>
       <div
-        className={`shiny-data-grid ${containerClass} ${scrollingClass}`}
+        className={className}
         ref={containerRef}
-        style={{ width, maxHeight: height, overflow: "auto" }}
+        style={{ width, height, overflow: "auto" }}
       >
         <table
           className={tableClass + (withFilters ? " filtering" : "")}

js/dataframe/styles.scss

@@ -38,6 +38,10 @@
 
 .shiny-data-grid {
   max-width: 100%;
+  height: 500px;
+  &:not(.scrolling) {
+    height: auto;
+  }
 
   > table {
     border-collapse: separate;
@@ -198,3 +202,20 @@
     }
   }
 }
+
+/* Center the table when inside of a card */
+.card-body .shiny-data-grid {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+
+/* When .shiny-data-grid is not scrolling, the containers shouldn't flex */
+shiny-data-frame {
+  &:has(> div > .shiny-data-grid:not(.scrolling)) {
+    flex: 0 0 auto;
+  }
+  > div:has(> .shiny-data-grid:not(.scrolling)) {
+    flex: 0 0 auto;
+  }
+}

js/dataframe/types.ts

@@ -17,6 +17,7 @@ export interface DataGridOptions {
   filters?: boolean;
   width?: string;
   height?: string;
+  fill?: boolean;
 }
 
 export interface PandasData<TIndex> {

scripts/htmlDependencies.R

@@ -12,7 +12,7 @@ message("Installing GitHub packages: bslib, shiny, htmltools")
 withr::local_temp_libpaths()
 ignore <- capture.output({
   pak::pkg_install(c(
-    "rstudio/bslib@py-shiny-v0.7.0",
+    "rstudio/bslib@main",
     "rstudio/shiny@main",
     "cran::htmltools"
   ))

shiny/_namespaces.py

@@ -81,6 +81,10 @@ def resolve_id_or_none(id: Id | None) -> ResolvedId | None:
 
 
 def validate_id(id: str) -> None:
+    if not isinstance(id, str):
+        raise ValueError("`id` must be a single string")
+    if id == "":
+        raise ValueError("`id` must be a non-empty string")
     if not re_valid_id.match(id):
         raise ValueError(
             f"The string '{id}' is not a valid id; only letters, numbers, and "

shiny/_utils.py

@@ -199,6 +199,14 @@ def private_random_int(min: int, max: int) -> str:
         return str(random.randint(min, max))
 
 
+def private_random_id(prefix: str = "", bytes: int = 3) -> str:
+    if prefix != "" and not prefix.endswith("_"):
+        prefix += "_"
+
+    with private_seed():
+        return prefix + rand_hex(bytes)
+
+
 @contextlib.contextmanager
 def private_seed() -> Generator[None, None, None]:
     state = random.getstate()