feat: ui.search_field

plugins/ui/src/deephaven/ui/components/__init__.py

@@ -44,6 +44,7 @@
 from .range_calendar import range_calendar
 from .range_slider import range_slider
 from .row import row
+from .search_field import search_field
 from .section import section
 from .slider import slider
 from .stack import stack
@@ -109,6 +110,7 @@
     "range_calendar",
     "range_slider",
     "row",
+    "search_field",
     "section",
     "slider",
     "stack",

plugins/ui/src/deephaven/ui/components/search_field.py

@@ -0,0 +1,277 @@
+from __future__ import annotations
+from typing import Any, Callable
+from .types import (
+    AriaHasPopup,
+    AriaAutoComplete,
+    FocusEventCallable,
+    KeyboardEventCallable,
+    AlignSelf,
+    CSSProperties,
+    DimensionValue,
+    JustifySelf,
+    LayoutFlex,
+    Position,
+    LabelPosition,
+    Alignment,
+    TextFieldType,
+    TextFieldInputMode,
+    TextFieldValidationState,
+    NecessityIndicator,
+)
+from .basic import component_element
+from ..elements import Element
+
+
+def search_field(
+    is_disabled: bool | None = None,
+    is_read_only: bool | None = None,
+    is_required: bool | None = None,
+    description: Any | None = None,
+    error_message: Any | None = None,
+    auto_focus: bool | None = None,
+    value: str | None = None,
+    default_value: str | None = None,
+    label: Any | None = None,
+    auto_complete: str | None = None,
+    max_length: int | None = None,
+    min_length: int | None = None,
+    pattern: str | None = None,
+    type: TextFieldType | None = "search",
+    input_mode: TextFieldInputMode | None = None,
+    name: str | None = None,
+    icon: Element | None = None,
+    is_quiet: bool | None = None,
+    validation_state: TextFieldValidationState | None = None,
+    label_position: LabelPosition = "top",
+    label_align: Alignment | None = None,
+    necessity_indicator: NecessityIndicator | None = None,
+    contextual_help: Any | None = None,
+    on_clear: Callable[[], None] | None = None,
+    on_submit: Callable[[dict[str, str]], None] | None = None,
+    on_focus: FocusEventCallable | None = None,
+    on_blur: FocusEventCallable | None = None,
+    on_focus_change: Callable[[bool], None] | None = None,
+    on_key_down: KeyboardEventCallable | None = None,
+    on_key_up: KeyboardEventCallable | None = None,
+    on_change: Callable[[str], None] | None = None,
+    flex: LayoutFlex | None = None,
+    flex_grow: float | None = None,
+    flex_shrink: float | None = None,
+    flex_basis: DimensionValue | None = None,
+    align_self: AlignSelf | None = None,
+    justify_self: JustifySelf | None = None,
+    order: int | None = None,
+    grid_area: str | None = None,
+    grid_row: str | None = None,
+    grid_row_start: str | None = None,
+    grid_row_end: str | None = None,
+    grid_column: str | None = None,
+    grid_column_start: str | None = None,
+    grid_column_end: str | None = None,
+    margin: DimensionValue | None = None,
+    margin_top: DimensionValue | None = None,
+    margin_bottom: DimensionValue | None = None,
+    margin_start: DimensionValue | None = None,
+    margin_end: DimensionValue | None = None,
+    margin_x: DimensionValue | None = None,
+    margin_y: DimensionValue | None = None,
+    width: DimensionValue | None = None,
+    height: DimensionValue | None = None,
+    min_width: DimensionValue | None = None,
+    min_height: DimensionValue | None = None,
+    max_width: DimensionValue | None = None,
+    max_height: DimensionValue | None = None,
+    position: Position | None = None,
+    top: DimensionValue | None = None,
+    bottom: DimensionValue | None = None,
+    start: DimensionValue | None = None,
+    end: DimensionValue | None = None,
+    left: DimensionValue | None = None,
+    right: DimensionValue | None = None,
+    z_index: int | None = None,
+    is_hidden: bool | None = None,
+    id: str | None = None,
+    exclude_from_tab_order: bool | None = None,
+    aria_active_descendant: str | None = None,
+    aria_auto_complete: AriaAutoComplete | None = None,
+    aria_haspopup: AriaHasPopup | None = None,
+    aria_label: str | None = None,
+    aria_labelledby: str | None = None,
+    aria_describedby: str | None = None,
+    aria_details: str | None = None,
+    aria_errormessage: str | None = None,
+    UNSAFE_class_name: str | None = None,
+    UNSAFE_style: CSSProperties | None = None,
+    key: str | None = None,
+) -> Element:
+    """
+    SearchFields are specialized text inputs designed for searching.
+
+    Args:
+        icon: An icon to display at the start of the input.
+        is_quiet: Whether the input should be displayed with a quiet style.
+        is_disabled: Whether the input should be disabled.
+        is_read_only: Whether the input can be selected but not changed by the user.
+        is_required: Whether the input is required before form submission.
+        description: A description for the field. Provides a hint such as specific requirements for what to choose.
+        error_message: An error message to display when the field is invalid.
+        auto_focus: Whether the input should be focused on page load.
+        value: The current value of the input.
+        default_value: The default value of the input.
+        label: The label for the input.
+        auto_complete: Describes the type of autocomplete functionality the input should provide.
+        max_length: The maximum number of characters the input can accept.
+        min_length: The minimum number of characters the input can accept.
+        pattern: A regular expression that the input's value must match to be valid.
+        type: The type of input to display (defaults to "search").
+        input_mode: Hints at the type of data that might be entered by the user while editing the element or its contents.
+        name: The name of the input, used when submitting an HTML form.
+        validation_state: Whether the input should display its "valid" or "invalid" state.
+        label_position: The position of the label relative to the input.
+        label_align: The alignment of the label relative to the input.
+        necessity_indicator: Whether the required state should be shown as an icon or text.
+        contextual_help: A ContextualHelp element to place next to the label.
+        on_clear: Function called when the clear button is pressed.
+        on_submit: Function called when the search is submitted.
+        on_focus: Function called when the input receives focus.
+        on_blur: Function called when the input loses focus.
+        on_focus_change: Function called when the focus state changes.
+        on_key_down: Function called when a key is pressed.
+        on_key_up: Function called when a key is released.
+        on_change: Function called when the input value changes.
+        flex: When used in a flex layout, specifies how the element will grow or shrink to fit the space available.
+        flex_grow: When used in a flex layout, specifies how the element will grow to fit the space available.
+        flex_shrink: When used in a flex layout, specifies how the element will shrink to fit the space available.
+        flex_basis: When used in a flex layout, specifies the initial main size of the element.
+        align_self: Overrides the alignItems property of a flex or grid container.
+        justify_self: Species how the element is justified inside a flex or grid container.
+        order: The layout order for the element within a flex or grid container.
+        grid_area: When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid.
+        grid_row: When used in a grid layout, specifies the row the element should be placed in within the grid.
+        grid_column: When used in a grid layout, specifies the column the element should be placed in within the grid.
+        grid_row_start: When used in a grid layout, specifies the starting row to span within the grid.
+        grid_row_end: When used in a grid layout, specifies the ending row to span within the grid.
+        grid_column_start: When used in a grid layout, specifies the starting column to span within the grid.
+        grid_column_end: When used in a grid layout, specifies the ending column to span within the grid.
+        margin: The margin for all four sides of the element.
+        margin_top: The margin for the top side of the element.
+        margin_bottom: The margin for the bottom side of the element.
+        margin_start: The margin for the logical start side of the element, depending on layout direction.
+        margin_end: The margin for the logical end side of the element, depending on layout direction.
+        margin_x: The margin for the left and right sides of the element.
+        margin_y: The margin for the top and bottom sides of the element.
+        width: The width of the element.
+        min_width: The minimum width of the element.
+        max_width: The maximum width of the element.
+        height: The height of the element.
+        min_height: The minimum height of the element.
+        max_height: The maximum height of the element.
+        position: The position of the element.
+        top: The distance from the top of the containing element.
+        bottom: The distance from the bottom of the containing element.
+        left: The distance from the left of the containing element.
+        right: The distance from the right of the containing element.
+        start: The distance from the start of the containing element, depending on layout direction.
+        end: The distance from the end of the containing element, depending on layout direction.
+        z_index: The stack order of the element.
+        is_hidden: Whether the element is hidden.
+        id: The unique identifier of the element.
+        exclude_from_tab_order: Whether the element should be excluded from the tab order.
+        aria_active_descendant: Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.
+        aria_auto_complete: Indicates whether inputting text could trigger display of one or more predictions of the user's intended value.
+        aria_haspopup: Indicates whether the element has a popup.
+        aria_label: The label for the element.
+        aria_labelledby: The id of the element that labels the current element.
+        aria_describedby: The id of the element that describes the current element.
+        aria_details: The id of the element that provides additional information about the current element.
+        aria_errormessage: The id of the element that provides an error message for the current element.
+        UNSAFE_class_name: A CSS class to apply to the element.
+        UNSAFE_style: A CSS style to apply to the element.
+        key: A unique identifier used by React to render elements in a list.
+
+    Returns:
+        The rendered search field element.
+    """
+    return component_element(
+        "SearchField",
+        icon=icon,
+        is_quiet=is_quiet,
+        is_disabled=is_disabled,
+        is_read_only=is_read_only,
+        is_required=is_required,
+        description=description,
+        error_message=error_message,
+        auto_focus=auto_focus,
+        value=value,
+        default_value=default_value,
+        label=label,
+        auto_complete=auto_complete,
+        max_length=max_length,
+        min_length=min_length,
+        pattern=pattern,
+        type=type,
+        input_mode=input_mode,
+        name=name,
+        validation_state=validation_state,
+        label_position=label_position,
+        label_align=label_align,
+        necessity_indicator=necessity_indicator,
+        contextual_help=contextual_help,
+        on_clear=on_clear,
+        on_submit=on_submit,
+        on_focus=on_focus,
+        on_blur=on_blur,
+        on_focus_change=on_focus_change,
+        on_key_down=on_key_down,
+        on_key_up=on_key_up,
+        on_change=on_change,
+        flex=flex,
+        flex_grow=flex_grow,
+        flex_shrink=flex_shrink,
+        flex_basis=flex_basis,
+        align_self=align_self,
+        justify_self=justify_self,
+        order=order,
+        grid_area=grid_area,
+        grid_row=grid_row,
+        grid_row_start=grid_row_start,
+        grid_row_end=grid_row_end,
+        grid_column=grid_column,
+        grid_column_start=grid_column_start,
+        grid_column_end=grid_column_end,
+        margin=margin,
+        margin_top=margin_top,
+        margin_bottom=margin_bottom,
+        margin_start=margin_start,
+        margin_end=margin_end,
+        margin_x=margin_x,
+        margin_y=margin_y,
+        width=width,
+        height=height,
+        min_width=min_width,
+        min_height=min_height,
+        max_width=max_width,
+        max_height=max_height,
+        position=position,
+        top=top,
+        bottom=bottom,
+        start=start,
+        end=end,
+        left=left,
+        right=right,
+        z_index=z_index,
+        is_hidden=is_hidden,
+        id=id,
+        exclude_from_tab_order=exclude_from_tab_order,
+        aria_active_descendant=aria_active_descendant,
+        aria_auto_complete=aria_auto_complete,
+        aria_haspopup=aria_haspopup,
+        aria_label=aria_label,
+        aria_labelledby=aria_labelledby,
+        aria_describedby=aria_describedby,
+        aria_details=aria_details,
+        aria_errormessage=aria_errormessage,
+        UNSAFE_class_name=UNSAFE_class_name,
+        UNSAFE_style=UNSAFE_style,
+        key=key,
+    )

