@cube-dev/ui-kit 0.77.1 → 0.77.3

package/es/components/content/Header.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/HotKeys/HotKeys.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/HotKeys/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/ItemBase/ItemBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 
@@ -13,7 +13,7 @@ import { DANGER_CLEAR_STYLES, DANGER_ITEM_STYLES, DANGER_LINK_STYLES, DANGER_NEU
 import { CheckIcon } from '../../../icons/CheckIcon';
 import { LoadingIcon } from '../../../icons/LoadingIcon';
 import { CONTAINER_STYLES, tasty, } from '../../../tasty';
-import { mergeProps, useCombinedRefs, } from '../../../utils/react';
+import { mergeProps, useCombinedRefs } from '../../../utils/react';
 import { TooltipProvider, } from '../../overlays/Tooltip/TooltipProvider';
 import { HotKeys } from '../HotKeys';
 const DEFAULT_ICON_STYLES = {
@@ -53,6 +53,7 @@ const ItemBaseElement = tasty({
             '': '1sf max-content max-content',
             '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',
@@ -265,6 +266,7 @@ const ItemBase = (props, ref) => {
         return {
             'with-icon': !!finalIcon,
             'with-right-icon': !!finalRightIcon,
+            'with-label': !!(children || labelProps),
             'with-prefix': !!finalPrefix,
             'with-suffix': !!finalSuffix,
             'with-description': !!description,
@@ -289,12 +291,12 @@ const ItemBase = (props, ref) => {
     ]);
     // Determine if auto tooltip is enabled
     const isAutoTooltipEnabled = useMemo(() => {
-        if (tooltip === true)
+        if (tooltip === true && typeof children === 'string')
             return true;
         if (typeof tooltip === 'object' && tooltip?.auto)
             return true;
         return false;
-    }, [tooltip]);
+    }, [tooltip, typeof children]);
     // Track label overflow for auto tooltip (only when enabled)
     const mergedLabelRef = useCombinedRefs(labelProps?.ref);
     const [isLabelOverflowed, setIsLabelOverflowed] = useState(false);
@@ -313,7 +315,7 @@ const ItemBase = (props, ref) => {
         }
     }, [children, isAutoTooltipEnabled, checkLabelOverflow]);
     useEffect(() => {
-        if (!isAutoTooltipEnabled || typeof children !== 'string')
+        if (!isAutoTooltipEnabled)
             return;
         const label = mergedLabelRef.current;
         if (!label)
@@ -353,7 +355,7 @@ const ItemBase = (props, ref) => {
             // If auto is enabled and label is overflowed, show auto tooltip
             if ((auto && (children || labelProps) && isLabelOverflowed) ||
                 (tooltipProps.title && !auto)) {
-                return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, title: children, ...tooltipProps, children: itemElement }));
+                return (_jsx(TooltipProvider, { placement: defaultTooltipPlacement, title: tooltipProps.title ?? children, ...tooltipProps, children: itemElement }));
             }
         }
     }

package/es/components/content/ItemBase/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/List/SectionHeading.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/List/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/Paragraph.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/Placeholder/Placeholder.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/PrismCode/PrismCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/PrismCode/prismSetup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/PrismDiffCode/PrismDiffCode.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/Result/Result.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/Skeleton/Skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/Tag/Tag.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/Text.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/content/Title.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/Checkbox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/CheckboxGroup.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/Checkbox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 
@@ -10,13 +10,14 @@ import { cloneElement, forwardRef, useEffect, useMemo, } from 'react';
 import { useButton, useComboBox, useFilter, useHover, useOverlayPosition, } from 'react-aria';
 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 { BASE_STYLES, COLOR_STYLES, extractStyles, OUTER_STYLES, tasty, } from '../../../tasty';
 import { generateRandomId } from '../../../utils/random';
 import { mergeProps, useCombinedRefs, useLayoutEffect, } 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';
@@ -40,7 +41,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',
@@ -83,7 +86,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
             };
         },
     });
