feat: add onClear callback

Author: tenphi

.changeset/odd-wasps-breathe.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Make Panel placeSelf stretch by default.

.changeset/perfect-dancers-move.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Fix Item interface for FilterPicker.

.changeset/pretty-comics-train.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Add onClear callback for FilterPicker, Select, ComboBox and SearchInput.

src/components/fields/ComboBox/ComboBox.tsx

@@ -130,6 +130,8 @@ export interface CubeComboBoxProps<T>
   allowsCustomValue?: boolean;
   /** Whether the combo box is clearable using ESC keyboard button or clear button inside the input */
   isClearable?: boolean;
+  /** Callback called when the clear button is pressed */
+  onClear?: () => void;
 }
 
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
@@ -336,6 +338,8 @@ export const ComboBox = forwardRef(function ComboBox<T extends object>(
     }
     // Focus back to the input
     inputRef.current?.focus();
+
+    props.onClear?.();
   });
 
   let comboBoxWidth = wrapperRef?.current?.offsetWidth;

src/components/fields/FilterPicker/FilterPicker.tsx

@@ -123,6 +123,8 @@ export interface CubeFilterPickerProps<T>
   mods?: Record<string, boolean>;
   /** Whether the filter picker is clearable using a clear button in the rightIcon slot */
   isClearable?: boolean;
+  /** Callback called when the clear button is pressed */
+  onClear?: () => void;
 }
 
 const PROP_STYLES = [...BASE_STYLES, ...OUTER_STYLES, ...COLOR_STYLES];
@@ -982,6 +984,8 @@ export const FilterPicker = forwardRef(function FilterPicker<T extends object>(
 
       triggerRef?.current?.focus?.();
 
+      props.onClear?.();
+
       return false;
     });
 

src/components/fields/SearchInput/SearchInput.tsx

@@ -20,6 +20,8 @@ export interface CubeSearchInputProps
     SearchFieldProps {
   /** Whether the search input is clearable using ESC keyboard button or clear button inside the input */
   isClearable?: boolean;
+  /** Callback called when the clear button is pressed */
+  onClear?: () => void;
 }
 
 export const SearchInput = forwardRef(function SearchInput(
@@ -29,7 +31,7 @@ export const SearchInput = forwardRef(function SearchInput(
   props = castNullableStringValue(props);
   props = useProviderProps(props);
 
-  let { isClearable, validationState } = props;
+  let { isClearable, validationState, onClear } = props;
 
   let inputRef = useRef(null);
 
@@ -57,6 +59,12 @@ export const SearchInput = forwardRef(function SearchInput(
                 type={validationState === 'invalid' ? 'clear' : 'neutral'}
                 theme={validationState === 'invalid' ? 'danger' : undefined}
                 {...ariaToCubeButtonProps(clearButtonProps)}
+                onPress={(e) => {
+                  // Call the original clear functionality
+                  clearButtonProps.onPress?.();
+                  // Call the onClear callback
+                  onClear?.();
+                }}
               />
             )}
           </>

src/components/fields/Select/Select.tsx

@@ -204,6 +204,8 @@ export interface CubeSelectBaseProps<T>
   theme?: 'default' | 'special';
   /** Whether the select is clearable using a clear button in the rightIcon slot */
   isClearable?: boolean;
+  /** Callback called when the clear button is pressed */
+  onClear?: () => void;
 }
 
 export interface CubeSelectProps<T> extends CubeSelectBaseProps<T> {
@@ -351,6 +353,8 @@ function Select<T extends object>(
     }
     // Return focus to the trigger for better UX
     triggerRef.current?.focus?.();
+
+    props.onClear?.();
   });
 
   let triggerWidth = triggerRef?.current?.offsetWidth;

src/components/layout/Panel.tsx

@@ -37,6 +37,7 @@ const PanelElement = tasty({
       card: '1bw',
     },
     flexGrow: 1,
+    placeSelf: 'stretch',
   },
 });