plugins/ui/src/js/src/elements/SearchField.tsx

@@ -0,0 +1,85 @@
+import {
+  SearchField as DHCSearchField,
+  SearchFieldProps as DHCSearchFieldProps,
+} from '@deephaven/components';
+import {
+  useConditionalCallback,
+  useFocusEventCallback,
+  useKeyboardEventCallback,
+} from './hooks';
+
+export function SearchField(
+  props: DHCSearchFieldProps & {
+    onSubmit?: (value: string) => void;
+    onClear?: () => void;
+  }
+): JSX.Element {
+  const {
+    onSubmit: propOnSubmit,
+    onClear: propOnClear,
+    onFocus: propOnFocus,
+    onBlur: propOnBlur,
+    onFocusChange: propOnFocusChange,
+    onKeyDown: propOnKeyDown,
+    onKeyUp: propOnKeyUp,
+    onChange: propOnChange,
+    ...otherProps
+  } = props;
+
+  const onSubmit = useConditionalCallback(
+    propOnSubmit != null,
+    (value: string) => {
+      propOnSubmit?.(value);
+    },
+    [propOnSubmit]
+  );
+
+  const onClear = useConditionalCallback(
+    propOnClear != null,
+    () => {
+      propOnClear?.();
+    },
+    [propOnClear]
+  );
+
+  const onFocusChange = useConditionalCallback(
+    propOnFocusChange != null,
+    (isFocused: boolean) => {
+      propOnFocusChange?.(isFocused);
+    },
+    [propOnFocusChange]
+  );
+
+  const onChange = useConditionalCallback(
+    propOnChange != null,
+    (value: string) => {
+      propOnChange?.(value);
+    },
+    [propOnChange]
+  );
+
+  const onFocus = useFocusEventCallback(propOnFocus);
+  const onBlur = useFocusEventCallback(propOnBlur);
+
+  const onKeyDown = useKeyboardEventCallback(propOnKeyDown);
+  const onKeyUp = useKeyboardEventCallback(propOnKeyUp);
+
+  return (
+    <DHCSearchField
+      onSubmit={onSubmit}
+      onClear={onClear}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onFocusChange={onFocusChange}
+      onKeyDown={onKeyDown}
+      onKeyUp={onKeyUp}
+      onChange={onChange}
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...otherProps}
+    />
+  );
+}
+
+SearchField.displayName = 'SearchField';
+
+export default SearchField;

plugins/ui/src/js/src/elements/hooks/index.ts

@@ -12,3 +12,4 @@ export * from './useSelectionProps';
 export * from './useTimeComponentProps';
 export * from './useTimeValueMemo';
 export * from './useDebouncedOnChange';
+export * from './useConditionalCallback';

plugins/ui/src/js/src/elements/index.ts

@@ -26,6 +26,7 @@ export * from './Radio';
 export * from './RadioGroup';
 export * from './RangeCalendar';
 export * from './RangeSlider';
+export * from './SearchField';
 export * from './Slider';
 export * from './Tabs';
 export * from './TabPanels';