@observablehq/inputs 0.11 (#1541)

* @observablehq/inputs 0.11

* minimize diff

* document select option; don’t hard-wrap Markdown

docs/inputs/table.md

@@ -8,12 +8,9 @@ By default, all columns are visible. Only the first dozen rows are initially vis
 Inputs.table(penguins)
 ```
 
-To show a subset of columns, or to reorder them, pass an array of property names
-as the _columns_ option. By default, columns are inferred from _data_.columns if
-present, and otherwise by iterating over the data to union the property names.
+To show a subset of columns, or to reorder them, pass an array of property names as the _columns_ option. By default, columns are inferred from _data_.columns if present, and otherwise by iterating over the data to union the property names.
 
-The _header_ option lets you redefine the column title; this doesn’t change the
-name used to reference the data.
+The _header_ option lets you redefine the column title; this doesn’t change the name used to reference the data.
 
 ```js echo
 penguins.columns
@@ -36,20 +33,13 @@ Inputs.table(penguins, {
 })
 ```
 
-By default, rows are displayed in input order. You can change the order by
-specifying the name of a column to _sort_ by, and optionally the _reverse_
-option for descending order. The male Gentoo penguins are the largest in this
-dataset, for example. Undefined values go to the end.
+By default, rows are displayed in input order. You can change the order by specifying the name of a column to _sort_ by, and optionally the _reverse_ option for descending order. The male Gentoo penguins are the largest in this dataset, for example. Undefined values go to the end.
 
 ```js echo
 Inputs.table(penguins, {sort: "body_mass_g", reverse: true})
 ```
 
-Tables are [view-compatible](../reactivity#inputs): using the
-view function, you can use a table to select rows and refer to them from other
-cells, say to chart a subset of the data. Click the checkbox on the left edge of
-a row to select it, and click the checkbox in the header row to clear the
-selection. You can shift-click to select a range of rows.
+Tables are [view-compatible](../reactivity#inputs): using the view function, you can use a table to select rows and refer to them from other cells, say to chart a subset of the data. Click the checkbox on the left edge of a row to select it, and click the checkbox in the header row to clear the selection. You can shift-click to select a range of rows.
 
 ```js echo
 const selection = view(Inputs.table(penguins, {required: false}));
@@ -59,22 +49,16 @@ const selection = view(Inputs.table(penguins, {required: false}));
 selection // Try selecting rows above!
 ```
 
-The _required_ option determines the selection when no items are selected from
-the table. If it is true (default), the selection contains the full dataset.
-Otherwise, the selection is empty.
+The _required_ option determines the selection when no items are selected from the table: if it is true (default), the selection contains the full dataset; otherwise, the selection is empty. The _select_ option <a href="https://github.com/observablehq/framework/pull/1541" class="observablehq-version-badge" data-version="prerelease" title="Added in #1541"></a> disables user selection of rows, hiding the checkboxes in the first column.
 
-The table input assumes that all values in a given column are the same type,
-and chooses a suitable formatter based on the first non-null value in each
-column.
+The table input assumes that all values in a given column are the same type, and chooses a suitable formatter based on the first non-null value in each column.
 
-- Numbers are formatted using
-  [_number_.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString);
+- Numbers are formatted using [_number_.toLocaleString](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString);
 - Dates are formatted in [ISO8601](https://en.wikipedia.org/wiki/ISO_8601);
 - undefined and NaN values are empty;
 - everything else is displayed as-is.
 
-To override the default formatting, pass _format_ options for the desired
-columns.
+To override the default formatting, pass _format_ options for the desired columns.
 
 ```js echo
 Inputs.table(penguins, {
@@ -86,8 +70,7 @@ Inputs.table(penguins, {
 })
 ```
 
-The _format_ function can return a text string or an HTML element.
-For example, this can be used to render inline visualizations such as bars or [sparklines](https://observablehq.com/@mbostock/covid-cases-by-state).
+The _format_ function can return a text string or an HTML element. For example, this can be used to render inline visualizations such as bars or [sparklines](https://observablehq.com/@mbostock/covid-cases-by-state).
 
 ```js echo
 Inputs.table(penguins, {
@@ -117,29 +100,17 @@ function sparkbar(max) {
 }
 ```
 
-There’s a similar _width_ option if you want to give certain columns specific
-widths. The table input defaults to a fixed _layout_ if there are twelve or
-fewer columns; this improves performance and avoids reflow when scrolling.
+There’s a similar _width_ option if you want to give certain columns specific widths. The table input defaults to a fixed _layout_ if there are twelve or fewer columns; this improves performance and avoids reflow when scrolling.
 
-You can switch _layout_ to auto if you prefer sizing columns based on content.
-This makes the columns widths resize with the data, which can cause the columns
-to jump around as the user scrolls. A horizontal scroll bar is added if the
-total width exceeds the table’s width.
+You can switch _layout_ to auto if you prefer sizing columns based on content. This makes the columns widths resize with the data, which can cause the columns to jump around as the user scrolls. A horizontal scroll bar is added if the total width exceeds the table’s width.
 
 Set _layout_ to fixed to pack all the columns into the width of the table.
 
-The table’s width can be controlled by the _width_ option, in pixels. Individual
-column widths can alternatively be defined by specifying an object with column
-names as keys, and widths as values. Use the _maxWidth_ option if the sum of
-column widths exceeds the desired table’s width.
+The table’s width can be controlled by the _width_ option, in pixels. Individual column widths can alternatively be defined by specifying an object with column names as keys, and widths as values. Use the _maxWidth_ option if the sum of column widths exceeds the desired table’s width.
 
-The _align_ option allows to change the text-alignment of cells, which can be
-right, left, or center; it defaults to right for numeric columns, and left for
-everything else.
+The _align_ option allows to change the text-alignment of cells, which can be right, left, or center; it defaults to right for numeric columns, and left for everything else.
 
-The _rows_ option indicates the number of rows to display; it defaults to 11.5.
-The _height_ and _maxHeight_ options respectively set the height and maximum
-height of the table, in pixels. The height defaults to (rows + 1) \* 22 - 1.
+The _rows_ option indicates the number of rows to display; it defaults to 11.5. The _height_ and _maxHeight_ options respectively set the height and maximum height of the table, in pixels. The height defaults to (rows + 1) \* 22 - 1.
 
 ```js echo
 Inputs.table(penguins, {
@@ -160,8 +131,7 @@ Inputs.table(penguins, {
 })
 ```
 
-You can preselect some rows in the table by setting the _value_ option to an
-array of references to the actual objects in your data.
+You can preselect some rows in the table by setting the _value_ option to an array of references to the actual objects in your data.
 
 For example, to preselect the first two items, you could set _value_ to:
 
@@ -175,9 +145,7 @@ or, if you want to preselect the rows 1, 3, 7 and 9:
 [1, 3, 7, 9].map((i) => penguins[i])
 ```
 
-The _multiple_ option allows multiple rows to be selected (defaults to true).
-When false, only one row can be selected. To set the initial value in that case,
-just reference the preselected object:
+The _multiple_ option allows multiple rows to be selected (defaults to true). When false, only one row can be selected. To set the initial value in that case, just reference the preselected object:
 
 ```js echo
 penguins[4]
@@ -194,24 +162,25 @@ Thanks to [Ilyá Belsky](https://observablehq.com/@oluckyman) and [Brett Cooper]
 
 ## Options
 
-**Inputs.table(*data*, *options*)**
+**Inputs.table(_data_, _options_)**
 
 The available table input options are:
 
-* *columns* - the columns (property names) to show; defaults to *data*.columns
-* *value* - a subset of *data* to use as the initial selection (checked rows), or a *data* item if *multiple* is false
-* *rows* - the maximum number of rows to show; defaults to 11.5
-* *sort* - the column to sort by; defaults to null (input order)
-* *reverse* - whether to reverse the initial sort (descending instead of ascending)
-* *format* - an object of column name to format function
-* *align* - an object of column name to *left*, *right*, or *center*
-* *header* - an object of column name to corresponding header; either a string or HTML element
-* *width* - the table width, or an object of column name to width
-* *maxWidth* - the maximum table width, if any
-* *height* - the fixed table height, if any
-* *maxHeight* - the maximum table height, if any; defaults to (*rows* + 1) * 22 - 1
-* *layout* - the [table layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout); defaults to fixed for ≤12 columns
-* *required* - if true, the table’s value is all *data* if no selection; defaults to true
-* *multiple* - if true, allow multiple rows to be selected; defaults to true
-
-If *width* is *auto*, the table width will be based on the table contents; note that this may cause the table to resize as rows are lazily rendered.
+- _columns_ - the columns (property names) to show; defaults to _data_.columns
+- _value_ - a subset of _data_ to use as the initial selection (checked rows), or a _data_ item if _multiple_ is false
+- _rows_ - the maximum number of rows to show; defaults to 11.5
+- _sort_ - the column to sort by; defaults to null (input order)
+- _reverse_ - whether to reverse the initial sort (descending instead of ascending)
+- _format_ - an object of column name to format function
+- _align_ - an object of column name to _left_, _right_, or _center_
+- _header_ - an object of column name to corresponding header; either a string or HTML element
+- _width_ - the table width, or an object of column name to width
+- _maxWidth_ - the maximum table width, if any
+- _height_ - the fixed table height, if any
+- _maxHeight_ - the maximum table height, if any; defaults to (_rows_ + 1) \* 22 - 1
+- _layout_ - the [table layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout); defaults to fixed for ≤12 columns
+- _required_ - if true, the table’s value is all _data_ if no selection; defaults to true
+- _select_ <a href="https://github.com/observablehq/framework/pull/1541" class="observablehq-version-badge" data-version="prerelease" title="Added in #1541"></a> - if true, allows the user to modify the table’s value by selecting rows; defaults to true
+- _multiple_ - if true, allow multiple rows to be selected; defaults to true
+
+If _width_ is _auto_, the table width will be based on the table contents; note that this may cause the table to resize as rows are lazily rendered.

package.json

@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@clack/prompts": "^0.7.0",
-    "@observablehq/inputs": "^0.10.6",
+    "@observablehq/inputs": "^0.11.0",
     "@observablehq/runtime": "^5.9.4",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-json": "^6.1.0",

src/rollup.ts

@@ -6,7 +6,7 @@ import {build} from "esbuild";
 import type {AstNode, OutputChunk, Plugin, ResolveIdResult} from "rollup";
 import {rollup} from "rollup";
 import esbuild from "rollup-plugin-esbuild";
-import {getStylePath} from "./files.js";
+import {getClientPath, getStylePath} from "./files.js";
 import type {StringLiteral} from "./javascript/source.js";
 import {getStringLiteralValue, isStringLiteral} from "./javascript/source.js";
 import {resolveNpmImport} from "./npm.js";
@@ -49,8 +49,9 @@ export async function bundleStyles({
     minify,
     alias: STYLE_MODULES
   });
-  const text = result.outputFiles[0].text;
-  return rewriteInputsNamespace(text); // TODO only for inputs
+  let text = result.outputFiles[0].text;
+  if (path === getClientPath("stdlib/inputs.css")) text = rewriteInputsNamespace(text);
+  return text;
 }
 
 export async function rollupClient(
@@ -87,10 +88,8 @@ export async function rollupClient(
   });
   try {
     const output = await bundle.generate({format: "es"});
-    let code = output.output.find((o): o is OutputChunk => o.type === "chunk")!.code; // TODO don’t assume one chunk?
-    code = rewriteTypeScriptImports(code);
-    code = rewriteInputsNamespace(code); // TODO only for inputs
-    return code;
+    const code = output.output.find((o): o is OutputChunk => o.type === "chunk")!.code; // TODO don’t assume one chunk?
+    return rewriteTypeScriptImports(code);
   } finally {
     await bundle.close();
   }
@@ -122,7 +121,7 @@ function importResolve(input: string, root: string, path: string): Plugin {
       : specifier === "npm:@observablehq/duckdb"
       ? {id: relativePath(path, "/_observablehq/stdlib/duckdb.js"), external: true} // TODO publish to npm
       : specifier === "npm:@observablehq/inputs"
-      ? {id: relativePath(path, "/_observablehq/stdlib/inputs.js"), external: true} // TODO publish to npm
+      ? {id: relativePath(path, "/_observablehq/stdlib/inputs.js"), external: true}
       : specifier === "npm:@observablehq/mermaid"
       ? {id: relativePath(path, "/_observablehq/stdlib/mermaid.js"), external: true} // TODO publish to npm
       : specifier === "npm:@observablehq/tex"

yarn.lock

@@ -262,12 +262,12 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@observablehq/inputs@^0.10.6":
-  version "0.10.6"
-  resolved "https://registry.yarnpkg.com/@observablehq/inputs/-/inputs-0.10.6.tgz#7a52f3be08774dd9d87757853b7180aec9b720de"
-  integrity sha512-fOcpJvyBwPqr9I1QdW55J5x36nxRbfyqRQXVT3li9AvMpy6m14WPo5K0m4cPCxr4IlLIDtM/lq6z1GL3ElA14g==
+"@observablehq/inputs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/@observablehq/inputs/-/inputs-0.11.0.tgz#930f5c16eef8e0d14f0e6fc3e5f2c7589b38ecd0"
+  integrity sha512-af8H7Ncg+B+5t9MVKA/GiR2oG1nK7P4g36a92jkgIaBSUDLcmta/FDiJKIyjJ3Pc+FNOGkfRcPCRWEgqVl+Q9A==
   dependencies:
-    htl "0.3"
+    htl "^0.3.1"
     isoformat "^0.2.0"
 
 "@observablehq/inspector@^5.0.0":
@@ -2048,7 +2048,7 @@ highlight.js@^11.8.0:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-11.9.0.tgz#04ab9ee43b52a41a047432c8103e2158a1b8b5b0"
   integrity sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==
 
-htl@0.3:
+htl@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/htl/-/htl-0.3.1.tgz#13c5a32fa46434f33b84d4553dd37e58a80e8d8a"
   integrity sha512-1LBtd+XhSc+++jpOOt0lCcEycXs/zTQSupOISnVAUmvGBpV7DH+C2M6hwV7zWYfpTMMg9ch4NO0lHiOTAMHdVA==