From da1076a33e687ad50ee109a825ec5d34ea4fdc38 Mon Sep 17 00:00:00 2001 From: Joe Date: Mon, 15 Apr 2024 08:47:38 -0500 Subject: [PATCH 1/2] docs: Combo box spec (#392) fixes #391 Since a combo box is essentially a picker, this is identical to the picker spec with the exception of a `search_type` modeled off of the functionality provided by React Spectrum's [useFilter hook](https://react-spectrum.adobe.com/react-aria/useFilter.html) I know there are more collator options, but I'm unsure how necessary they are at this time, and if they are perhaps we need another object like `ui.search_options` to handle that --- plugins/ui/DESIGN.md | 256 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 219 insertions(+), 37 deletions(-) diff --git a/plugins/ui/DESIGN.md b/plugins/ui/DESIGN.md index 071872caa..f101165ac 100644 --- a/plugins/ui/DESIGN.md +++ b/plugins/ui/DESIGN.md @@ -1037,7 +1037,7 @@ A section that can be added to a menu, such as a `ui.picker`. Children are the d ```py import deephaven.ui as ui ui.section( - *children: PickerItem, + *children: Item, title: str | None = None, **props: Any ) -> SectionElement @@ -1045,16 +1045,16 @@ ui.section( ###### Parameters -| Parameter | Type | Description | -| ----------- | ------------- | ----------------------------------------- | -| `*children` | `PickerItem` | The options to render within the section. | +| Parameter | Type | Description | +| ----------- | ------- | ----------------------------------------- | +| `*children` | `Item` | The options to render within the section. | | `title` | `str \| None` | The title of the section. | -| `**props` | `Any` | Any other Section prop | +| `**props` | `Any` | Any other Section prop | ##### ui.picker A picker that can be used to select from a list. Children should be one of four types: -If children are of type `PickerItem`, they are the dropdown options. +If children are of type `Item`, they are the dropdown options. If children are of type `SectionElement`, they are the dropdown sections. If children are of type `Table`, the values in the table are the dropdown options. There can only be one child, the `Table`. If children are of type `PartitionedTable`, the values in the table are the dropdown options and the partitions create multiple sections. There can only be one child, the `PartitionedTable`. @@ -1062,7 +1062,7 @@ If children are of type `PartitionedTable`, the values in the table are the drop ```py import deephaven.ui as ui ui.picker( - *children: PickerItem | SectionElement | Table | PartitionedTable, + *children: Item | SectionElement | Table | PartitionedTable, key_column: ColumnName | None = None, label_column: ColumnName | None = None, description_column: ColumnName | None = None, @@ -1078,19 +1078,19 @@ ui.picker( ###### Parameters -| Parameter | Type | Description | -| ---------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `*children` | `PickerItem \| SectionElement \| Table \| PartitionedTable` | The options to render within the picker. | -| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to use as item keys. Defaults to the first column. | -| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as primary text. Defaults to the `key_column` value. | -| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as descriptions. | -| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to map to icons. | -| `title_column` | `ColumnName \| None` | Only valid if children is of type `PartitionedTable`. The column of values to display as section names. Should be the same for all values in the constituent `Table`. If not specified, the section titles will be created from the `key_columns` of the `PartitionedTable`. | -| `default_selected_key` | `Key \| None` | The initial selected key in the collection (uncontrolled). | -| `selected_key` | `Key \| None` | The currently selected key in the collection (controlled). | -| `on_selection_change` | `Callable[[Key], None] \| None` | Handler that is called when the selection changes. | -| `on_change` | `Callable[[Key], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selection changes. | -| `**props` | `Any` | Any other [Picker](https://react-spectrum.adobe.com/react-spectrum/Picker.html) prop, with the exception of `items`, `validate`, `errorMessage` (as a callback) and `onLoadMore` | +| Parameter | Type | Description | +| ---------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `*children` | `Item \| SectionElement \| Table \| PartitionedTable` | The options to render within the picker. | +| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to use as item keys. Defaults to the first column. | +| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as primary text. Defaults to the `key_column` value. | +| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as descriptions. | +| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to map to icons. | +| `title_column` | `ColumnName \| None` | Only valid if children is of type `PartitionedTable`. The column of values to display as section names. Should be the same for all values in the constituent `Table`. If not specified, the section titles will be created from the `key_columns` of the `PartitionedTable`. | +| `default_selected_key` | `Key \| None` | The initial selected key in the collection (uncontrolled). | +| `selected_key` | `Key \| None` | The currently selected key in the collection (controlled). | +| `on_selection_change` | `Callable[[Key], None] \| None` | Handler that is called when the selection changes. | +| `on_change` | `Callable[[Key], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selection changes. | +| `**props` | `Any` | Any other [Picker](https://react-spectrum.adobe.com/react-spectrum/Picker.html) prop, with the exception of `items`, `validate`, `errorMessage` (as a callback) and `onLoadMore` | ```py import deephaven.ui as ui @@ -1234,13 +1234,13 @@ def list_action_menu( ###### ui.list_view A list view that can be used to create a list of items. Children should be one of two types: -1. If children are of type `ListViewItem`, they are the list items. +1. If children are of type `Item`, they are the list items. 2. If children are of type `Table`, the values in the table are the list items. There can only be one child, the `Table`. ```py import deephaven.ui as ui ui.list_view( - *children: ListViewItem | Table, + *children: Item | Table, key_column: ColumnName | None = None, label_column: ColumnName | None = None, description_column: ColumnName | None = None, @@ -1256,20 +1256,20 @@ ui.list_view( ``` ###### Parameters -| Parameter | Type | Description | -|-------------------------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -| `*children` | `ListViewItem \| Table` | The options to render within the picker. | -| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to use as item keys. Defaults to the first column. | -| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to display as primary text. Defaults to the `key_column` value. | -| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to display as descriptions. | -| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to map to icons. | -| `actions` | `ListActionGroupElement \| ListActionMenuElement \| None` | Only valid if children are of type Table. The action group or menus to render for all elements within the list view. | -| `default_selected_keys` | `Selection \| None` | The initial selected keys in the collection (uncontrolled). | -| `selected_keys` | `Selection \| None` | The currently selected keys in the collection (controlled). | -| `render_empty_state` | `Element \| None` | Sets what the `list_view` should render when there is no content to display. | -| `on_selection_change` | `Callable[[Selection], None] \| None` | Handler that is called when the selections changes. | -| `on_change` | `Callable[[Selection], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selections changes. | -| `**props` | `Any` | Any other [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html) prop, with the exception of `items`, `dragAndDropHooks`, and `onLoadMore`. | +| Parameter | Type | Description | +|-------------------------|------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `*children` | `Item \| Table` | The options to render within the list_view. | +| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to use as item keys. Defaults to the first column. | +| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to display as primary text. Defaults to the `key_column` value. | +| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to display as descriptions. | +| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table`. The column of values to map to icons. | +| `actions` | `ListActionGroupElement \| ListActionMenuElement \| None` | Only valid if children are of type Table. The action group or menus to render for all elements within the list view. | +| `default_selected_keys` | `Selection \| None` | The initial selected keys in the collection (uncontrolled). | +| `selected_keys` | `Selection \| None` | The currently selected keys in the collection (controlled). | +| `render_empty_state` | `Element \| None` | Sets what the `list_view` should render when there is no content to display. | +| `on_selection_change` | `Callable[[Selection], None] \| None` | Handler that is called when the selections changes. | +| `on_change` | `Callable[[Selection], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selections changes. | +| `**props` | `Any` | Any other [ListView](https://react-spectrum.adobe.com/react-spectrum/ListView.html) prop, with the exception of `items`, `dragAndDropHooks`, and `onLoadMore`. | ```py @@ -1483,6 +1483,187 @@ date_picker8 = ui.date_picker( ) ``` +##### ui.combo_box + +A combo_box that can be used to search or select from a list. +Children should be one of four types: +If children are of type `Item`, they are the dropdown options. +If children are of type `SectionElement`, they are the dropdown sections. +If children are of type `Table`, the values in the table are the dropdown options. There can only be one child, the `Table`. +If children are of type `PartitionedTable`, the values in the table are the dropdown options and the partitions create multiple sections. There can only be one child, the `PartitionedTable`. + +```py +import deephaven.ui as ui +ui.combo_box( + *children: Item | SectionElement | Table | PartitionedTable, + key_column: ColumnName | None = None, + label_column: ColumnName | None = None, + description_column: ColumnName | None = None, + icon_column: ColumnName | None = None, + title_column: ColumnName | None = None, + default_selected_key: Key | None = None, + selected_key: Key | None = None, + input_value: str | None = None, + default_input_value: str | None = None, + on_input_change: Callable[[str], None] | None = None, + on_selection_change: Callable[[Key], None] | None = None, + on_change: Callable[[Key], None] | None = None, + on_open_change: Callable[[bool, MenuTriggerAction], None] | None = None, + **props: Any +) -> ComboBoxElement +``` + +###### Parameters + +| Parameter | Type | Description | +| ---------------------- | ----------------------------------------------------- |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| +| `*children` | `Item \| SectionElement \| Table \| PartitionedTable` | The options to render within the combo_box. | +| `key_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to use as item keys. Defaults to the first column. | +| `label_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as primary text. Defaults to the `key_column` value. | +| `description_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to display as descriptions. | +| `icon_column` | `ColumnName \| None` | Only valid if children are of type `Table` or `PartitionedTable`. The column of values to map to icons. | +| `title_column` | `ColumnName \| None` | Only valid if children is of type `PartitionedTable`. The column of values to display as section names. Should be the same for all values in the constituent `Table`. If not specified, the section titles will be created from the `key_columns` of the `PartitionedTable`. | +| `default_selected_key` | `Key \| None` | The initial selected key in the collection (uncontrolled). | +| `selected_key` | `Key \| None` | The currently selected key in the collection (controlled). | +| `input_value` | `str \| None` | The value of the search input (controlled). | +| `default_input_value` | `str \| None` | The default value of the search input (uncontrolled). | +| `on_input_change` | `Callable[[str], None] \| None` | Handler that is called when the search input value changes. | +| `on_selection_change` | `Callable[[Key], None] \| None` | Handler that is called when the selection changes. | +| `on_change` | `Callable[[Key], None] \| None` | Alias of `on_selection_change`. Handler that is called when the selection changes. | +| `on_open_change` | `Callable[[bool, MenuTriggerAction], None] \| None` | Method that is called when the open state of the menu changes. Returns the new open state and the action that caused the opening of the menu. | +| `**props` | `Any` | Any other [Combo_Box](https://react-spectrum.adobe.com/react-spectrum/ComboBox.html) prop, with the exception of `items`, `validate`, `errorMessage` (as a callback) and `onLoadMore` | + +```py +import deephaven.ui as ui + +# simple combo_box that takes ui.items and is uncontrolled +combo_box1 = ui.combo_box( + ui.item("Option 1"), + ui.item("Option 2"), + ui.item("Option 3"), + ui.item("Option 4"), + default_selected_key="Option 2", +) + +# simple combo_box that takes combo_box options directly and is controlled +option, set_option = ui.use_state("Option 2") + +combo_box2 = ui.combo_box( + "Option 1", + "Option 2", + "Option 3", + "Option 4", + selected_key=option, + on_selection_change=set_option +) + +# the input value can be uncontrolled +combo_box3 = ui.combo_box( + ui.item("Option 1"), + ui.item("Option 2"), + ui.item("Option 3"), + ui.item("Option 4"), + default_input_value="Option" +) + +# the input value can be controlled +input_value, set_input_value = ui.use_state("Option") + +combo_box4 = ui.combo_box( + ui.item("Option 1"), + ui.item("Option 2"), + ui.item("Option 3"), + ui.item("Option 4"), + input_value=input_value, + on_input_change=set_input_value +) + +# manually create a section with items +combo_box5 = ui.combo_box( + ui.section( + ui.item("Option 1"), + ui.item("Option 2"), + title="Section 1" + ), + ui.section( + ui.item("Option 3"), + ui.item("Option 4"), + title="Section 2" + ) +) + +# manually create a section with combo_box options directly +combo_box6 = ui.combo_box( + ui.section( + "Option 1", + "Option 2", + ), + ui.section( + "Option 3", + "Option 4", + ) +) + +from deephaven import empty_table + +table1 = empty_table(4).update_view("data=i") +table2 = empty_table(1).update_view("data=10") + +# data hooks can be used to create a combo_box from a table +# this should be avoided as it is not as performant as just passing in the table directly +options = ui.use_column_data(table1) + +combo_box7 = ui.combo_box(children=options) + +# instead, pass in the table directly +combo_box8 = ui.combo_box(table1) + +from deephaven import new_table +from deephaven.column import string_col, int_col + +color_table = new_table([ + string_col("Sections", ["Interesting Colors", "Interesting Colors", "Other Colors"]), + string_col("SectionNames", ["Favorites", "Favorites", "Other"]), + int_col("Keys", ["salmon", "lemonchiffon", "black"]), + string_col("Labels", ["Salmon", "Lemon Chiffon", "Black"]), + string_col("Descriptions", ["An interesting color", "Another interesting color", "A color"]), + string_col("Icons", ["Amusementpark", "Teapot", "Sentiment Negative"]) +]) +partitioned_table = color_table.partition_by("Sections") + +color, set_color = ui.use_state("salmon") + +# this will create a combo_box with two sections, one for each partition +combo_box9 = ui.combo_box( + partitioned_table, + key_column="Keys", + label_column="Labels", + description_column="Descriptions", + icon_column="Icons", + title_column="SectionNames", + selected_key=color, + on_selection_change=set_color +) + +color, set_color = ui.use_state("salmon") + +# this will create a combo_box that matches against the start of the label when searching +combo_box10 = ui.combo_box( + color_table, + key_column="Keys", + search_type="STARTS_WITH", + selected_key=color, + on_selection_change=set_color +) + +# data can be filtered using the input value +items = ["First Option", "Second Option", "Third Option", "Fourth Option"] +filter_value, set_filter_value = ui.use_state('') +filtered_items = ui.use_memo(lambda: filter(lambda item: item.startswith(filter_value), items), [filter_value, items]) + +combo_box11 = ui.combo_box(*filtered_items, on_input_change=set_filter_value) +``` + #### ui.table `ui.table` is a wrapper for a Deephaven `Table` object that allows you to add UI customizations or callbacks. The basic syntax for creating a `UITable` is: @@ -1997,7 +2178,7 @@ TableData = dict[ColumnName, ColumnData] TransformedData = Any # Stringable is a type that is naturally convertible to a string Stringable = str | int | float | bool -PickerItem = Stringable | ItemElement +Item = Stringable | ItemElement Key = Stringable ActionKey = Key Selection = Sequence[Key] @@ -2007,6 +2188,7 @@ InstantConvertible = Union[None, Instant, int, str, datetime.datetime, numpy.dat ZonedDateTimeConvertible = Union[None, ZonedDateTime, str, datetime.datetime, numpy.datetime64, pandas.Timestamp] Date = Instant | LocalDate | ZonedDateTime | LocalDateConvertible | InstantConvertible | ZonedDateTimeConvertible Granularity = Literal["DAY", "HOUR", "MINUTE", "SECOND"] +MenuTriggerAction = Literal["FOCUS", "INPUT", "MANUAL"] T = TypeVar("T") Combination: TypeAlias = T | set[T] | Sequence[T] From a4761cc046261d207e40d6cadef523411a1675c3 Mon Sep 17 00:00:00 2001 From: Don Date: Wed, 17 Apr 2024 10:17:58 -0400 Subject: [PATCH 2/2] test: bump ts, eslint and prettier configs (#416) - Bumps configs to latest versions - Update failing types and formatting caught by newer versions --- package-lock.json | 158 ++++++++++++------ package.json | 10 +- .../src/js/src/PlotlyExpressChartModel.ts | 10 +- .../src/js/src/PlotlyExpressChartPanel.tsx | 4 +- .../src/js/src/PlotlyExpressChartUtils.ts | 8 +- .../src/js/src/useHandleSceneTicks.ts | 2 +- .../ui/src/js/src/elements/ElementUtils.tsx | 4 +- plugins/ui/src/js/src/elements/ObjectView.tsx | 2 +- plugins/ui/src/js/src/elements/Picker.tsx | 2 +- plugins/ui/src/js/src/elements/UITable.tsx | 2 +- .../js/src/elements/spectrum/ActionButton.tsx | 2 +- .../src/js/src/elements/spectrum/Button.tsx | 5 +- .../ui/src/js/src/elements/spectrum/Flex.tsx | 2 +- .../ui/src/js/src/elements/spectrum/Form.tsx | 2 +- .../js/src/elements/spectrum/RangeSlider.tsx | 2 +- .../src/js/src/elements/spectrum/Slider.tsx | 2 +- .../js/src/elements/spectrum/TabPanels.tsx | 4 +- .../js/src/elements/spectrum/TextField.tsx | 2 +- .../src/elements/spectrum/mapSpectrumProps.ts | 2 +- .../src/elements/spectrum/useButtonProps.ts | 7 +- .../spectrum/useFocusEventCallback.ts | 4 +- .../spectrum/useKeyboardEventCallback.ts | 2 +- .../spectrum/usePressEventCallback.ts | 4 +- .../ui/src/js/src/elements/usePickerProps.ts | 6 +- .../ui/src/js/src/layout/ParentItemContext.ts | 2 +- .../src/layout/PortalPanelManagerContext.ts | 2 +- plugins/ui/src/js/src/layout/ReactPanel.tsx | 2 +- .../ui/src/js/src/layout/ReactPanelContext.ts | 2 +- .../js/src/widget/DashboardWidgetHandler.tsx | 2 +- .../ui/src/js/src/widget/DocumentHandler.tsx | 2 +- .../ui/src/js/src/widget/WidgetHandler.tsx | 2 +- .../ui/src/js/src/widget/WidgetTestUtils.ts | 4 +- plugins/ui/src/js/src/widget/WidgetTypes.ts | 4 +- 33 files changed, 172 insertions(+), 98 deletions(-) diff --git a/package-lock.json b/package-lock.json index 99a042392..1516183e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,10 @@ "./plugins/*/src/js/" ], "devDependencies": { - "@deephaven/babel-preset": "^0.40.0", - "@deephaven/eslint-config": "^0.40.0", - "@deephaven/prettier-config": "^0.40.0", - "@deephaven/tsconfig": "^0.40.0", + "@deephaven/babel-preset": "^0.72.0", + "@deephaven/eslint-config": "^0.72.0", + "@deephaven/prettier-config": "^0.72.0", + "@deephaven/tsconfig": "^0.72.0", "@playwright/test": "^1.41.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.3", @@ -34,7 +34,7 @@ "lerna": "^6.6.1", "npm-run-all": "^4.1.5", "nx": "15.9.2", - "prettier": "^2.8.7", + "prettier": "3.0.0", "vite": "~4.1.4" } }, @@ -2300,9 +2300,9 @@ } }, "node_modules/@deephaven/babel-preset": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@deephaven/babel-preset/-/babel-preset-0.40.0.tgz", - "integrity": "sha512-5ZoFXB1SJTJwhg5phupC+wWNR18Jir8uibILsQiKuMLcmZdfR1uRsJNzmMnz/MV/C+ifhip54waJQjEEljMrbQ==", + "version": "0.72.0", + "resolved": "https://registry.npmjs.org/@deephaven/babel-preset/-/babel-preset-0.72.0.tgz", + "integrity": "sha512-flk1Pqq9YrwYtxUKDYZV1RYrnEbzdZ/52cxcU+P7c+zgM79bgzEfCRsab50y1m3PeWls9qlVi+iNlUGNz6z5GQ==", "dev": true, "dependencies": { "@babel/core": "^7.20.0", @@ -3526,9 +3526,9 @@ } }, "node_modules/@deephaven/eslint-config": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@deephaven/eslint-config/-/eslint-config-0.40.0.tgz", - "integrity": "sha512-227bATcyanUNJ8jybJt/wZyoR7Hun/ZYI8EmRXKbO+0SMBG1LiyzEYqTnjB/VKzPF44OAk8ouo5LdJ1H3TIbnw==", + "version": "0.72.0", + "resolved": "https://registry.npmjs.org/@deephaven/eslint-config/-/eslint-config-0.72.0.tgz", + "integrity": "sha512-8cDs2K1VxByED5L3U8wHrTe7Yoj/EOW4yUW2lOV5QlLmjTOgRf5pevNrBm2GnplBMefdyB49T5dEyhRBIPwthw==", "dev": true, "dependencies": { "eslint-config-airbnb": "^19.0.4", @@ -3541,7 +3541,7 @@ "eslint": "^8.29.0", "eslint-import-resolver-typescript": "^3.5.0", "eslint-plugin-es": "^4.1.0", - "eslint-plugin-prettier": "^3.3.1", + "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-react-refresh": "0.3.4" } }, @@ -4170,12 +4170,12 @@ } }, "node_modules/@deephaven/prettier-config": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@deephaven/prettier-config/-/prettier-config-0.40.0.tgz", - "integrity": "sha512-jnzyj7AFRtTVGflPJzbNvdVL2lSb0ah5NPwHZ9sNyfwHoB0mUK8Jy0JNv2DqHD96LpFQLdQS+2QK3ouTFEZHXg==", + "version": "0.72.0", + "resolved": "https://registry.npmjs.org/@deephaven/prettier-config/-/prettier-config-0.72.0.tgz", + "integrity": "sha512-edYejgDJnIspoUXFC9NWWuwBUTwy898y8vcjKhfRRolovY8ihDDuGLwHwbnCaOYNlNukukhuHJKK1ychASQ8bQ==", "dev": true, "peerDependencies": { - "prettier": "^2.2.1" + "prettier": "^3.0.0" } }, "node_modules/@deephaven/react-hooks": { @@ -4291,9 +4291,9 @@ } }, "node_modules/@deephaven/tsconfig": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@deephaven/tsconfig/-/tsconfig-0.40.0.tgz", - "integrity": "sha512-2VA+rSmvTLTfLy0Z61pPu+aZ+ljnOgTMVZaVnXbeZzKdbQgyM9a8W5OmsQ/Vq8K3JQ+qGJ7ghYYmZmJva+BKrw==", + "version": "0.72.0", + "resolved": "https://registry.npmjs.org/@deephaven/tsconfig/-/tsconfig-0.72.0.tgz", + "integrity": "sha512-ER4+KsrTBO8rhd4YA6SY5dRBZjUajrNKb2yQijSXNZTbWbQCet/522Yui2YCgWFBRbM5GvYGDoUcc/07tZeLZQ==", "dev": true }, "node_modules/@deephaven/utils": { @@ -7876,6 +7876,19 @@ "node": ">=14" } }, + "node_modules/@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "dev": true, + "peer": true, + "engines": { + "node": "^12.20.0 || ^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/@playwright/test": { "version": "1.41.2", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz", @@ -16182,22 +16195,31 @@ } }, "node_modules/eslint-plugin-prettier": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", - "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", + "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", "dev": true, "peer": true, "dependencies": { - "prettier-linter-helpers": "^1.0.0" + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.8.6" }, "engines": { - "node": ">=6.0.0" + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint-plugin-prettier" }, "peerDependencies": { - "eslint": ">=5.0.0", - "prettier": ">=1.13.0" + "@types/eslint": ">=8.0.0", + "eslint": ">=8.0.0", + "eslint-config-prettier": "*", + "prettier": ">=3.0.0" }, "peerDependenciesMeta": { + "@types/eslint": { + "optional": true + }, "eslint-config-prettier": { "optional": true } @@ -29042,15 +29064,15 @@ } }, "node_modules/prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", "dev": true, "bin": { - "prettier": "bin-prettier.js" + "prettier": "bin/prettier.cjs" }, "engines": { - "node": ">=10.13.0" + "node": ">=14" }, "funding": { "url": "https://github.com/prettier/prettier?sponsor=1" @@ -31950,6 +31972,23 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "node_modules/synckit": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", + "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "dev": true, + "peer": true, + "dependencies": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/table": { "version": "6.8.2", "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", @@ -37542,9 +37581,9 @@ } }, "@deephaven/babel-preset": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@deephaven/babel-preset/-/babel-preset-0.40.0.tgz", - "integrity": "sha512-5ZoFXB1SJTJwhg5phupC+wWNR18Jir8uibILsQiKuMLcmZdfR1uRsJNzmMnz/MV/C+ifhip54waJQjEEljMrbQ==", + "version": "0.72.0", + "resolved": "https://registry.npmjs.org/@deephaven/babel-preset/-/babel-preset-0.72.0.tgz", + "integrity": "sha512-flk1Pqq9YrwYtxUKDYZV1RYrnEbzdZ/52cxcU+P7c+zgM79bgzEfCRsab50y1m3PeWls9qlVi+iNlUGNz6z5GQ==", "dev": true, "requires": { "@babel/core": "^7.20.0", @@ -38475,9 +38514,9 @@ } }, "@deephaven/eslint-config": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@deephaven/eslint-config/-/eslint-config-0.40.0.tgz", - "integrity": "sha512-227bATcyanUNJ8jybJt/wZyoR7Hun/ZYI8EmRXKbO+0SMBG1LiyzEYqTnjB/VKzPF44OAk8ouo5LdJ1H3TIbnw==", + "version": "0.72.0", + "resolved": "https://registry.npmjs.org/@deephaven/eslint-config/-/eslint-config-0.72.0.tgz", + "integrity": "sha512-8cDs2K1VxByED5L3U8wHrTe7Yoj/EOW4yUW2lOV5QlLmjTOgRf5pevNrBm2GnplBMefdyB49T5dEyhRBIPwthw==", "dev": true, "requires": { "eslint-config-airbnb": "^19.0.4", @@ -40445,9 +40484,9 @@ } }, "@deephaven/prettier-config": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@deephaven/prettier-config/-/prettier-config-0.40.0.tgz", - "integrity": "sha512-jnzyj7AFRtTVGflPJzbNvdVL2lSb0ah5NPwHZ9sNyfwHoB0mUK8Jy0JNv2DqHD96LpFQLdQS+2QK3ouTFEZHXg==", + "version": "0.72.0", + "resolved": "https://registry.npmjs.org/@deephaven/prettier-config/-/prettier-config-0.72.0.tgz", + "integrity": "sha512-edYejgDJnIspoUXFC9NWWuwBUTwy898y8vcjKhfRRolovY8ihDDuGLwHwbnCaOYNlNukukhuHJKK1ychASQ8bQ==", "dev": true, "requires": {} }, @@ -40529,9 +40568,9 @@ } }, "@deephaven/tsconfig": { - "version": "0.40.0", - "resolved": "https://registry.npmjs.org/@deephaven/tsconfig/-/tsconfig-0.40.0.tgz", - "integrity": "sha512-2VA+rSmvTLTfLy0Z61pPu+aZ+ljnOgTMVZaVnXbeZzKdbQgyM9a8W5OmsQ/Vq8K3JQ+qGJ7ghYYmZmJva+BKrw==", + "version": "0.72.0", + "resolved": "https://registry.npmjs.org/@deephaven/tsconfig/-/tsconfig-0.72.0.tgz", + "integrity": "sha512-ER4+KsrTBO8rhd4YA6SY5dRBZjUajrNKb2yQijSXNZTbWbQCet/522Yui2YCgWFBRbM5GvYGDoUcc/07tZeLZQ==", "dev": true }, "@deephaven/utils": { @@ -43124,6 +43163,13 @@ "dev": true, "optional": true }, + "@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "dev": true, + "peer": true + }, "@playwright/test": { "version": "1.41.2", "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.41.2.tgz", @@ -49626,13 +49672,14 @@ } }, "eslint-plugin-prettier": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz", - "integrity": "sha512-htg25EUYUeIhKHXjOinK4BgCcDwtLHjqaxCDsMy5nbnUMkKFvIhMVCp+5GFUXQ4Nr8lBsPqtGAqBenbpFqAA2g==", + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", + "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", "dev": true, "peer": true, "requires": { - "prettier-linter-helpers": "^1.0.0" + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.8.6" } }, "eslint-plugin-react": { @@ -58805,9 +58852,9 @@ "dev": true }, "prettier": { - "version": "2.8.8", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", - "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz", + "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==", "dev": true }, "prettier-linter-helpers": { @@ -61046,6 +61093,17 @@ "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==" }, + "synckit": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", + "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "dev": true, + "peer": true, + "requires": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + } + }, "table": { "version": "6.8.2", "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz", diff --git a/package.json b/package.json index 6e62cd333..64acaf276 100644 --- a/package.json +++ b/package.json @@ -22,10 +22,10 @@ "update-dh-packages": "lerna run --concurrency 1 update-dh-packages" }, "devDependencies": { - "@deephaven/babel-preset": "^0.40.0", - "@deephaven/eslint-config": "^0.40.0", - "@deephaven/prettier-config": "^0.40.0", - "@deephaven/tsconfig": "^0.40.0", + "@deephaven/babel-preset": "^0.72.0", + "@deephaven/eslint-config": "^0.72.0", + "@deephaven/prettier-config": "^0.72.0", + "@deephaven/tsconfig": "^0.72.0", "@playwright/test": "^1.41.2", "@testing-library/jest-dom": "^5.16.4", "@testing-library/react": "^12.1.3", @@ -47,7 +47,7 @@ "lerna": "^6.6.1", "npm-run-all": "^4.1.5", "nx": "15.9.2", - "prettier": "^2.8.7", + "prettier": "3.0.0", "vite": "~4.1.4" }, "prettier": "@deephaven/prettier-config" diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChartModel.ts b/plugins/plotly-express/src/js/src/PlotlyExpressChartModel.ts index 244f7991c..e2a86a8f0 100644 --- a/plugins/plotly-express/src/js/src/PlotlyExpressChartModel.ts +++ b/plugins/plotly-express/src/js/src/PlotlyExpressChartModel.ts @@ -126,7 +126,7 @@ export class PlotlyExpressChartModel extends ChartModel { return this.layout; } - override close() { + override close(): void { super.close(); this.widget?.close(); this.widget = undefined; @@ -180,7 +180,7 @@ export class PlotlyExpressChartModel extends ChartModel { this.widget = undefined; } - updateLayout(data: PlotlyChartWidgetData) { + updateLayout(data: PlotlyChartWidgetData): void { const { figure } = data; const { plotly } = figure; const { layout: plotlyLayout = {} } = plotly; @@ -255,7 +255,7 @@ export class PlotlyExpressChartModel extends ChartModel { this.fireUpdate(this.getData()); } - addTable(id: number, table: Table) { + addTable(id: number, table: Table): void { if (this.tableReferenceMap.has(id)) { return; } @@ -267,7 +267,7 @@ export class PlotlyExpressChartModel extends ChartModel { } } - subscribeTable(id: number) { + subscribeTable(id: number): void { const table = this.tableReferenceMap.get(id); const columnReplacements = this.tableColumnReplacementMap.get(id); @@ -292,7 +292,7 @@ export class PlotlyExpressChartModel extends ChartModel { } } - removeTable(id: number) { + removeTable(id: number): void { this.subscriptionCleanupMap.get(id)?.(); this.tableSubscriptionMap.get(id)?.close(); diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx b/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx index db2cd42ad..64887bd1e 100644 --- a/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx +++ b/plugins/plotly-express/src/js/src/PlotlyExpressChartPanel.tsx @@ -7,7 +7,9 @@ import { useApi } from '@deephaven/jsapi-bootstrap'; import PlotlyExpressChartModel from './PlotlyExpressChartModel.js'; import { useHandleSceneTicks } from './useHandleSceneTicks.js'; -export function PlotlyExpressChartPanel(props: WidgetPanelProps) { +export function PlotlyExpressChartPanel( + props: WidgetPanelProps +): JSX.Element { const dh = useApi(); const { fetch, metadata = {}, ...rest } = props; const containerRef = useRef(null); diff --git a/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts b/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts index c91c66f82..48d78c35a 100644 --- a/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts +++ b/plugins/plotly-express/src/js/src/PlotlyExpressChartUtils.ts @@ -2,12 +2,12 @@ import type { Data, PlotlyDataLayoutConfig } from 'plotly.js'; import type { Table, Widget } from '@deephaven/jsapi-types'; export interface PlotlyChartWidget { - getDataAsBase64(): string; - exportedObjects: { fetch(): Promise }[]; - addEventListener( + getDataAsBase64: () => string; + exportedObjects: { fetch: () => Promise
}[]; + addEventListener: ( type: string, fn: (event: CustomEvent) => () => void - ): void; + ) => void; } export interface PlotlyChartWidgetData { diff --git a/plugins/plotly-express/src/js/src/useHandleSceneTicks.ts b/plugins/plotly-express/src/js/src/useHandleSceneTicks.ts index c40bb726c..1c1fb2a8b 100644 --- a/plugins/plotly-express/src/js/src/useHandleSceneTicks.ts +++ b/plugins/plotly-express/src/js/src/useHandleSceneTicks.ts @@ -4,7 +4,7 @@ import PlotlyExpressChartModel from './PlotlyExpressChartModel.js'; export function useHandleSceneTicks( model: PlotlyExpressChartModel | undefined, container: HTMLDivElement | null -) { +): void { useEffect(() => { // Plotly scenes and geo views reset when our data ticks // Pause rendering data updates when the user is manipulating a scene diff --git a/plugins/ui/src/js/src/elements/ElementUtils.tsx b/plugins/ui/src/js/src/elements/ElementUtils.tsx index 3058ec267..9fb4fca60 100644 --- a/plugins/ui/src/js/src/elements/ElementUtils.tsx +++ b/plugins/ui/src/js/src/elements/ElementUtils.tsx @@ -25,7 +25,7 @@ export type ObjectNode = { */ export type ElementNode< K extends string = string, - P extends Record = Record + P extends Record = Record, > = { /** * The type of this element. Can be something like `deephaven.ui.components.Panel`, or @@ -37,7 +37,7 @@ export type ElementNode< export type ElementNodeWithChildren< K extends string = string, - P extends Record = Record + P extends Record = Record, > = ElementNode & { props: React.PropsWithChildren

; }; diff --git a/plugins/ui/src/js/src/elements/ObjectView.tsx b/plugins/ui/src/js/src/elements/ObjectView.tsx index cc6083283..8f8b32f1f 100644 --- a/plugins/ui/src/js/src/elements/ObjectView.tsx +++ b/plugins/ui/src/js/src/elements/ObjectView.tsx @@ -6,7 +6,7 @@ import type { dh } from '@deephaven/jsapi-types'; const log = Log.module('@deephaven/js-plugin-ui/ObjectView'); export type ObjectViewProps = { object: dh.WidgetExportedObject }; -function ObjectView(props: ObjectViewProps) { +function ObjectView(props: ObjectViewProps): JSX.Element { const { object } = props; log.info('Object is', object); const { type } = object; diff --git a/plugins/ui/src/js/src/elements/Picker.tsx b/plugins/ui/src/js/src/elements/Picker.tsx index 7cc7f023f..1e564a33f 100644 --- a/plugins/ui/src/js/src/elements/Picker.tsx +++ b/plugins/ui/src/js/src/elements/Picker.tsx @@ -22,7 +22,7 @@ type WrappedDHPickerJSApiProps = Omit & { export type PickerProps = (DHPickerProps | WrappedDHPickerJSApiProps) & SerializedPickerEventProps; -function Picker({ children, ...props }: PickerProps) { +function Picker({ children, ...props }: PickerProps): JSX.Element { const settings = useSelector(getSettings); const pickerProps = usePickerProps(props); diff --git a/plugins/ui/src/js/src/elements/UITable.tsx b/plugins/ui/src/js/src/elements/UITable.tsx index 9d901f4df..0c137c27e 100644 --- a/plugins/ui/src/js/src/elements/UITable.tsx +++ b/plugins/ui/src/js/src/elements/UITable.tsx @@ -30,7 +30,7 @@ function UITable({ sorts, alwaysFetchColumns, table: exportedTable, -}: UITableProps) { +}: UITableProps): JSX.Element | null { const dh = useApi(); const [model, setModel] = useState(); const [columns, setColumns] = useState(); diff --git a/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx b/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx index f04f800dd..fac0936e5 100644 --- a/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/ActionButton.tsx @@ -7,7 +7,7 @@ import { SerializedButtonEventProps, useButtonProps } from './useButtonProps'; function ActionButton( props: SpectrumActionButtonProps & SerializedButtonEventProps -) { +): JSX.Element { const buttonProps = useButtonProps(props); // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/plugins/ui/src/js/src/elements/spectrum/Button.tsx b/plugins/ui/src/js/src/elements/spectrum/Button.tsx index c15ee7939..a8b4f28b8 100644 --- a/plugins/ui/src/js/src/elements/spectrum/Button.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/Button.tsx @@ -5,7 +5,10 @@ import { } from '@adobe/react-spectrum'; import { SerializedButtonEventProps, useButtonProps } from './useButtonProps'; -function Button(props: SpectrumButtonProps & SerializedButtonEventProps) { +function Button( + variant: SpectrumButtonProps['variant'], + props: SpectrumButtonProps & SerializedButtonEventProps +): JSX.Element { const buttonProps = useButtonProps(props); // eslint-disable-next-line react/jsx-props-no-spreading diff --git a/plugins/ui/src/js/src/elements/spectrum/Flex.tsx b/plugins/ui/src/js/src/elements/spectrum/Flex.tsx index 23362fce3..60a396bd2 100644 --- a/plugins/ui/src/js/src/elements/spectrum/Flex.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/Flex.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Flex as SpectrumFlex, FlexProps } from '@adobe/react-spectrum'; -function Flex(props: FlexProps) { +function Flex(props: FlexProps): JSX.Element { // eslint-disable-next-line react/jsx-props-no-spreading return ; } diff --git a/plugins/ui/src/js/src/elements/spectrum/Form.tsx b/plugins/ui/src/js/src/elements/spectrum/Form.tsx index 9dffdadfb..928effc33 100644 --- a/plugins/ui/src/js/src/elements/spectrum/Form.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/Form.tsx @@ -5,7 +5,7 @@ function Form( props: SpectrumFormProps & { onSubmit?: (data: { [key: string]: FormDataEntryValue }) => void; } -) { +): JSX.Element { const { onSubmit: propOnSubmit, ...otherProps } = props; const onSubmit = useCallback( diff --git a/plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx b/plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx index 0f164b7a8..073fb5fa3 100644 --- a/plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/RangeSlider.tsx @@ -9,7 +9,7 @@ const VALUE_CHANGE_DEBOUNCE = 250; const EMPTY_FUNCTION = () => undefined; -function RangeSlider(props: SpectrumRangeSliderProps) { +function RangeSlider(props: SpectrumRangeSliderProps): JSX.Element { const { defaultValue = { start: 0, end: 0 }, value: propValue, diff --git a/plugins/ui/src/js/src/elements/spectrum/Slider.tsx b/plugins/ui/src/js/src/elements/spectrum/Slider.tsx index 28de56e84..f2bf43880 100644 --- a/plugins/ui/src/js/src/elements/spectrum/Slider.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/Slider.tsx @@ -9,7 +9,7 @@ const VALUE_CHANGE_DEBOUNCE = 250; const EMPTY_FUNCTION = () => undefined; -function Slider(props: SpectrumSliderProps) { +function Slider(props: SpectrumSliderProps): JSX.Element { const { defaultValue = 0, value: propValue, diff --git a/plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx b/plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx index b13310dc5..47febf562 100644 --- a/plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/TabPanels.tsx @@ -4,7 +4,9 @@ import { SpectrumTabPanelsProps, } from '@adobe/react-spectrum'; -function TabPanels(props: SpectrumTabPanelsProps) { +function TabPanels( + props: SpectrumTabPanelsProps +): JSX.Element { const { UNSAFE_style: unsafeStyle, ...otherProps } = props; return ( diff --git a/plugins/ui/src/js/src/elements/spectrum/TextField.tsx b/plugins/ui/src/js/src/elements/spectrum/TextField.tsx index 40726a5ba..1cac27244 100644 --- a/plugins/ui/src/js/src/elements/spectrum/TextField.tsx +++ b/plugins/ui/src/js/src/elements/spectrum/TextField.tsx @@ -9,7 +9,7 @@ const VALUE_CHANGE_DEBOUNCE = 250; const EMPTY_FUNCTION = () => undefined; -function TextField(props: SpectrumTextFieldProps) { +function TextField(props: SpectrumTextFieldProps): JSX.Element { const { defaultValue = '', value: propValue, diff --git a/plugins/ui/src/js/src/elements/spectrum/mapSpectrumProps.ts b/plugins/ui/src/js/src/elements/spectrum/mapSpectrumProps.ts index daba81688..c7c693473 100644 --- a/plugins/ui/src/js/src/elements/spectrum/mapSpectrumProps.ts +++ b/plugins/ui/src/js/src/elements/spectrum/mapSpectrumProps.ts @@ -6,7 +6,7 @@ import mapSpectrumChildren from './mapSpectrumChildren'; * @param props Props to map as spectrum props */ export function mapSpectrumProps< - T extends PropsWithChildren> + T extends PropsWithChildren>, >(props: T): T { return { ...props, diff --git a/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts b/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts index 4ecf16829..d0daa1297 100644 --- a/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts +++ b/plugins/ui/src/js/src/elements/spectrum/useButtonProps.ts @@ -43,7 +43,10 @@ export type SerializedButtonEventProps = { onKeyUp?: SerializedKeyboardEventCallback; }; -export function useButtonProps(props: SerializedButtonEventProps & T) { +// returns SpectrumButtonProps +export function useButtonProps( + props: SerializedButtonEventProps & T +): T & SerializedButtonEventProps { const { onPress: propOnPress, onPressStart: propsOnPressStart, @@ -75,5 +78,5 @@ export function useButtonProps(props: SerializedButtonEventProps & T) { onKeyDown, onKeyUp, ...mapSpectrumProps(otherProps), - }; + } as T & SerializedButtonEventProps; } diff --git a/plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts b/plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts index e259d0ee7..adb1565b8 100644 --- a/plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts +++ b/plugins/ui/src/js/src/elements/spectrum/useFocusEventCallback.ts @@ -31,7 +31,9 @@ export type SerializedFocusEventCallback = ( * @param callback FocusEvent callback to be called with the serialized event * @returns A callback to be passed into the Spectrum component that transforms the event and calls the provided callback */ -export function useFocusEventCallback(callback?: SerializedFocusEventCallback) { +export function useFocusEventCallback( + callback?: SerializedFocusEventCallback +): (e: FocusEvent) => void { return useCallback( (e: FocusEvent) => { callback?.(serializeFocusEvent(e)); diff --git a/plugins/ui/src/js/src/elements/spectrum/useKeyboardEventCallback.ts b/plugins/ui/src/js/src/elements/spectrum/useKeyboardEventCallback.ts index bd06e6fed..b04a207ca 100644 --- a/plugins/ui/src/js/src/elements/spectrum/useKeyboardEventCallback.ts +++ b/plugins/ui/src/js/src/elements/spectrum/useKeyboardEventCallback.ts @@ -33,7 +33,7 @@ export type SerializedKeyboardEventCallback = ( */ export function useKeyboardEventCallback( callback?: SerializedKeyboardEventCallback -) { +): (e: KeyboardEvent) => void { return useCallback( (e: KeyboardEvent) => { callback?.(serializeKeyboardEvent(e)); diff --git a/plugins/ui/src/js/src/elements/spectrum/usePressEventCallback.ts b/plugins/ui/src/js/src/elements/spectrum/usePressEventCallback.ts index da68bdd88..563660f0a 100644 --- a/plugins/ui/src/js/src/elements/spectrum/usePressEventCallback.ts +++ b/plugins/ui/src/js/src/elements/spectrum/usePressEventCallback.ts @@ -34,7 +34,9 @@ export type SerializedPressEventCallback = ( * @param callback PressEvent callback to be called with the serialized event * @returns A callback to be passed into the Spectrum component that transforms the event and calls the provided callback */ -export function usePressEventCallback(callback?: SerializedPressEventCallback) { +export function usePressEventCallback( + callback?: SerializedPressEventCallback +): (e: PressEvent) => void { return useCallback( (e: PressEvent) => { callback?.(serializePressEvent(e)); diff --git a/plugins/ui/src/js/src/elements/usePickerProps.ts b/plugins/ui/src/js/src/elements/usePickerProps.ts index 5261f3de6..d4d71d1df 100644 --- a/plugins/ui/src/js/src/elements/usePickerProps.ts +++ b/plugins/ui/src/js/src/elements/usePickerProps.ts @@ -26,7 +26,9 @@ export interface SerializedPickerEventProps { * @param props Props to wrap * @returns Wrapped props */ -export function usePickerProps(props: SerializedPickerEventProps & T) { +export function usePickerProps( + props: SerializedPickerEventProps & T +): T & SerializedPickerEventProps { const { onFocus, onBlur, onKeyDown, onKeyUp, ...otherProps } = props; const serializedOnFocus = useFocusEventCallback(onFocus); @@ -44,5 +46,5 @@ export function usePickerProps(props: SerializedPickerEventProps & T) { // handles nested children inside of `Item` and `Section` components, so // we are intentionally not wrapping `otherProps` in `mapSpectrumProps` ...otherProps, - }; + } as T & SerializedPickerEventProps; } diff --git a/plugins/ui/src/js/src/layout/ParentItemContext.ts b/plugins/ui/src/js/src/layout/ParentItemContext.ts index e6ae4c205..ad613ac40 100644 --- a/plugins/ui/src/js/src/layout/ParentItemContext.ts +++ b/plugins/ui/src/js/src/layout/ParentItemContext.ts @@ -4,7 +4,7 @@ import type { ContentItem } from '@deephaven/golden-layout'; export const ParentItemContext = createContext(null); -export function useParentItem() { +export function useParentItem(): ContentItem { const layoutManager = useLayoutManager(); const parentContextItem = useContext(ParentItemContext); const parentItem = useMemo( diff --git a/plugins/ui/src/js/src/layout/PortalPanelManagerContext.ts b/plugins/ui/src/js/src/layout/PortalPanelManagerContext.ts index 7ecc58902..c304098e4 100644 --- a/plugins/ui/src/js/src/layout/PortalPanelManagerContext.ts +++ b/plugins/ui/src/js/src/layout/PortalPanelManagerContext.ts @@ -7,7 +7,7 @@ export type PortalPanelMap = ReadonlyMap; export const PortalPanelManagerContext = React.createContext(null); -export function usePortalPanelManager() { +export function usePortalPanelManager(): PortalPanelMap { return useContextOrThrow(PortalPanelManagerContext, 'PortalPanelManager'); } diff --git a/plugins/ui/src/js/src/layout/ReactPanel.tsx b/plugins/ui/src/js/src/layout/ReactPanel.tsx index 17165eade..2688dcebd 100644 --- a/plugins/ui/src/js/src/layout/ReactPanel.tsx +++ b/plugins/ui/src/js/src/layout/ReactPanel.tsx @@ -23,7 +23,7 @@ const log = Log.module('@deephaven/js-plugin-ui/ReactPanel'); * Note that because the `PortalPanel` will be saved with the GoldenLayout config, it's possible there is already a panel that exists with the same ID. * In that case, the existing panel will be re-used. */ -function ReactPanel({ children, title }: ReactPanelProps) { +function ReactPanel({ children, title }: ReactPanelProps): JSX.Element | null { const layoutManager = useLayoutManager(); const { metadata, onClose, onOpen, panelId } = useReactPanel(); const portalManager = usePortalPanelManager(); diff --git a/plugins/ui/src/js/src/layout/ReactPanelContext.ts b/plugins/ui/src/js/src/layout/ReactPanelContext.ts index ff10a545d..590fb3e3c 100644 --- a/plugins/ui/src/js/src/layout/ReactPanelContext.ts +++ b/plugins/ui/src/js/src/layout/ReactPanelContext.ts @@ -9,6 +9,6 @@ export const ReactPanelContext = createContext(null); * Gets the panel ID from the nearest panel context. * @returns The panel ID or null if not in a panel */ -export function usePanelId() { +export function usePanelId(): string | null { return useContext(ReactPanelContext); } diff --git a/plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx b/plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx index e5e2f81cb..126db25b0 100644 --- a/plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx +++ b/plugins/ui/src/js/src/widget/DashboardWidgetHandler.tsx @@ -35,7 +35,7 @@ function DashboardWidgetHandler({ onClose, onDataChange, ...otherProps -}: DashboardWidgetHandlerProps) { +}: DashboardWidgetHandlerProps): JSX.Element { const handleClose = useCallback(() => { log.debug('handleClose', id); onClose?.(id); diff --git a/plugins/ui/src/js/src/widget/DocumentHandler.tsx b/plugins/ui/src/js/src/widget/DocumentHandler.tsx index 449e00da7..f0ae8a48e 100644 --- a/plugins/ui/src/js/src/widget/DocumentHandler.tsx +++ b/plugins/ui/src/js/src/widget/DocumentHandler.tsx @@ -44,7 +44,7 @@ function DocumentHandler({ initialData: data = EMPTY_OBJECT, onDataChange = EMPTY_FUNCTION, onClose, -}: DocumentHandlerProps) { +}: DocumentHandlerProps): JSX.Element { log.debug('Rendering document', widget); const panelOpenCountRef = useRef(0); const panelIdIndex = useRef(0); diff --git a/plugins/ui/src/js/src/widget/WidgetHandler.tsx b/plugins/ui/src/js/src/widget/WidgetHandler.tsx index 057be65b7..c27dbdb44 100644 --- a/plugins/ui/src/js/src/widget/WidgetHandler.tsx +++ b/plugins/ui/src/js/src/widget/WidgetHandler.tsx @@ -58,7 +58,7 @@ function WidgetHandler({ fetch, widget: descriptor, initialData: initialDataProp, -}: WidgetHandlerProps) { +}: WidgetHandlerProps): JSX.Element | null { const [widget, setWidget] = useState(); const [document, setDocument] = useState(); const [initialData] = useState(initialDataProp); diff --git a/plugins/ui/src/js/src/widget/WidgetTestUtils.ts b/plugins/ui/src/js/src/widget/WidgetTestUtils.ts index f7cec022e..278c0e50b 100644 --- a/plugins/ui/src/js/src/widget/WidgetTestUtils.ts +++ b/plugins/ui/src/js/src/widget/WidgetTestUtils.ts @@ -4,7 +4,7 @@ import type { dh } from '@deephaven/jsapi-types'; export function makeDocumentUpdatedJsonRpc( document: Record = {} -) { +): { jsonrpc: string; method: string; params: string[] } { return { jsonrpc: '2.0', method: 'documentUpdated', @@ -14,7 +14,7 @@ export function makeDocumentUpdatedJsonRpc( export function makeDocumentUpdatedJsonRpcString( document: Record = {} -) { +): string { return JSON.stringify(makeDocumentUpdatedJsonRpc(document)); } diff --git a/plugins/ui/src/js/src/widget/WidgetTypes.ts b/plugins/ui/src/js/src/widget/WidgetTypes.ts index 8c870cb53..20d898ac2 100644 --- a/plugins/ui/src/js/src/widget/WidgetTypes.ts +++ b/plugins/ui/src/js/src/widget/WidgetTypes.ts @@ -3,8 +3,8 @@ import type { dh } from '@deephaven/jsapi-types'; export type WidgetId = string; export interface WidgetMessageDetails { - getDataAsBase64(): string; - getDataAsString(): string; + getDataAsBase64: () => string; + getDataAsString: () => string; exportedObjects: dh.WidgetExportedObject[]; }