+ >
+ {columnNames}
+
{selectedColumn !== undefined && (
diff --git a/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormatEditor.scss b/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormatEditor.scss
index 6481f965e6..0781dade6c 100644
--- a/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormatEditor.scss
+++ b/packages/iris-grid/src/sidebar/conditional-formatting/ConditionalFormatEditor.scss
@@ -22,4 +22,8 @@
.color-select {
padding: 0 2em 0 0.25em;
}
+
+ .dh-combobox {
+ width: 100%;
+ }
}
diff --git a/packages/iris-grid/src/sidebar/conditional-formatting/RowFormatEditor.tsx b/packages/iris-grid/src/sidebar/conditional-formatting/RowFormatEditor.tsx
index 0ecd9f3113..ad2e438444 100644
--- a/packages/iris-grid/src/sidebar/conditional-formatting/RowFormatEditor.tsx
+++ b/packages/iris-grid/src/sidebar/conditional-formatting/RowFormatEditor.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
import Log from '@deephaven/log';
import type { dh as DhType } from '@deephaven/jsapi-types';
import { ComboBox } from '@deephaven/components';
@@ -108,23 +108,19 @@ function RowFormatEditor(props: RowFormatEditorProps): JSX.Element {
[onChange, selectedColumn, selectedStyle, conditionConfig, conditionValid]
);
- const columnInputOptions = columns.map(({ name }) => ({
- title: name,
- value: name,
- }));
+ const columnNames = useMemo(() => columns.map(({ name }) => name), [columns]);
return (
+ >
+ {columnNames}
+
{selectedColumn !== undefined && (
diff --git a/packages/jsapi-components/src/spectrum/Picker.tsx b/packages/jsapi-components/src/spectrum/Picker.tsx
index 4d5b39016f..2e9872d042 100644
--- a/packages/jsapi-components/src/spectrum/Picker.tsx
+++ b/packages/jsapi-components/src/spectrum/Picker.tsx
@@ -52,9 +52,9 @@ export function Picker({
// `null` is a valid value for `selectedKey` in controlled mode, so we check
// for explicit `undefined` to identify uncontrolled mode.
const isUncontrolled = props.selectedKey === undefined;
- const [uncontrolledSelectedKey, setUncontrolledSelectedKey] = useState(
- props.defaultSelectedKey
- );
+ const [uncontrolledSelectedKey, setUncontrolledSelectedKey] = useState<
+ ItemKey | null | undefined
+ >(props.defaultSelectedKey);
const keyColumn = useMemo(
() => getItemKeyColumn(table, keyColumnName),
@@ -126,7 +126,7 @@ export function Picker({
);
const onSelectionChangeInternal = useCallback(
- (key: ItemKey): void => {
+ (key: ItemKey | null): void => {
// If our component is uncontrolled, track the selected key internally
// so that we can scroll to the selected item if the user re-opens
if (isUncontrolled) {
diff --git a/packages/jsapi-components/src/usePickerWithSelectedValues.test.ts b/packages/jsapi-components/src/usePickerWithSelectedValues.test.ts
index 6c2a80bbc0..97166b4143 100644
--- a/packages/jsapi-components/src/usePickerWithSelectedValues.test.ts
+++ b/packages/jsapi-components/src/usePickerWithSelectedValues.test.ts
@@ -1,5 +1,6 @@
import { act, renderHook } from '@testing-library/react-hooks';
-import type { FilterCondition, Table } from '@deephaven/jsapi-types';
+import type { dh as DhType } from '@deephaven/jsapi-types';
+import { usePickerItemScale } from '@deephaven/components';
import {
createSearchTextFilter,
createSelectedValuesFilter,
@@ -21,6 +22,10 @@ jest.mock('./useFilterConditionFactories');
jest.mock('./useTableUtils');
jest.mock('./useViewportData');
jest.mock('./useViewportFilter');
+jest.mock('@deephaven/components', () => ({
+ ...jest.requireActual('@deephaven/components'),
+ usePickerItemScale: jest.fn(),
+}));
jest.mock('@deephaven/jsapi-utils', () => ({
...jest.requireActual('@deephaven/jsapi-utils'),
createSearchTextFilter: jest.fn(),
@@ -48,8 +53,8 @@ const mock = {
typeof useDebouncedValue
>,
filter: [
- createMockProxy
(),
- createMockProxy(),
+ createMockProxy(),
+ createMockProxy(),
],
filterConditionFactories: [jest.fn(), jest.fn()] as FilterConditionFactory[],
keyedItem: createMockProxy>({
@@ -67,12 +72,14 @@ const mock = {
};
const mockTable = {
- usersAndGroups: createMockProxy(),
- list: createMockProxy(),
+ usersAndGroups: createMockProxy(),
+ list: createMockProxy(),
};
function mockUseViewportData(size: number) {
- const viewportData = createMockProxy>({
+ const viewportData = createMockProxy<
+ UseViewportDataResult
+ >({
table: mockTable.list,
viewportData: mock.viewportData,
size,
@@ -80,7 +87,9 @@ function mockUseViewportData(size: number) {
asMock(useViewportData)
.mockName('useViewportData')
- .mockReturnValue(viewportData as UseViewportDataResult);
+ .mockReturnValue(
+ viewportData as UseViewportDataResult
+ );
}
async function renderOnceAndWait(
@@ -104,6 +113,9 @@ async function renderOnceAndWait(
beforeEach(() => {
jest.clearAllMocks();
+ asMock(usePickerItemScale).mockName('usePickerItemScale').mockReturnValue({
+ itemHeight: 32,
+ });
asMock(useTableUtils).mockName('useTableUtils').mockReturnValue(tableUtils);
asMock(mock.mapItemToValue)
diff --git a/packages/jsapi-components/src/usePickerWithSelectedValues.ts b/packages/jsapi-components/src/usePickerWithSelectedValues.ts
index 1e4cc192f5..d63b2ef78a 100644
--- a/packages/jsapi-components/src/usePickerWithSelectedValues.ts
+++ b/packages/jsapi-components/src/usePickerWithSelectedValues.ts
@@ -10,8 +10,8 @@ import {
useDebouncedValue,
usePromiseFactory,
} from '@deephaven/react-hooks';
+import { usePickerItemScale } from '@deephaven/components';
import {
- COMBO_BOX_ITEM_HEIGHT,
KeyedItem,
SEARCH_DEBOUNCE_MS,
SelectionT,
@@ -62,6 +62,8 @@ export function usePickerWithSelectedValues({
filterConditionFactories?: FilterConditionFactory[];
trimSearchText?: boolean;
}): UsePickerWithSelectedValuesResult {
+ const { itemHeight } = usePickerItemScale();
+
const tableUtils = useTableUtils();
// `searchText` should always be up to date for controlled search input.
@@ -141,7 +143,7 @@ export function usePickerWithSelectedValues({
const list = useViewportData({
table: listTable,
- itemHeight: COMBO_BOX_ITEM_HEIGHT,
+ itemHeight,
viewportSize: VIEWPORT_SIZE,
viewportPadding: VIEWPORT_PADDING,
});
diff --git a/packages/utils/src/UIConstants.ts b/packages/utils/src/UIConstants.ts
index 2a5d7b962a..3181d311a8 100644
--- a/packages/utils/src/UIConstants.ts
+++ b/packages/utils/src/UIConstants.ts
@@ -1,6 +1,4 @@
export const ACTION_ICON_HEIGHT = 24;
-export const COMBO_BOX_ITEM_HEIGHT = 32;
-export const COMBO_BOX_TOP_OFFSET = 4;
export const ITEM_KEY_PREFIX = 'DH_ITEM_KEY';
// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/src/ListBoxBase.tsx#L56
export const PICKER_ITEM_HEIGHTS = {
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-chromium-linux.png
index 5e7fd2661f..b81d68614f 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-firefox-linux.png
index aca566546f..7f65e44fa1 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-chromium-linux.png
index e41cb510be..c3eb0fe318 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-firefox-linux.png
index 2192caab50..084b2b3282 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-webkit-linux.png
index 2e862cba42..d6f8024661 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row0-select-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-chromium-linux.png
index 8bd50b4e45..733d6eceb3 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-firefox-linux.png
index 0ea6fe6237..265ed5b1c8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-webkit-linux.png
index e08ea21cc1..e64c04d533 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row1-select-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-chromium-linux.png
index 865a0bb39d..5dcb1462d5 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-firefox-linux.png
index 65def74edc..d4f090d238 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-webkit-linux.png
index 738beca1e4..3e5051843e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row2-select-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-chromium-linux.png
index cfb83bf7a1..8a76b712c6 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-firefox-linux.png
index ecce293651..2da7726b0a 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-webkit-linux.png
index c366cbeb2b..771e608fe6 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row3-text-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-chromium-linux.png
index c37f303fb4..b233209738 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-firefox-linux.png
index a43bae5bf5..83f27b2076 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-webkit-linux.png
index 144069b750..aa634fa190 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row4-button-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-chromium-linux.png
index a7584bd318..3e521016af 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-firefox-linux.png
index 0ea6fe6237..265ed5b1c8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-webkit-linux.png
index e08ea21cc1..e64c04d533 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row5-text-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-chromium-linux.png
index a7584bd318..3e521016af 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-firefox-linux.png
index 0ea6fe6237..265ed5b1c8 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-webkit-linux.png
index e08ea21cc1..e64c04d533 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-focus-col3-row6-button-disabled-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png
index ca38958d4f..73f6ebba73 100644
Binary files a/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/inputs-webkit-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png
index a313191681..10724bfe64 100644
Binary files a/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-chromium-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png
index d278c8cf68..c2d689247e 100644
Binary files a/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-firefox-linux.png differ
diff --git a/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png b/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png
index 174c78f47c..984f2d4ddb 100644
Binary files a/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png and b/tests/styleguide.spec.ts-snapshots/pickers-webkit-linux.png differ