-    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, ...otherProps } = props;
+    let { qa, label, extra, labelStyles, isRequired, necessityIndicator, validationState, icon, prefix, isDisabled, multiLine, autoFocus, wrapperRef, inputRef, triggerRef, popoverRef, listBoxRef, isLoading, loadingIndicator, overlayOffset = 8, inputStyles, optionStyles, triggerStyles, listBoxStyles, overlayStyles, wrapperStyles, suffix, hideTrigger, message, description, size = 'medium', autoComplete = 'off', direction = 'bottom', shouldFlip = true, menuTrigger = 'input', suffixPosition = 'before', loadingState, filter, styles, labelSuffix, selectedKey, defaultSelectedKey, isClearable, ...otherProps } = props;
     let isAsync = loadingState != null;
     let { contains } = useFilter({ sensitivity: 'base' });
     let comboBoxStateProps = {
@@ -153,6 +156,28 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     let isInvalid = validationState === 'invalid';
     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) {
         icon = _jsx("div", { "data-element": "InputIcon", children: icon });
@@ -172,6 +197,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         loading: isLoading,
         prefix: !!prefix,
         suffix: true,
+        clearable: showClearButton,
     }), [
         isInvalid,
         validationState,
@@ -180,6 +206,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
         isFocused,
         isLoading,
         prefix,
+        showClearButton,
     ]);
     // If input is not full and the user presses Enter, pick the first option.
     let onKeyPress = useEvent((e) => {
@@ -239,7 +266,7 @@ export const ComboBox = forwardRef(function ComboBox(props, ref) {
     let allInputProps = useMemo(() => mergeProps(inputProps, hoverProps, focusProps), [inputProps, hoverProps, focusProps]);
     let comboBoxField = (_jsxs(ComboBoxWrapperElement, { ref: wrapperRef, qa: qa || 'ComboBox', mods: mods, styles: wrapperStyles, style: {
             zIndex: isFocused ? 1 : 'initial',
-        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
+        }, "data-size": size, children: [prefix ? _jsx("div", { "data-element": "Prefix", children: prefix }) : null, _jsx(InputElement, { ref: inputRef, qa: "Input", autoFocus: autoFocus, "data-autofocus": autoFocus ? '' : undefined, ...allInputProps, autoComplete: autoComplete, styles: inputStyles, mods: mods, "data-size": size }), _jsxs("div", { "data-element": "Suffix", children: [suffixPosition === 'before' ? suffix : null, validationState || isLoading ? (_jsxs(_Fragment, { children: [validationState && !isLoading ? validation : null, isLoading ? _jsx(LoadingIcon, {}) : null] })) : null, suffixPosition === 'after' ? suffix : null, showClearButton && (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "ComboBoxClearButton", "data-no-trigger": hideTrigger ? '' : undefined, onPress: clearValue })), !hideTrigger ? (_jsx(TriggerElement, { "data-popover-trigger": true, qa: "ComboBoxTrigger", ...mergeProps(buttonProps, triggerFocusProps, triggerHoverProps), ref: triggerRef, mods: {
                             pressed: isTriggerPressed,
                             focused: isTriggerFocused,
                             hovered: isTriggerHovered,

package/es/components/fields/ComboBox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DateInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DateInputBase.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePickerButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePickerElement.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePickerInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DatePickerSegment.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DateRangePicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/DateRangeSeparatedPicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/TimeInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/intl.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/parseDate.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/props.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/DatePicker/utils.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/FileInput/FileInput.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/FilterListBox/FilterListBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/FilterListBox/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 

package/es/components/fields/FilterPicker/FilterPicker.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.77.1
+ * @cube-dev/ui-kit v0.77.3
  * Released under the MIT license.
  */
 
@@ -9,14 +9,15 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { FocusScope, useKeyboard } from 'react-aria';
 import { Section as BaseSection, Item } 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, COLOR_STYLES, extractStyles, filterBaseProps, OUTER_STYLES, tasty, } from '../../../tasty';
 import { generateRandomId } from '../../../utils/random';
 import { mergeProps } from '../../../utils/react';
 import { useEventBus } from '../../../utils/react/useEventBus';
-import { ItemButton } from '../../actions';
+import { ItemAction, ItemButton } from '../../actions';
 import { Text } from '../../content/Text';
 import { useFieldProps, useFormProps, wrapWithField } from '../../form';
 import { Dialog, DialogTrigger } from '../../overlays/Dialog';
@@ -62,7 +63,7 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             return fieldProps;
         },
     });
-    let { qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, ...otherProps } = props;
+    let { qa, label, extra, icon, rightIcon, prefix, suffix, hotkeys, triggerTooltip, triggerDescription, labelStyles, isRequired, necessityIndicator, validationState, isDisabled, isLoading, message, mods: externalMods, description, descriptionPlacement, placeholder, size = 'medium', styles, listBoxStyles, popoverStyles, type = 'outline', theme = 'default', labelSuffix, shouldFocusWrap, children, shouldFlip = true, selectedKey, defaultSelectedKey, selectedKeys, defaultSelectedKeys, disabledKeys, onSelectionChange, selectionMode = 'single', listStateRef, focusOnHover, showSelectAll, selectAllLabel = 'All', items, header, footer, headerStyles, footerStyles, triggerStyles, allowsCustomValue, renderSummary, isCheckable, allValueProps, customValueProps, newCustomValueProps, searchPlaceholder, autoFocus, filter, emptyLabel, searchInputStyles, searchInputRef, listStyles, optionStyles, sectionStyles, headingStyles, listRef, disallowEmptySelection, shouldUseVirtualFocus, onEscape, onOptionClick, isClearable, ...otherProps } = props;
     styles = extractStyles(otherProps, PROP_STYLES, styles);
     // Generate a unique ID for this FilterPicker instance
     const filterPickerId = useMemo(() => generateRandomId(), []);
@@ -648,11 +649,33 @@ export const FilterPicker = forwardRef(function FilterPicker(props, ref) {
             // Disable the update of the position while the popover is open (with a delay) to avoid jumping
             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 (_jsx(ItemButton, { ref: triggerRef, "data-popover-trigger": true, type: type, theme: validationState === 'invalid' ? 'danger' : theme, size: size, isDisabled: isDisabled || isLoading, mods: {
                 placeholder: !hasSelection,
                 selected: hasSelection,
                 ...externalMods,
-            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
+            }, icon: icon, rightIcon: isLoading ? (_jsx(LoadingIcon, {})) : rightIcon !== undefined ? (rightIcon) : showClearButton ? (_jsx(ItemAction, { icon: _jsx(CloseIcon, {}), size: size, theme: validationState === 'invalid' ? 'danger' : undefined, qa: "FilterPickerClearButton", mods: { pressed: false }, onPress: clearValue })) : (_jsx(DirectionIcon, { to: state.isOpen ? 'top' : 'bottom' })), prefix: prefix, suffix: suffix, hotkeys: hotkeys, tooltip: triggerTooltip, description: triggerDescription, descriptionPlacement: descriptionPlacement, styles: styles, ...keyboardProps, "aria-label": `${props['aria-label'] ?? props.label ?? ''}`, children: renderTriggerContent() }));
     };
     const filterPickerField = (_jsx(FilterPickerWrapper, { qa: props.qa || 'FilterPicker', styles: styles, ...filterBaseProps(otherProps, { eventProps: true }), children: _jsxs(DialogTrigger, { type: "popover", placement: "bottom start", styles: triggerStyles, shouldUpdatePosition: shouldUpdatePosition, shouldFlip: shouldFlip, isDismissable: true, shouldCloseOnInteractOutside: (el) => {
                 const menuTriggerEl = el.closest('[data-popover-trigger]');