feat: add a clear button to FilterPicker, Select, ComboBox (#787)

Author: tenphi

.changeset/afraid-mugs-sort.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add ItemAction component with a temporary implementation.

.changeset/modern-tigers-impress.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add a clear button to FilterPicker, Select and ComboBox components. Redesign the clear button in SearchInput component.

src/components/actions/ItemAction/ItemAction.tsx

@@ -0,0 +1,18 @@
+import { FocusableRef } from '@react-types/shared';
+import { forwardRef } from 'react';
+
+import { tasty } from '../../../tasty';
+import { Button, CubeButtonProps } from '../Button';
+
+export interface CubeItemActionProps extends CubeButtonProps {
+  // All props from Button are inherited
+}
+
+export const ItemAction = tasty(Button, {
+  type: 'neutral',
+  styles: {
+    height: '($size - 1x)',
+    width: '($size - 1x)',
+    margin: '0 (.5x - 1bw)',
+  },
+});

src/components/actions/ItemAction/index.ts

@@ -0,0 +1,2 @@
+export { ItemAction } from './ItemAction';
+export type { CubeItemActionProps } from './ItemAction';

src/components/actions/index.ts

@@ -10,6 +10,7 @@ const Button = Object.assign(
 
 export * from './Button';
 export * from './Action/Action';
+export * from './ItemAction';
 export * from './ItemButton';
 export * from './Menu';
 export * from './CommandMenu';

src/components/content/ItemBase/ItemBase.tsx

@@ -172,6 +172,8 @@ const ItemBaseElement = tasty({
       'with-icon ^ with-prefix': 'max-content 1sf max-content max-content',
       'with-icon & with-prefix':
         'max-content max-content 1sf max-content max-content',
+      '(with-icon ^ with-right-icon) & !with-description & !with-prefix & !with-suffix & !with-label':
+        'max-content',
     },
     gridRows: {
       '': 'auto auto',
@@ -461,6 +463,7 @@ const ItemBase = <T extends HTMLElement = HTMLDivElement>(
     return {
       'with-icon': !!finalIcon,
       'with-right-icon': !!finalRightIcon,
+      'with-label': !!(children || labelProps),
       'with-prefix': !!finalPrefix,
       'with-suffix': !!finalSuffix,
       'with-description': !!description,

src/components/fields/ComboBox/ComboBox.stories.tsx

@@ -55,6 +55,14 @@ export default {
         defaultValue: { summary: false },
       },
     },
+    isClearable: {
+      control: { type: 'boolean' },
+      description:
+        'Whether the combo box is clearable using ESC keyboard button or clear button inside the input',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
 
     /* Behavior */
     menuTrigger: {
@@ -347,6 +355,13 @@ Valid.args = { selectedKey: 'yellow', validationState: 'valid' };
 export const Disabled = Template.bind({});
 Disabled.args = { selectedKey: 'yellow', isDisabled: true };
 
+export const Clearable = Template.bind({});
+Clearable.args = {
+  defaultSelectedKey: 'purple',
+  isClearable: true,
+  placeholder: 'Choose a color...',
+};
+
 export const Wide: StoryFn<CubeComboBoxProps<any>> = (
   args: CubeComboBoxProps<any>,
 ) => (

src/components/fields/ComboBox/ComboBox.tsx

@@ -19,7 +19,7 @@ import {
 import { Section as BaseSection, useComboBoxState } from 'react-stately';
 
 import { useEvent } from '../../../_internal/index';
-import { DownIcon, LoadingIcon } from '../../../icons';
+import { CloseIcon, DownIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import { FieldBaseProps } from '../../../shared';
 import {
@@ -37,6 +37,7 @@ import {
 } from '../../../utils/react';
 import { useFocus } from '../../../utils/react/interactions';
 import { useEventBus } from '../../../utils/react/useEventBus';
+import { ItemAction } from '../../actions';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { Item } from '../../Item';
 import { OverlayWrapper } from '../../overlays/OverlayWrapper';
@@ -70,7 +71,9 @@ const TriggerElement = tasty({
     placeContent: 'center',
     placeSelf: 'stretch',
     radius: '(1r - 1bw) right',
+    padding: '0',
     width: '3x',
+    boxSizing: 'border-box',
     color: {
       '': '#dark-02',
       hovered: '#dark-02',
@@ -125,6 +128,8 @@ export interface CubeComboBoxProps<T>
   suffixPosition?: 'before' | 'after';
   menuTrigger?: MenuTriggerAction;
   allowsCustomValue?: boolean;
+  /** Whether the combo box is clearable using ESC keyboard button or clear button inside the input */
+  isClearable?: boolean;
 }
 
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
@@ -201,6 +206,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     labelSuffix,
     selectedKey,
     defaultSelectedKey,
+    isClearable,
     ...otherProps
   } = props;
 
@@ -306,6 +312,32 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
   let validationIcon = isInvalid ? InvalidIcon : ValidIcon;
   let validation = cloneElement(validationIcon);
 
+  // Clear button logic
+  let hasValue = props.allowsCustomValue
+    ? state.inputValue !== ''
+    : state.selectedKey != null;
+  let showClearButton =
+    isClearable && hasValue && !isDisabled && !props.isReadOnly;
+
+  // Clear function
+  let clearValue = useEvent(() => {
+    // Always clear input value in state so UI resets to placeholder
+    state.setInputValue('');
+    // Notify external input value only when custom value mode is enabled
+    if (props.allowsCustomValue) {
+      props.onInputChange?.('');
+    }
+    props.onSelectionChange?.(null);
+    state.setSelectedKey(null);
+
+    // Close the popup if it's open
+    if (state.isOpen) {
+      state.close();
+    }
+    // Focus back to the input
+    inputRef.current?.focus();
+  });
+
   let comboBoxWidth = wrapperRef?.current?.offsetWidth;
 
   if (icon) {
@@ -333,6 +365,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
       loading: isLoading,
       prefix: !!prefix,
       suffix: true,
+      clearable: showClearButton,
     }),
     [
       isInvalid,
@@ -342,6 +375,7 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
       isFocused,
       isLoading,
       prefix,
+      showClearButton,
     ],
   );
 
@@ -453,6 +487,16 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
           </>
         ) : null}
         {suffixPosition === 'after' ? suffix : null}
+        {showClearButton && (
+          <ItemAction
+            icon={<CloseIcon />}
+            size={size}
+            theme={validationState === 'invalid' ? 'danger' : undefined}
+            qa="ComboBoxClearButton"
+            data-no-trigger={hideTrigger ? '' : undefined}
+            onPress={clearValue}
+          />
+        )}
         {!hideTrigger ? (
           <TriggerElement
             data-popover-trigger

src/components/fields/FilterPicker/FilterPicker.stories.tsx

@@ -74,6 +74,14 @@ const meta: Meta<typeof FilterPicker> = {
         defaultValue: { summary: false },
       },
     },
+    isClearable: {
+      control: { type: 'boolean' },
+      description:
+        'Whether the filter picker is clearable using a clear button in the rightIcon slot',
+      table: {
+        defaultValue: { summary: false },
+      },
+    },
     disallowEmptySelection: {
       control: { type: 'boolean' },
       description: 'Whether to disallow empty selection',
@@ -448,6 +456,27 @@ export const SingleSelection: Story = {
   ),
 };
 
+export const Clearable: Story = {
+  args: {
+    label: 'Clearable Filter Picker',
+    placeholder: 'Choose items...',
+    selectionMode: 'single',
+    searchPlaceholder: 'Search fruits...',
+    width: 'max 30x',
+    defaultSelectedKey: 'apple',
+    isClearable: true,
+  },
+  render: (args) => (
+    <FilterPicker {...args}>
+      {fruits.map((fruit) => (
+        <FilterPicker.Item key={fruit.key} textValue={fruit.label}>
+          {fruit.label}
+        </FilterPicker.Item>
+      ))}
+    </FilterPicker>
+  ),
+};
+
 export const MultipleSelection: Story = {
   args: {
     label: 'Select Multiple Options',

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -16,8 +16,9 @@ import {
 import { FocusScope, Key, useKeyboard } from 'react-aria';
 import { Section as BaseSection, Item, ListState } from 'react-stately';
 
+import { useEvent } from '../../../_internal';
 import { useWarn } from '../../../_internal/hooks/use-warn';
-import { DirectionIcon, LoadingIcon } from '../../../icons';
+import { CloseIcon, DirectionIcon, LoadingIcon } from '../../../icons';
 import { useProviderProps } from '../../../provider';
 import {
   BASE_STYLES,
@@ -35,12 +36,11 @@ import {
 import { generateRandomId } from '../../../utils/random';
 import { mergeProps } from '../../../utils/react';
 import { useEventBus } from '../../../utils/react/useEventBus';
-import { CubeItemButtonProps, ItemButton } from '../../actions';
+import { CubeItemButtonProps, ItemAction, ItemButton } from '../../actions';
 import { CubeItemBaseProps } from '../../content/ItemBase';
 import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
-import { CubeTooltipProviderProps } from '../../overlays/Tooltip/TooltipProvider';
 import {
   CubeFilterListBoxProps,
   FilterListBox,
@@ -117,6 +117,8 @@ export interface CubeFilterPickerProps<T>
   listStateRef?: MutableRefObject<ListState<T>>;
   /** Additional modifiers for styling the FilterPicker */
   mods?: Record<string, boolean>;
+  /** Whether the filter picker is clearable using a clear button in the rightIcon slot */
+  isClearable?: boolean;
 }
 
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
@@ -235,6 +237,7 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
     shouldUseVirtualFocus,
     onEscape,
     onOptionClick,
+    isClearable,
     ...otherProps
   } = props;
 
@@ -944,6 +947,33 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
       setShouldUpdatePosition(!state.isOpen);
     }, [state.isOpen]);
 
+    // Clear button logic
+    let showClearButton =
+      isClearable && hasSelection && !isDisabled && !props.isReadOnly;
+
+    // Clear function
+    let clearValue = useEvent(() => {
+      if (selectionMode === 'multiple') {
+        if (!isControlledMultiple) {
+          setInternalSelectedKeys([]);
+        }
+        onSelectionChange?.([]);
+      } else {
+        if (!isControlledSingle) {
+          setInternalSelectedKey(null);
+        }
+        onSelectionChange?.(null);
+      }
+
+      if (state.isOpen) {
+        state.close();
+      }
+
+      triggerRef?.current?.focus?.();
+
+      return false;
+    });
+
     return (
       <ItemButton
         ref={triggerRef as any}
@@ -963,6 +993,15 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
             <LoadingIcon />
           ) : rightIcon !== undefined ? (
             rightIcon
+          ) : showClearButton ? (
+            <ItemAction
+              icon={<CloseIcon />}
+              size={size}
+              theme={validationState === 'invalid' ? 'danger' : undefined}
+              qa="FilterPickerClearButton"
+              mods={{ pressed: false }}
+              onPress={clearValue}
+            />
           ) : (
             <DirectionIcon to={state.isOpen ? 'top' : 'bottom'} />
           )