ComboBoxNormalized component (deephaven#2071)

packages/code-studio/src/styleguide/Pickers.tsx

@@ -9,6 +9,7 @@ import {
   PickerNormalized,
   Checkbox,
   ComboBox,
+  ComboBoxNormalized,
 } from '@deephaven/components';
 import { vsPerson } from '@deephaven/icons';
 import { Icon } from '@adobe/react-spectrum';
@@ -61,10 +62,24 @@ function PersonIcon(): JSX.Element {
 }
 
 export function Pickers(): JSX.Element {
-  const [selectedKey, setSelectedKey] = useState<ItemKey | null>(null);
+  const [selectedKey, setSelectedKey] = useState<ItemKey | null>(200);
 
   const [showIcons, setShowIcons] = useState(true);
 
+  const [filteredItems, setFilteredItems] = useState(itemsWithIcons);
+
+  const onSearch = useCallback(
+    (searchText: string) =>
+      setFilteredItems(
+        searchText === ''
+          ? itemsWithIcons
+          : itemsWithIcons.filter(
+              ({ item }) => item?.textValue?.includes(searchText)
+            )
+      ),
+    []
+  );
+
   const getInitialScrollPosition = useCallback(
     async () =>
       getPositionOfSelectedItem({
@@ -163,6 +178,17 @@ export function Pickers(): JSX.Element {
             showItemIcons={showIcons}
             onChange={onChange}
           />
+          <ComboBoxNormalized
+            label="ComboBox (Controlled)"
+            getInitialScrollPosition={getInitialScrollPosition}
+            normalizedItems={filteredItems}
+            selectedKey={selectedKey}
+            showItemIcons={showIcons}
+            onChange={onChange}
+            validationState={selectedKey == null ? 'invalid' : 'valid'}
+            errorMessage="Please select an item."
+            onInputChange={onSearch}
+          />
         </Flex>
       </Flex>
     </SampleSection>

packages/components/src/spectrum/comboBox/ComboBoxNormalized.tsx

@@ -0,0 +1,31 @@
+import { ComboBox as SpectrumComboBox } from '@adobe/react-spectrum';
+import { FocusableRef } from '@react-types/shared';
+import cl from 'classnames';
+import { PickerNormalizedPropsT, usePickerNormalizedProps } from '../picker';
+import { ComboBoxProps } from './ComboBox';
+
+export type ComboBoxNormalizedProps = PickerNormalizedPropsT<ComboBoxProps>;
+
+export function ComboBoxNormalized({
+  UNSAFE_className,
+  ...props
+}: ComboBoxNormalizedProps): JSX.Element {
+  const { forceRerenderKey, ref, ...pickerProps } =
+    usePickerNormalizedProps<ComboBoxNormalizedProps>(props);
+
+  return (
+    <SpectrumComboBox
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...pickerProps}
+      key={forceRerenderKey}
+      ref={ref as FocusableRef<HTMLElement>}
+      UNSAFE_className={cl(
+        'dh-combobox',
+        'dh-combobox-normalized',
+        UNSAFE_className
+      )}
+    />
+  );
+}
+
+export default ComboBoxNormalized;

packages/components/src/spectrum/comboBox/index.ts

@@ -1 +1,2 @@
 export * from './ComboBox';
+export * from './ComboBoxNormalized';

packages/jsapi-components/src/spectrum/ComboBox.tsx

@@ -0,0 +1,11 @@
+import { dh as DhType } from '@deephaven/jsapi-types';
+
+export interface ComboBoxProps {
+  table: DhType.Table;
+}
+
+export function ComboBox({ table }: ComboBoxProps): JSX.Element {
+  return <>ComboBox</>;
+}
+
+export default ComboBox;